WordPress.org
Get WordPress
WordPress.org

Documentation

Twenty Twenty

In this article

Back to top

Twenty Twenty is the new default theme for WordPress Version 5.3. It is designed with the flexibility of the block editor at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media to create dynamic layouts that show off your services or products. If you want to use it for a traditional blog, the centered content column and considered typography makes it perfect for that as well. 

The Twenty Twenty screenshot

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.

The block editor in Twenty Twenty

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.

The Cover Template in Twenty Twenty
The Cover Template in Twenty Twenty

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

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.

Was this article helpful? How could it be improved?

First published

Last updated