Twenty Twenty

by the WordPress team

Twenty Twenty is the new WordPress default theme. 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.

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.

Quick Specs (all measurements in pixels):

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

Full Block Editor Support

The block editor in Twenty Twenty

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.

Twenty Twenty supports a Site Logo, which works great as an avatar for a personal blog or for your business logo or icon. To modify it on your site, do the following:

  1. Open My Site → Customize and click on the Site Identity section.
  2. Click the Add logo button to open the Media Manager.
  3. Upload a new image, or select one that’s already in your Media Library.
  4. Click Set as logo and you’ll see your logo appear in the preview.
  5. Click the Publish button on top to save your changes.

Twenty Twenty gives your featured images a bold treatment on posts and pages:


The recommended Featured Image size is 1980px wide by 1485px 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

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.

Widgets

Twenty Twenty includes two widget areas below the site’s content, in the footer. The maximum column width is 570px

On screens wider than 700px, these widgets are automatically displayed in two columns.

Add Social Icons

Twenty Twenty includes a Social Icons Menu; can add links to your social media profiles, and they’ll be displayed as logos in your footer.

To do this, you’ll first need to create a Social Links Menu.

Then, tell your site where to put that menu:

  1. Head to Customize → Menu.
  2. Select the Menu Locations panel.
  3. Assign the menu you’ve created to the Social Links Location.
  4. Click the Publish button on top to save your changes.

Twenty Twenty’s Social Icons Menu includes icons for:

  • 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

Keywords

design, blog, writer, creative, lifestyle, portfolio

This theme is available for download to be used on your WordPress self-hosted installation.

Download
Have a question about this theme?Pick this design and start a site with us, we can help!