Twenty Fifteen looks great on devices of all sizes, from desktop to mobile and everything in between. The theme adapts to any screen without sacrificing usability or design integrity.

Quick Specs (all measurements in pixels)

There are a few ways that you can customize Twenty Fifteen, all from WordPress’ Customizer. This short guide will show you how to:

• choose a featured color scheme
• add descriptions to your menus
• add social icons in your menu
• add block patterns

Choose a featured color scheme

Twenty Fifteen has six color schemes you can use to change the look of your blog. The Default color scheme is a light gray, but you can also choose from Dark, Yellow, Pink, Purple, and Blue.

To choose your color scheme, go to Appearance > Customize.

Under “Colors”, select your preferred color scheme from the drop down:

You’ll see the color scheme change in the preview pane to the right.

When you’re done, click Save and Publish.

Add Menu descriptions

Twenty Fifteen has a menu design that’s easy to navigate, especially when you add menu descriptions.

To start adding descriptions to your menus, go to Appearance > Menus and click the Screen Options tab in the upper right of the screen.

In the “Show advanced menu properties” section, check the box next to Description.

Now you can begin adding descriptions to any link in a menu.

When you’re done, click Save Menu.

Add social icons

Twenty Fifteen also allows you to display links to your social media profiles with crisp, perfectly-sized icons.

You can see these icons at the bottom of the menu displayed in the previous section.

The first step is to go to Appearance > Menus and create a new menu – you can name your menu anything you like.

You will then add the URL for each social profile to your menu as a custom link.

When you have added all desired links, click Save Menu.

Now that you have created your menu and added your social links, go to the Manage Locations tab and next to “Social Links Menu”, select the social icons menu you just created from the drop down.

Click Save Changes when you’re done.

Available icons

Linking to any of the following sites will automatically display its icon in your menu:

