With the release of WordPress 5.3, it’s time for a new WordPress.org theme.
And this time it’s a beauty.
I’ve taken a closer look at the Twenty Twenty theme so that you can see if it’s right for your website.
Read this article in German: Unter der Lupe: Das WordPress Theme Twenty Twenty
Twenty Twenty Setup
If you have a brand new installation of WordPress you can install some starter content for Twenty Twenty.
Select Twenty Twenty as your theme in Appearance > Themes if it is not your active theme. Then go to Appearance > Customize and you should see a page layout with a heading, “The New UMoMA Opens its Doors”.
If you like what you see, hit the Publish button – highlighted in the screenshot – and this content will be added as your home page.
Additionally you get three pages thrown in for free:
- Blog (with the “Hello world” post)
You also get some menus and widgets – keep reading to find out more about these.
There’s a Twenty Twenty demo site if you want a closer look.
If you are switching from another theme to Twenty Twenty, you won’t be able to use the starter content but you can preview the theme in the Customizer first.
Twenty Twenty Design
Twenty Twenty has been designed by Swedish designer/developer Anders Norén, based on his Chaplin theme.
There’s a fascinating story about the genesis of Twenty Twenty (in Swedish); use a translation service if that’s not your native language!) I’d like to think the theme was dreamed up in Scotland, as that’s where Anders was holidaying when he got commissioned to do the design.
The theme has some nice stylistic touches. For example, rather than the horizontal rule being a straight line, it’s a broken line with two slashes in the middle.
Fallback fonts are apple-system, BlinkMacSystemFont, Helvetica Neue and Helvetica.
The body text uses the Hoefler Text serif font. Garamond and Times New Roman are fallback fonts.
Due to a bug with Chrome, where the Hoefler Text font shows incorrect spacing, the theme has a font family overwrite, NonBreakingSpaceOverride.
Twenty Twenty has 5 possible menu locations. They are:
- Desktop Horizontal Menu
- Desktop Expanded Menu
- Mobile Menu
- Footer Menu
- Social Menu
The first two are different options for desktop.
The Desktop Horizontal Menu is a traditional horizontal navigation bar.
The Desktop Expanded Menu has a similar icon to the Mobile Menu – three dots with “Menu” adjacent.
If you like, you could even enable both desktop menus! The demo content actually does this.
Toggling the demo content’s Desktop Expanded Menu reveals the menu on the right of the page:
The Mobile Menu will default to whatever you’ve chosen for the Desktop Horizontal Menu or Desktop Expanded Menu.
If you prefer, you can set a different menu for Mobile Menu from the desktop choices, and that’s the one your users will see on a mobile device.
Personally, I’d think twice before using a different mobile menu, though. Inconsistency across devices could be confusing.
The Footer Menu shows below your content, but above your widgets, so it may not appear where you expect if you have many footer widgets! If you’re on a mobile device, the menu items stack vertically instead of horizontally.
The Social Menu shows on the right hand side opposite the Footer Menu, or on the left if you have no Footer Menu.
The Social Menu is built in the same way as for the other recent “Twenty” themes. Create a menu, add Custom Links to it, set the Display location to Social Menu, and save it.
If you installed the demo content, your Social menu will look like this:
You can amend the icon links or delete any you don’t want.
Customizer Options for Twenty Twenty theme
Here are some of the main Customizer options for Twenty Twenty. Some of them are very similar to Chaplin’s Customizer settings.
Here you can add a logo, set the Site Title and Tagline, and upload a Site Icon (favicon).
The suggested image dimensions for the logo are 120 by 90 pixels, which is a small rectangle.
Here’s a logo that size:
With the logo, there’s the option to use a Retina version:
Scales the logo to half its uploaded size, making it sharp on high-res screens.
Here’s how the logo appears across different devices.
You can change the following colours from the theme’s choices.
Background Colour: change from the light gold colour #f5efe0 which shows on post and page content.
Header and Footer Colour: change from white.
Cleverly, if you pick dark colours, the text becomes light! I really love this feature.
Primary Color: this is the accent colour, used for links, buttons and featured images. It is set to a red #cd2653.
You don’t quite get a free choice of colours when you alter the primary colour. For example, I changed the primary colour using the slider to yellow. The actual colour generated for links was a yellowish brown.
There’s currently a bug that prevents you reverting to Twenty Twenty’s default colours after you’ve saved a change, so be sure you are happy with your colour changes before publishing.
Show Search in Header is turned on, but you can turn it off if you prefer.
I prefer to have posts show the Summary (not full post) on Archive pages. This option was lacking in some of the earlier “Twenty” themes, like Twenty Seventeen, so it’s great to have it here.
The Cover Template is a page template which uses either a solid colour or a background image with overlay.
If you set a featured image on a Cover template page, it will be partially visible as the background.
Fixed Background Image: if you use a featured image and this box is checked, the user will see a parallax effect on the image when they scroll.
Overlay Text Color: white to begin with; you can change to a colour of your choice.
Overlay Background Color: starts as the accent colour, but you can change this too.
Overlay Opacity: alter the opacity with a slider. Its original value is 0.8, which is 80% opaque.
Here’s an example of the cover template with a background. This was the image I uploaded initially:
And here is the finished cover template:
You can set a background image for the page and alter how it displays.
Here are some examples.
Obviously the image I’ve picked, with a dark background, isn’t a good one for being able to read the dark text.
Unlike the cover template, there isn’t an opacity control for the background image which would make it lighter. So choose carefully!
Here you can set the homepage as your blog page, or have a static front page. This is identical to the option in Settings > Reading.
Theme Layout and Widgets
The Twenty Twenty theme works best with the Block Editor, which supports full width content. Therefore it doesn’t have a sidebar.
Instead there are two widget areas – Footer #1 and Footer #2.
On desktop, Footer #1 widgets appear on the left and Footer #2 widgets appear on the right, in columns. On mobile, they stack in one column.
The demo content has two text widgets.
Twenty Twenty has 3 page templates.
Default template has a maximum width of 58 rem = 580 px.
The content on the Cover template has the same width as the default template.
Full width template has a maximum width of 120 rem = 1200px.
Featured images for posts display at a maximum width of 120 rem = 1200px. There is no maximum height; that depends on the height of your image.
In fact Twenty Twenty’s documentation says the recommended featured image size is 1980px wide by 1485px high.
If you prefer to have a full width image shown, you may be better doing one of the following:
- Add an image block and set to full width (posts or pages)
- Use the Cover template (pages only)
Like its predecessors, Twenty Twenty is an accessibility-ready theme.
What accessible features does it have?
- The HTML of the theme is well constructed.
- A “Skip to the content” link to bypass the menu is present for anyone reliant on the keyboard.
- All menu items are accessible via the keyboard.
- The theme uses SVG icons. Examples are the search, edit and the social media icons. Where appropriate they are hidden from screen readers.
- There is a “To the top” link at the bottom of the page, to go back up quickly.
- The colour contrast between the default red text and white background is 5.25: 1, which meets the WCAG 2.1 contrast requirement at AA level. The contrast between the light gold background and red link text is 4.57: 1, which is also adequate.
- Links have underlines.
- The theme contains ARIA to enhance the experience for screen reader users, but it is only present where necessary.
- In general, keyboard focus is managed well. When the expanded menu is open, the focus cycles round the menu items until one is selected or the menu is closed. On a button with focus, the text is underlined as well as having a dotted outline.
Some features that you might want to be cautious about using if you want an accessible site are:
- The options to change colours. Watch that your chosen colour scheme has a high enough contrast.
- The Cover template parallax scroll. Parallax scrolling can make some people feel sick.
- The Cover template overlay opacity. There’s a nice little reminder here: “Make sure that the contrast is high enough so that the text is readable.”
Twenty Twenty and the Block Editor
To get the most out of Twenty Twenty, you need to be using the Block Editor. (Sorry, Classic Editor fans.)
For a more WYSIWYG experience, the Block Editor uses the same font and colours as specified in the theme:
If you change the background colour, it changes in the editor, too!
Twenty Twenty can make good use of the different image alignments the Block Editor supports.
You can also try the Circle Mask style, new to the Image block in WordPress 5.3. This is not unique to Twenty Twenty – it is available for any theme where you use the Block Editor.
Another way to learn about layouts for Twenty Twenty is by studying the demo home page in the Block Editor.
In particular, you can see Group blocks in action. Below the image, heading and button blocks in these Column blocks are all part of the same group. By grouping blocks in this way, it’s easy to duplicate the group for reuse.
Here is a page layout I built in Twenty Twenty theme, using the Full width template:
I think the Twenty Twenty theme is the most beautiful default theme to date.
You could use it for a variety of sites including personal portfolios, blogs and business.
My main caution about adopting Twenty Twenty right now is that because it is so new, it still has some bugs that need to be ironed out.
Apart from that, I’d like to congratulate the team on the job they’ve done with this theme. Well done!
What do you think of WordPress’ Twenty Twenty theme? Let me know in the comment section below.