• CodePen
• Digg
• Dribbble
• Dropbox
• Email (mailto: links)
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Path
• Pinterest
• Pocket
• Polldaddy
• Reddit
• RSS Feed (URLs with /feed/
• Spotify
• Skype
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• WordPress
• YouTube

Add Block Patterns

Twenty Fifteen comes bundled with a set of block patterns.

You can access the block patterns from the Block Editor.

1. Click the + icon to add a new block.
2. Click on the Patterns tab.
3. Select Twenty Fifteen from the drop down menu.
4. Click on the pattern you wish to insert and the pattern is inserted in the document at the location of your cursor.

What else can you do?

You can also use the Customizer to make the following changes to your website:

• Change your Custom Header image
• Featured Images: works best with images that are 825px wide by 510px high
• Change the background image or color
• Set a static front page

You can also select a gradient option for certain blocks that fit the theme color scheme:

Links

• Twenty Fifteen Demo and Download
• Twenty Fifteen Changelog

Quick Specs

• On a 1440px laptop screen, the main column width is up to 1032px wide with the one column layout.
• There is one widget area in the footer with a column width of 1032px.
• The recommended Featured Image size is 2000px wide by 1200px high.

Full Block Editor Support

The block editor introduced in WordPress 5.0 grants users an unprecedented level of freedom to customize their site’s layout and design. In order to fully achieve their vision, users will need a new generation of flexible themes, built to take advantage of the creative freedom that the block editor offers. Twenty Nineteen is built with this in mind and includes both front-end and editor styles for all core blocks that ship with WordPress in 5.0. This means that what you see in the editor will look almost exactly like what you see on the front end.

Site Logo

Twenty Nineteen supports a Site Logo which works great as an avatar for a personal blog or an business logo or icon. To modify it on your site, navigate to Customizer > Site Identity.

Custom Colors

Twenty Nineteen uses a blue accent color by default. That color can be customized using a color hue slider. To explore the color options, navigate to Customizer > Colors.

By default, Twenty Nineteen applies a color filter to featured images using the color selected here. This can be disabled by deselecting the “Apply a filter to featured images using the site’s primary color” checkbox. Please not that when this option is disabled, the theme will still apply a black overlay on the featured image on single pages, in order to preserve the readability of the text that sits on top of the image.

Language Support

Twenty Nineteen includes optimal font styles for many languages, thanks to feedback from the WordPress community. The theme uses local system fonts by default and makes adjustments to the typography for the following alphabets:

• Arabic
• Chinese
• Cyrillic
• Devanagari
• Greek
• Gujarati
• Hebrew
• Japanese
• Korean
• Thai

Widgets

Twenty Nineteen includes a widget area below the site’s content, just above the footer.

On screens larger than 1168px wide, widgets in this area are automatically arranged into two columns.

Add Social Icons

Twenty Nineteen includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the header. If you’re not familiar with this functionality, please check out the documentation from Twenty Fifteen.

The following services are supported by Twenty Nineteen’s Social Icons Menu:

• Behance
• Codepen
• DeviantArt
• DockerHub
• Digg
• Dribbble
• Dropbox
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Meanpath
• Medium
• Pinterest
• Periscope
• Pocket
• Reddit
• Skype
• SlideShare
• Snapchat
• SoundCloud
• Spotify
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• Vine
• VK
• WordPress
• Yelp
• YouTube

Support & Resources

Get community help with Twenty Nineteen in its forum: https://wordpress.org/support/theme/twentynineteen

You can also read the theme’s changelog.

Quick Specs

• The main column width is up to 525px for the two-column layout and 740px for the one-column layout.
• The sidebar column width is up to 326px.
• The recommended size for featured images is 2000px wide by 1200px high.
• The recommended size for header videos and header images is 2000px wide by 1200px high.

Header Media

Twenty Seventeen supports both header images and header videos. To modify either type on your site, navigate to Customizer > Header Media.

For header videos, you can upload your own mp4 video or link to a video hosted on YouTube. Smaller file sizes will help make sure your site is loaded quickly.

A header image can be used on its own to display a large photograph at the top of your site. It can also be used as a video fallback: If both a video and image are added, the image will be used as a placeholder while the video loads, and it also acts as a fallback on smaller screens where videos may be harder to serve over mobile networks.

Front Page

Twenty Seventeen allows you to build a striking front page composed of content from different pages on your site. Each page’s featured image is highlighted, displayed at full-screen size with a fixed position. Twenty Seventeen has four different sections you can assign pages to.

To set this up, first navigate to Customizer > Static Front Page, and set your site to use a static front page if you haven’t already.

Navigate to Customizer > Theme Options. Under each Front Page Section # Content header, select a page you’d like to display for that section.

If you haven’t created any pages yet, you can do that from the Customizer by clicking + Add New Page beneath any of the sections. This will allow you to create a new page from the Customizer that you can later add content to.

For the best appearance, make sure each page includes a featured image and some content.

You can also select your Blog Posts page, and the panel will display your three latest blog posts.

Once you’ve finished adding pages to the sections, click Save & Publish.

If you’d like to change the number of sections you can add pages to, add this snippet to your theme’s functions.php:

add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' );
function prefix_custom_front_page_sections( $num_sections ) {
return 6;
}

This snippet changes the default four sections to six.

Custom Colors

Twenty Seventeen includes three color options: the default light color scheme, a dark color scheme, and a Custom Colors scheme that can be adjusted to various hues using a slider.

To explore all the color options available, navigate to Customizer > Colors.

Language Support

Twenty Seventeen includes optimal font styles for many languages, thanks to feedback from the WordPress community. The theme uses Libre Franklin by default and makes adjustments to the typography for the following alphabets:

• Arabic
• Chinese
• Cyrillic
• Devanagari
• Greek
• Gujarati
• Hebrew
• Japanese
• Korean
• Thai

To improve legibility, Twenty Seventeen also removes its letter-spacing styles for all non-Latin alphabets.

One- and Two-Column Layouts

For pages, Twenty Seventeen allows you to choose between a one- and two-column layout. This can be changed via Customizer > Theme Options. The theme defaults to the two-column layout, which displays the page title in one column and the page content in the other.

Note: This feature only becomes available after setting a static front page.

When the one-column layout is selected, both the page title and content display in a wider single column, centered on the page.

Widgets

Twenty Seventeen includes a footer widget area allowing widgets to be added below the site’s content.

The blog index, archive, and search pages and single blog posts also include a sidebar widget area. For each of these pages, the content is displayed in one center column if there is no sidebar. With the sidebar, the content is displayed in one column and the widgets are displayed in the other.

Pullquotes

Pullquotes can be used to direct your readers’ attention to a particular passage or add visual interest to your posts and pages. In Twenty Seventeen, you can pair a pullquote with an alignleft or alignright class on the blockquote element to further highlight it. Instructions on how to do this can be found here. See the following example:

<blockquote class="alignleft">This is my fabulous left-aligned pullquote.</blockquote>

When a two-column layout is used (whether via the Customizer for pages, or by adding a sidebar widget for posts), the pullquote aligned to the same side will display fully outside of the content area and below the second column. Note: This will only work when the pullquote appears in the content below where the second column ends.

Post Formats

Twenty Seventeen supports the following post formats:

• Aside
• Audio
• Gallery
• Image
• Link
• Quote
• Video

Social Icons

Twenty Seventeen includes a Social Icons Menu, allowing you to add links to your social media profiles that will be displayed as logos in the footer. If you’re not familiar with this functionality, please refer to the documentation from Twenty Fifteen.

The following services are supported by Twenty Seventeen’s Social Icons Menu:

• Behance
• Codepen
• DeviantArt
• Digg
• Dribbble
• Dropbox
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Meanpath
• Medium
• Pinterest
• Pocket
• Reddit
• Skype
• SlideShare
• Snapchat
• SoundCloud
• Spotify
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• Vine
• VK
• WordPress
• Yelp
• YouTube

Support and Resources

Get community help with Twenty Seventeen on its forum.

Get tips for theming with Twenty Seventeen from this post on make.wordpress.org by one of Twenty Seventeen’s developers. You can also read the theme’s changelog.

Tutorials:

• How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)
• How to Customize the Free Twenty Seventeen WordPress Theme for Business
• A Developer’s Introduction to the Twenty Seventeen Theme
• How to Add Extra Twenty Seventeen Theme Front Page Sections

Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.

Quick Specs

1. The main column width is up to 840px.
2. The sidebar column width is up to 300px.
3. The recommended Featured Image size is 1200px wide.
4. The recommended Custom Header image size is 1200px wide and 280px height.

No-Sidebar Layout

If you’d like to keep your visitors’ focus squarely on your content, simply don’t add any widgets to the sidebar widget area. This also allows you to give your posts a powerful visual boost by adding a large Featured Image, up to 1200px wide.

Content Bottom Widget Areas

Twenty Sixteen’s two Content Bottom Widget Areas are handy spots where you can place supplementary content. On single posts and pages, these widget areas display below your content. To add widgets to them, Click Appearance > Widgets from Administration Screens and add your favorite widgets to Content Bottom 1 or Content Bottom 2 or both.

Post Intro

Twenty Sixteen has a small but nifty intro feature. Also known as a “deck” or “kicker,” the intro area is displayed between the headline and body copy. Your intro can provide important information and act as a link between the title and the rest of your post. A carefully crafted deck grabs readers’ attention, giving them an idea of what to expect in the full post.

Add your intro in the Screen Options.

Overhanging Full-Size Image

Have you ever wanted to show off your large images without sacrificing the post’s readability? On a large screen, full-size images wider than or equal to 840px overhang the column.

Pull Quotes

Pull quotes are a great way to refocus your readers’ attention — just add a class of alignleft or alignright to a blockquote element. Here are some examples of how to do that in the Text Editor.

<blockquote class="alignleft">A bolder pull blockquote that aligns to the left</blockquote>

<blockquote class="alignright">A bolder pull blockquote that aligns to the right</blockquote>

On a large monitor, the left-aligned pull quote overhangs the main column to maintain the readability of the text wrapped around it.

Customize

Open the Customizer to check out the four featured color schemes you can use to instantly change the look of your website.

• (Default)
• Red
• Gray
• Dark
• Yellow

Personalize the design even further by adding a Custom Header Image or/and Site Logo.

Social Menu

With Twenty Sixteen, you can display links to your social media profiles with perfectly sized icons in the footer. If you are not familiar with this function, refer to this section of Twenty Fifteen.

Linking to any of the following sites will automatically display its icon in your menu:

• CodePen
• Digg
• Dribbble
• Dropbox
• Email (mailto: links)
• Facebook
• Flickr
• Foursquare
• GitHub
• Google+
• Instagram
• LinkedIn
• Path
• Pinterest
• Polldaddy
• Reddit
• RSS Feed (urls with /feed/)
• Spotify
• StumbleUpon
• Tumblr
• Twitch
• Twitter
• Vimeo
• WordPress
• YouTube

Links

• Twenty Sixteen Demo and Download
• Twenty Sixteen Changelog
• Base article

Quick Specs

• On a 1440px laptop screen, the main column width is up to 580px wide. The “Wide” block width is up to 1200px wide, and the “Full” block width extends the entire width of the screen.
• There are two widget areas in the footer with a maximum column width of 570px.
• The recommended Featured Image size is 1980px wide by 1485px high.

Starter Content

Twenty Twenty contains Starter Content that helps to set up the theme identical to the theme demo page. The Starter Content can only be activated on freshly installed sites that do not have any pages or posts yet. To activate, please head over to the Customizer and click on Publish.

Full Block Editor Support

Twenty Twenty is designed and developed to take maximum advantage of the creative freedom enabled by the block editor. Extra care has been given to the Columns and Group blocks, which can be combined into impressive landing pages with intricate blocks layouts. Twenty Twenty includes full editor styles for the block editor, so what you see in the editor will almost exactly match the end result.

Site Logo

Twenty Twenty includes a site logo setting which can be used to display the logo of your business or an image of yourself. You can set your site logo by going to Customizer →︎ Site Identity. The recommended resolution of the logo is 240px wide by 180px high.

Custom Colors

Twenty Twenty includes three color settings that make it easy to give your site a personal touch. To change the color settings, navigate to Customizer →︎ Colors.

The color settings included in Twenty Twenty are:

• Background Color (defaults to a light beige)
• Header & Footer Background Color (defaults to white)
• Primary Color (defaults to pink)

The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.

Cover Template

Twenty Twenty includes a page template called the “Cover Template” that displays the title of the post or page on top of the featured image.

You can set a post or page to use the cover template by editing the post or page, selecting the “Document” tab in the right sidebar, expanding the “Post/Page Attributes” tab, and selecting “Cover Template” in the “Template” dropdown.

Twenty Twenty includes a number of different options for the Cover Template, located in the “Cover Template” tab in the Customizer. Here, you can set the background color of the image overlay, the opacity of the image overlay, and the color of the text displayed on top of the overlay. You can also select whether the background image should have a fixed position when the visitor scrolls, which creates a gentle parallax effect.

Language Support

Twenty Twenty includes optimal font styles for many languages, thanks to feedback from the WordPress community. The theme uses local system fonts by default and makes adjustments to the typography for the following alphabets:

• Arabic
• Chinese
• Cyrillic
• Devanagari
• Greek
• Gujarati
• Hebrew
• Japanese
• Korean
• Thai
• Vietnamese

Menus

There are two different desktop menus to choose from in Twenty Twenty:

• A traditional horizontal menu, which is always visible
• An expandable menu, which is hidden behind a menu button

You can choose which menu location to use by going to Appearance →︎ Menus, where you can assign a menu to the “Desktop Horizontal Menu” or the “Desktop Expanded Menu”. You can also use both menu locations in combination, if you prefer.

Twenty Twenty also includes a footer menu, which is displayed beneath the site content, and a mobile menu, which defaults to the menu set to either the desktop horizontal menu or the desktop expanded menu.

Widgets

Twenty Twenty includes two widget areas below the site content and above the footer.

On screens larger than 699px wide, widgets in this area are automatically arranged into two columns.

Add Social Icons

Twenty Twenty includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the footer. If you’re not familiar with this functionality, please check out the documentation from Twenty Fifteen.

The following services are supported by Twenty Twenty’s Social Icons Menu:

• 500px
• Amazon
• Bandcamp
• Behance
• Codepen
• DeviantArt
• Dribbble
• Dropbox
• Etsy
• Facebook
• Feed
• Flickr
• Foursquare
• GitHub
• GitLab
• Goodreads
• Google
• Instagram
• Kickstarter
• JSFiddle
• Last.fm
• LinkedIn
• Mail
• Mastadom
• Medium
• Meetup
• Pinterest
• Pocket
• Reddit
• Skype
• Snapchat
• SoundCloud
• Spotify
• TikTok
• Tumblr
• Twitch
• Twitter
• Vimeo
• VK
• WhatsApp
• WordPress
• Yelp
• YouTube

Additional icons can be added following the steps under “Adding icons in Twenty Twenty” at Themes field guide: WordPress 5.5.

Support & Resources

Get community help with Twenty Twenty in its forum: https://wordpress.org/support/theme/twentytwenty

You can also read the theme’s changelog.

Released: January 16, 2024.

• Revert usage of str_contains() in older bundled themes (#60241)

Version 2.4

Released: November 7, 2023 with WordPress 6.4.

• Fix text color in the iframe editor when the background color is dark (#59086)
• Update default themes to use new script function signature: the last parameter of wp_enqueue_script() is an array instead of the boolean true or false (#59302)
• Use defer loading strategy for theme scripts (#59316)

Version 2.3

Released: August 8, 2023 with WordPress 6.3

• Fix Button block text color when located in footer widgets (#57087)
• Fix Letter Case control implementation on the Button block ([56000])
• Inherit Quote block’s paragraph custom letter spacing in the editor (#58033)
• Fix left margin in Latest Posts & Latest Comments blocks (#58396)
• Remove various unused function parameters and variables (#57371)
• Deprecate the skip link focus fix, removing the script from the wp_print_footer_scripts action (#54421)
• Remove call to load_theme_textdomain() function (#58318)
• Add “Requires at least” and “Requires PHP” to readme.txt (#57857)

Version 2.2

Released: March 29, 2023 with WordPress 6.2

• Add Mastodon domains for menu item icons. (#49099)
• Mark strings for screen readers (#29748)
• Pullquote block: Add citation text color issue (#55990)
• Use the new /documentation/ URLs for HelpHub links in Bundled Themes. (#57726)
• Use strict comparison in bundled themes’ PHP files. ([55420])
• Deprecation warnings on PHP 8.1 because of wp_add_inline_style() (#57777)
• Improve various globals documentation, as per docblock standards. ([55472])
• Remove title attributes (#57199)

Version 2.1

Released: November 1, 2022 with WordPress 6.1

• “Add citation” text font-style issue in Quote block (#55931)
• “Wide line” separator breaks inside columns. (#53643)
• Comments accessibility – links should be identifiable (#56269)
• Fix social icons margin in widget area (#56474)
• Latest Posts block set to 2 columns displays single column in editor (#56175)
• Post title block alignment setting is not working (#56167)
• Remove Left Padding in Social icon block in editor (#55987)
• Separator Block backslash issue in editor (#55910)
• Width discrepancy between editor and preview when nested in cover block (#56049)
• Button-style link with Outline style is missing the border (#55824)
• Links do not inherit user-defined text colors in the editor (#56214)
• style of rtl paragraph (#49447)
• text-transform issue in H6 Heading block (#56194)
• update selectors in get_non_latin_css() (#56396)
• word wrap in comments required message (#56397)
• Correctly escape stylesheet URL (#56696)
• Remove closing PHP tags from bundled themes (#40039)

Version 2.0

Released: May 24, 2022 with WordPress 6.0

• Add Noto Serif as a fallback font before Garamond (#50723)
• Improve padding for number input type (#53115)
• Fix aria-expanded handling in search toggle (#53951)

Version 1.9

Released: January 25, 2022

• Add Support for wa.me (WhatsApp’s preferred link) (#50542)
• Add privacy policy link to footer (#53446)
• Custom Logo bug in the Customizer (#51337)
• Editor title alignment broken by Gutenberg plugin v11.4.0 updates (#54056)
• Inline style class names are duplicated (#54196)
• Remove “role” attribute on HTML5 elements with a default landmark role (#54079)
• Bundled Themes: Add “Tested up to” in style.css (#53797)

Version 1.8

Released: July 20, 2021

• Ensure custom primary color is applied to text in the editor (#50120)
• Hide some elements for print that are not useful in that context (#50433)
• Correct label attribute references to aria_label in get_search_form (#51877)
• Update theme information in the package.json file (#53196)
• Remove extra margin within the Query Loop block (#53482)

Version 1.7

Released: March 9, 2021

• Ordered list styling in Classic Editor (#50454)
• Core blocks are positioned incorrectly in some core bundled themes (#52009)
• Exclude Twenty Twenty from .gitignore (#52265)
• Remove aria-expanded on Close Search button (#52355)
• RTL list styles (#52401)
• Synchronise ignored files between git and svn (#52502)

Version 1.6

Released: December 8, 2020

• Add context to adjectives and homonyms. This allows for better localization in languages where adjectives are translated differently depending on which noun they modify, or when a different translation is required for a noun vs. a verb. (#49797)
• Introduce block patterns for Twenty Twenty and add the block-patterns tag. (#51098)
• Correct heading blocks alignment in editor styles. This explicitly sets top and bottom margins instead of defining all four sides in shorthand notation. (#51148)
• Update the URL for PHP date formats table in translator comments. (#51335)
• Correctly indent nested unordered lists in RTL editor styles. (#51574)
• Declare support for the HTML5 feature navigation-widgets. (#51445)
• Remove extra space from the comment link in TwentyTwenty_Walker_Comment. (#51533)

Version 1.5

Released: August 11, 2020

• Ensure appropriate title for author archives for that don’t have posts. (#50421)
• Twenty Twenty uses overly specific selector for button background. (#50271)
• Modifies the Customize setting Site Identity > Retina logo so that the option is hidden if there is no logo is set in Site Identity > Logo. (#50109)
• Removes the unnecessary $css_dependencies variable in twentytwenty_block_editor_styles(). (#49986)
• Fixes the issue with button styles not working when the Gutenberg plugin is activated while maintaining backwards compatibility. (#49896)
• Fixes the issue of caption being escaped by replacing esc_html with wp_kses_post in the caption in featured images. (#49833)
• Removes text-transform: uppercase; from button blocks in order to give the user the option to have a button without All Capital letters. (#49710)
• Fixes the disappearing + in the block editor when using the latest version of the Gutenberg plugin. (#49610)
• Fixes the image alignment issue by removing margin-left: auto; and margin-right: auto; from .editor-styles-wrapper .wp-block-image.is-resized. (#49600)
• Fixes the issue of number of comments not translatable by removing the single quote from around the 1 in the elseif conditional of the comments template. (#49058)
• Adds a Social Icons Filter to Twenty Twenty that allows for new icons to be added to the theme by filter. (#48713)

Version 1.4

Released: June 10, 2020

• Fixed comments template number of replies not translatable. (#49058)
• Fixed inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari. (#49435)
• Fixed HTML in featured image caption is being escaped. (#49833)
• Fixed small typo. (#49932)
• Fixed uses overly specific selector for button background. (#50271)

Version 1.3

Released: May 14, 2020

• Fixed custom post types that don’t support authors, shows author box. (#48803)
• Fixed anchor links don’t work in mobile menu. (#48916)
• Added icon for g.page links. (#49088)
• Fixed missing license for images. (#49316)
• Fixed image caption is not aligned center when image is, on the front-end. (#49320)
• Fixed submenu items disappearing underneath the Cover block. (#49322)
• Fixed resized images are centered inside the editor (with no alignment set) since WordPress 5.4. (#49600)
• Fixed block editor inserter is missing the +. (#49610)
• Fixed inline images in list blocks are not positioned correctly. (#49793)
• Added GPLv2 compatible TikTok icon to the social icon menu. (#49893)
• Fixed button styles produce inconsistent output and cannot be edited. (#49896)
• Fixed remove unnecessary $css_dependencies variable in twentytwenty_block_editor_styles(). (#49986)
• Added customizer retina_logo should be hidden when no logo is set. (#50109)

Version 1.2

Released: March 31, 2020

• Remove Non-printable characters from starter-content.php file (#49534)
• Fixed searchform.php error (#49523)
• Fixed Author Bio/Post Meta Width in Cover Template in Mobile (#49254)
• Remove unnecessary escaping for get_the_title() (#49190)
• Added social icon for WhatsApp (#49098)
• Fixed Property font-size is overwritten – coding standard. (#49015)
• Fixed Property border-style is overwritten – coding standard. (#49006)
• Fixed Post nav pages link outside of the container (#48979)
• Fixed Menu rendering problem Unicode (Bangla) (#48970)
• Fixed Menu on a mobile device becomes responsive after tapping a few times and switching pages (#48643)
• Added theme support for responsive embeds (#48552)
• Update calendar widget styles for 5.4 markup. (#49549)

Version 1.1

Released: December 12, 2019

• Add customizer option to show or hide author bio (#48550)
• Replace JS-based smooth scroll with CSS (#48551, #48763, #48866)
• Fix on mobile devices using a webkit browser, the menu and search modals could not be opened due to a TypeError: document.body is null (#48601)
• Fix correctly align the author bio and bottom post meta on single posts on mobile (#48619)
• Remove duplicate array key/value in TwentyTwenty_Non_Latin_Languages::get_non_latin_css() (#48624)
• Make the checkbox in the comment form larger and more consistent with other checkboxes (#48652)
• Fix typos in a variable name and inline comment in assets/js/color-calculations.js. (#48704)
• Fix placeholder misalignment in Firefox when a height is added as an inline style to the input field (#48876)
• Pass $post_meta and $location values to twentytwenty_start_of_post_meta_list and twentytwenty_end_of_post_meta_list actions to provide better context (#48906)
• Remove redundant echo for bloginfo() call in footer.php (#48918)

Version 1.0

Released: November 12, 2019

Initial Release.

A block theme designed to take full advantage of full site editing capabilities, particularly the opportunities offered by patterns. Create new pages in a matter of moments by constructing them from the wide range of patterns that come bundled with the theme.

Quick specs

• Requires at least WordPress 6.4.
• Requires at least PHP version 5.6.

Full site editing support

Twenty Twenty-Four is designed to support full site editing’s powerful features, including:

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates used by pages, posts, and other content.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation block, Query Loop block, and more.

Like its predecessor Twenty Twenty-Three, this theme is designed to use WordPress site-editing features instead of the Customizer, which will be hidden by default. The Customizer may be automatically reactivated if you have plugins that require it.

One theme, many variations

In the past, default themes often centered around a specific topic or style. However, Twenty Twenty-Four breaks away from this tradition. This theme is thoughtfully designed to be your all-encompassing choice for any type of website, regardless of its specific focus.

The Twenty Twenty-Four theme allows users to change certain Templates to use alternative patterns designed for specific use-cases: Business (the default), Writer, and Portfolio.

Alternative patterns

Alternative patterns for the Writer and Portfolio types can be switched to for the following templates:

• Blog Home
• Index
• Archive
• Search

You can use the Replace Template functionality to select one of the alternative patterns for your current template.

1. When editing one of the Templates mentioned above – make sure the ‘Template’ tab of the sidebar inspector is selected.
2. Click the three dots next to the Template name, and select the ‘Replace Template’ option from the menu that appears.
3. You will be shown a selection of alternative patterns to choose from. Clicking to select one will replace the existing template contents with the new pattern.
4. Save the changes to your template.

Template Parts

Twenty Twenty-Four also includes a range of different layouts for the Header and Footer of your site. When editing your Templates you can replace the template part with one of the variants.

Custom Templates

Twenty Twenty-Four includes several custom page templates for you to use:

• Page no Title: the layout of a standard page, but with no page title at the top.
• Page with Sidebar: displays page content with a sidebar on the right hand side.
• Page with Wide Image: displays a wide featured-image with page title on the left, and content on the right.

Block patterns

Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly replaced by your own. Whether a call-to-action, an event announcement, or FAQ, patterns can help jump-start the creation of your page or post.

Style variations

Twenty Twenty-Four’s comes with a minimalist, but versatile, palette in monochromatic greys.

Prefer a different look? Visit the Styles area in the Editor and choose from 9 additional style variations to instantly switch up the design, including colors and typography.

Block variations

Twenty Twenty-Four comes with style variations for a number of blocks – allowing slightly different appearance from their defaults.

Heading block

Headings in Twenty Twenty-Four come with a variation that includes an Asterix as a bullet point above the heading.

When editing your headings – you will see an option in the sidebar to switch to the variant style. Selecting the ‘With asterisk’ style will keep the size and font of your heading – but add the stylized asterix above it.

List block

List items in Twenty Twenty Four come with a variation that uses a checkmark as bullet points instead of the default style.

When editing your list – you will see an option in the sidebar to switch to the variant style. Selecting the ‘Checkmark’ style will keep the swap the default bullet for a checkmark.

Details block

The Details block in Twenty Twenty Four come with a variation that uses an arrow to mark the summary instead of the default style.

When editing your Details block – you will see an option in the sidebar to switch to the variant style. Selecting the ‘Arrow icon’ style will keep the swap the default marker dor the summary section to use an arrow icon.

Navigation links

Links within Navigation blocks in Twenty Twenty Four come with a variation that adds an arrow to the right of the link text (sometimes used for indicating a link that leaves the main site).

When editing menu items – you will see an option in the sidebar (Style tab) to switch to the variant style. Selecting the ‘With arrow’ style will add the arrow to the right of the link text.

Category and Tag list blocks

Caterogy and Tag list blocks in Twenty Twenty Four come with a variation that styles each term as a ‘pill’ with a light background.

When the Category or Tag blocks within a Query Loop – you will see an option in the sidebar (Style tab) to switch to the variant style. Selecting the ‘Pill’ style will add a light background color (with rounded corners) to each term in the list..

Design specifications

Twenty Twenty-Four comes with the following defaults for style.

• Cardo Font for headlines.
• Sans-serif System font for paragraphs.
• Instrument Sans, Inter, and Jost as alternative fonts.
• The default color palette of Twenty Twenty-Four is light, providing a fresh and inviting appearance. The Style Variations (mentioned above) contain a range of alternative color palettes.
• A content width of 620 pixels and ‘Wide’ width of 1280 pixels.

Should you wish – you can also view a more complete list of the spacing, color, and layout presets used by the theme. And remember, the Site Editor’s Styles tools give a wide range of options for customizing the style of your site beyond these defaults.

Support and resources

Get community help with Twenty Twenty-Four in its support forum.

Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing course on Learn.WordPress.org.

Read more about the Twenty Twenty-Four theme in the introduction post.

Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.

Quick Specs

• Requires at least WordPress 5.3.
• Requires at least PHP version 5.6.
• On a 1440px laptop screen, the main column width is up to 1240px wide. The “Wide” block width is also up to 1240px wide, and the “Full” block width extends the entire width of the screen.
• The recommended Featured Image size is 610px wide or larger.
• The recommended size of the logo is at least 300px wide, or at least 100px tall.
• Twenty Twenty-One has one widget area that displays below the site content and above the footer. Each widget takes up one third of the available space, to a maximum of 380px wide.
• Note that Twenty Twenty-One has limited support for Internet Explorer 11.
  

Accessibility features

• Skip to content link
• Semantic HTML with landmarks
• Support for High Contrast mode and Dark Mode
• Support for keyboard navigation

Starter Content

Twenty Twenty-One comes with Starter Content that explains how to use the theme’s block patterns and styles. You can only activate starter content on freshly installed sites that do not have any pages or posts. To activate, please head over to the Customizer and click on Publish.

Full Block Editor Support

Twenty Twenty-One is designed and developed to take full advantage of the creative freedom enabled by the block editor. Extra care has been given to the Columns block so you can create impressive landing pages with intricate blocks layouts. Twenty Twenty-One includes styles for the block editor, so what you see in the editor will almost exactly match the end result.

Block patterns

Large text

Links area

Contact Information

Media & Text article title

Overlapping images

Two Images

Overlapping images and text

Portfolio list

Learn more about block patterns and how to add them

Block styles

Block styles are selected in the block Settings sidebar in the editor.

Social links: In addition to the default styles, you can choose a dark grey icon color.

Separator: In addition to the default styles, you can choose an extra thick separator.

Borders

In Twenty Twenty-One, borders can be added to the following blocks:

• Media & Text
• Latest posts -Styles for borders and dividers
• Image -Styles for borders and frames
• Cover
• Group

Overlapping columns

The columns block has an optional style called overlap, where the content of every second column overlaps the previous:

Color palette

The theme provides several recommended colors that works well with the design of the theme. Select the colors in the background color setting and in the editor. There are also matching gradients.

Black

White

Dark Grey

Grey

Green

Blue

Purple

Red

Orange

Yellow

Custom Background Color

Twenty Twenty includes the option to change your site’s background color.

To change the background color, navigate to Customizer →︎ Colors & Dark Mode.

Add your own custom color, or select a color from the palette.

The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.

Site Logo

Twenty Twenty-One includes a site logo setting which can be used to display the logo of your business or an image of yourself. You can set your site logo by going to Customizer →︎ Site Identity.

The recommended size of the logo is at least 300px wide, or at least 100px tall. The logo is visible in the header and footer.

The logo in the site header is centered. If you want to hide the Site Title and Tagline, the logo is placed to the left of the menu:

Excerpt settings

In the Customizer you will find a panel called Excerpt Settings:

Here you can choose if the blog and archive pages should show the full content or only the summary.
The default is summary. The search result page always shows the summary.
When the summary is selected, only text will be displayed.

Menus

Twenty Twenty-One includes two menu locations:

• A traditional responsive horizontal menu at the very top of the site, which supports dropdown menus.
• A horizontal menu between the widget area and the footer at the bottom of the screen, which only supports one level of navigation.

You can choose a menu location by going to Appearance →︎ Menus, where you can assign a menu to the “Primary Navigation” or the “Footer Navigation”. You can also use both menu locations in combination, if you prefer.

Menu descriptions

The primary navigation menu supports menu descriptions.

To enable menu descriptions, go to Appearance →︎ Menus, and open the Screen Options tab at the top of the page.

Under Show advanced menu properties, check the box for Description:

Add a description by selecting the menu item and filling out the Description textarea. Remember to save your changes.

Add Social Icons

There are two ways to add social icons in your site:

• Use the Social Icons block within the editor.
• Add a link to a social media site to your footer menu.

When you create a social menu, the text label you provide will be hidden, and an icon will be shown in its place. If you’re not familiar with this functionality, please check out the documentation from Twenty Fifteen.

Twenty Twenty-One provides icons for the following social media services:

• 500px
• Amazon
• Bandcamp
• Behance
• Codepen
• DeviantArt
• Dribbble
• Dropbox
• Etsy
• Facebook
• Feed
• Flickr
• Foursquare
• GitHub
• GitLab
• Goodreads
• Google
• Instagram
• Kickstarter
• JSFiddle
• Last.fm
• LinkedIn
• Mail
• Mastodon
• Medium
• Meetup
• Pinterest
• Pocket
• Reddit
• Skype
• Snapchat
• SoundCloud
• Spotify
• Tumblr
• Twitch
• Twitter
• Vimeo
• VK
• WhatsApp
• WordPress
• Yelp
• YouTube

Additional icons can be added following the steps under “Adding icons in Twenty Twenty” at Themes field guide: WordPress 5.5.

Widgets

Twenty Twenty-One comes with support for one widget area, at the very bottom of each page. Each widget column is 33% of the site width, up to 380px.

Post formats

Twenty Twenty-One has support for post formats.
Post formats are selected in the editors Settings sidebar →︎ Post →︎ Status & visibility.

• Standard
• Aside
• Gallery
• Link
• Image
• Quote
• Status
• Video
• Audio
• Chat

Language Support

Twenty Twenty-One includes styles for RTL languages.

The theme uses a native system font stack. This font stack provides support for a large number of languages.

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif

Dark Mode Support

One of the accessibility features of the Twenty Twenty-One theme is support for the visitor’s color scheme preferences in their operating system or browser’s settings. The feature is opt-in and supported in most operating systems, including Android, iOS, OSX, Windows 10, as well as most Linux distributions.

If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences. Depending on their lighting conditions or personal preferences they may choose to switch color schemes using a dedicated button on the bottom-right of their site (or bottom-left for RTL languages).

Enabling Dark Mode from the Customizer

To activate Dark Mode Support, you can go to the Colors & Dark Mode section in your Customizer. If you have a light color selected for the site’s background, you will be able to see and activate the Dark Mode Support setting. The background color you select will be applied to light mode, while Dark Mode colors are optimized automatically. You can use the Dark Mode On/Off button at the bottom of the preview screen to toggle between dark & light schemes in your preview.

Dark Mode in the Editor

The editor will by default respect your operating system’s color scheme settings. If on the front of your site you have chosen a different scheme (using the Dark Mode On/Off button), then the editor will use the preferred scheme.

Block-Based Theme

A version of Twenty Twenty-One is also being built as an experimental block-based theme. You can follow along with development, contribute, and test the theme via GitHub.

Support and Resources

Get community help with Twenty Twenty-One in its support forum.

You can also read the theme’s changelog.

Released: January 16, 2024.

• Revert usage of str_contains() in older bundled themes (#60241)

Version 2.0

Released: November 7, 2023 with WordPress 6.4.

• Move quotation marks inside a Quote block with a custom background color when in the editor (#57377)
• Update default themes to use new script function signature: the last parameter of wp_register_script() and wp_enqueue_script() is an array instead of the boolean true (#59302)
• Use defer loading strategy for theme scripts (#59316)

Version 1.9

Released: August 8, 2023 with WordPress 6.3

• Correct font-weight for b and strong elements in editor styles (#58383)
• Replace the experimental link color theme support (#58702)
• Enable Dark Mode in the block editor iframe (#58835)
• Deprecate the skip link focus fix, removing the script from the wp_print_footer_scripts action (#54421)
• Improve various globals documentation, as per docblock standards (#58684)
• Remove call to load_theme_textdomain() function (#58318)

Version 1.8

Released March 29, 2023 with WordPress 6.2

• Comment missing at the end of HTML tag in author-bio.php (#56476)
• Add Mastodon domains for menu item icons. (#57293)
• Refactor or remove navigation item padding CSS (#53220)
• Disable spellcheck for all password fields for better privacy (#56763)
• Bug in primary-navigation.js (#53331)
• Mark strings for screen readers (#29748)
• Group block styles are breaking the row variation (#56226)
• Correct type in rss_widget_feed_link filter docs (#57594)
• Use the new /documentation/ URLs for HelpHub links in Bundled Themes. (#57726)

Version 1.7

Released November 1, 2022 with WordPress 6.1

• Add blockType suggestions to block patterns (#53647)
• Comment missing at the end of HTML tag (#55724)
• Comment missing at the end of HTML tag in class file (#55725)
• Consider removing .woocommerce class from theme styles (#56366)
• Remove spacer block styles (#56222)
• Separator block is having issue in editor site with background color for default and thick style (#56173)
• heading nested inside cover width discrepancy in Editor (#56050)
• Remove closing PHP tags from bundled themes (#40039)

Version 1.6

Released May 24, 2022 with WordPress 6.0

• Replace GitHub with .org link in Theme URI (#55018)
• Allow editor styles to control block margins (#54250)
• Reverse logic for prefers-reduced-motion media query (#54174)
• Define List item separator as a WP_Locale property (#39733)
• Prevent loading translation file twice (#53589)
• Correct translator comment in twenty_twenty_one_continue_reading_text (#55564)
• Rename parameters that use reserved keywords in bundled themes (#55327)
• Make translator comments referencing the post title consistent (#55564)
• Rename parameters that use reserved keywords in wp-includes/class.wp-styles.php (#55327)
• Update NPM dependencies for default themes (#54727)
• i18n fix for privacy policy section title (#55709)
• Add a missing HTML comment to indicate the end of .post-thumbnail section (#55724)

Version 1.5

Released January 25, 2022

• Image block control button alignment issue while using inside column (#54254)
• Default image alignment in editor (#53809)
• get_attachment_image_attributes_image_attributes not checking if variable isset properly (#54464)
• Add privacy policy link to footer (#53445)
• Dark Mode toggle also appears in bottom left corner (#53892)
• Dark mode in the new Widgets makes impossible to read (#53429)
• Investigate duplicate rules in ie-editor.css (#53605)
• JS Error for Anchors that load custom modals or react hash routes (#53619)
• Missing esc_html__() in functions.php (#54127)
• RSS widget has empty link (feed icon) (#52880)
• Social icons have duplicate height and width values (#54208)
• footer links lack closing span tag (#54209)
• List based widgets need style adjustments in the widget editor (#53629)
• Skip link focus fix is output twice in Twenty Twenty-One if SCRIPT_DEBUG is enabled (#54429)
• Return type not matched in PHPDoc – Bundled Themes (#53878)
• Remove “role” attribute on HTML5 elements with a default landmark role. (#54079)
• Core themes need to display required text field information (#54392)
• Bundled Themes: Add “Tested up to” in style.css (#53797)

Version 1.4

Released July 20, 2021

• Check for navigation element before using it (#52773)
• Display page title as the H1 heading when a static page is selected as the “Posts page” (#52938)
• Update twenty_twenty_one_password_form function to actually use a $post parameter (#53091)
• Improve display of blocks in widget areas (#53422)
• Use the theme version when enqueueing theme assets (#53502)
• Ensure Duotone images are displayed correctly in Dark Mode (#53531)
• Ensure the dropdown arrow displays for <select> elements when focused (#53560)
• Correct customzier typo (#53598)

Version 1.3

Released April 14, 2021

• Update IE specific editor stylesheet (#52981)

Version 1.2

Released March 9, 2021

• Buttons lose contrast consistency in Dark Mode (#51927)
• missing styles for button[type=submit] (#52029)
• Twenty Twenty-One: Clean up CSS build process (#52156)
• style.css has errors in PhpStorm IDE (#52176)
• twenty_twenty_one_get_attachment_image_attributes affects the admin panel (#52212)
• Transparent png logo isn’t visible on focus (#52257)
• Inline images displaying on new lines (as display: block) (#52287)
• fix leftover rtlcss call in build script (#52293)
• Add missing HTML comment for Header tag (#52328)
• Use Yoda condition (#52329)
• Menu button has the wrong colors (#52374)
• Re-add .css.map files (#52377)
• Word wrap missing in comments (#52380)
• correct starter content function docs (#52410)
• list bullets have different styles in the editor and front(#52412)
• Add support for the font size option for the code block (#52431)
• Vertical buttons block has the wrong width (#52432)
• Search block editor styles are broken in 5.7 (#52433)
• Dark Mode toggle is causing JavaScript error in block editor (#52473)
• Typo in style.css – missing var(...) (#52477)
• The color options for social icons does not work with the custom style (#52499)
• Use correct accent marks in the spelling of block pattern alt text (#52500)
• Synchronise ignored files between git and svn (#52502)
• Twenty Twenty-One has unit-less CSS variable unfit for cal() (#52564)
• With WP 5.7 RC2, the text color for the dark background color palette is dark instead of white (#52702)

Version 1.1

Released: December 22, 2020

• Prevent <iframe> embeds from being too narrow. (#52004)
• Allow local anchor links to be used in primary navigation. (#52006)
• Do not specify loading=“eager” for single post thumbnails. (#52139)
• Improve strings found in post navigations for easier translating. (#52047)
• Use consistent HTML comments after closing HTML tags. (#51950)
• Use a more specific and translatable link for Dark Mode instructions. (#52010)
• Make text within code blocks readable in Dark Mode. (#51985)
• Improve styling for striped tables in Dark Mode. (#52129)
• Set a max-width on input fields (#52083)
• Use esc_url() for the WordPress.org link in footer.php. (#51954)
• Only load IE specific polyfills when actually using Internet Explorer. (#52098)
• Correct version format in file-header.scss. (#52044)
• Correct @since inline documentation tags. (#51958)
• Add a PostCSS configuration file. (#52040)
• Fix typos in inline comments. (#52042, #52071)
• Clarify a sentence in readme.txt. (#52120)

Version 1.0

Released: December 8, 2020

Initial Release.

A minimalist block theme designed to take full advantage of full site editing capabilities, Twenty Twenty-Three includes a collection of ten community-submitted style variations. Explore the Styles panel and change the look-and-feel of your site in an instant – bold and bright, or soft and subtle, the choice is yours.

Quick specs

• Requires at least WordPress 6.1.
• Requires at least PHP version 5.6.

Full site editing support

Twenty Twenty-Three is designed to support full site editing’s powerful features, including:

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates used by pages, posts, and other content.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation block, Query Loop block, and more.

Like its predecessor Twenty Twenty-Two, this theme is designed to use WordPress site-editing features instead of the Customizer, which will be hidden by default. The Customizer may be automatically reactivated if you have plugins that require it.

Templates

Twenty Twenty-Three includes several custom templates for you to use:

• Blank: this displays post content without any additional blocks. 
• Blog (Alternative): provides a different way of displaying blog posts, in a list format with the date on the left and the post title on the right.

Block patterns

Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly swapped out with your own. Whether a call-to-action, an event announcement, or a pricing table, patterns can help jump-start the creation of your page or post.

Style variations

Twenty Twenty-Three’s default colour scheme consists of a minimalist black-and-white palette, along with green accents.

Prefer a different look? Visit the Styles area in the Editor and choose from ten additional style variations to instantly switch up the design, including colors and typography.

Design specifications

Twenty Twenty-Three takes advantage of fluid typography presets, so that each piece of text can adapt to any screen size, automatically. The theme also uses fluid spacing presets, to help maintain consistency in the spacing between blocks at all screen sizes. If you’re interested in learning more about the sizes, spacing, and font families in those presets, check out Twenty Twenty-Three’s design specification. 

Support and resources

Get community help with Twenty Twenty-Three in its support forum.

Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing Learn WordPress course.

Read more about the Twenty Twenty-Three theme in the introduction post.