{"id":277160,"date":"2019-11-15T09:36:26","date_gmt":"2019-11-15T08:36:26","guid":{"rendered":"https:\/\/www.elmastudio.de\/?p=277160"},"modified":"2020-12-28T05:43:03","modified_gmt":"2020-12-28T04:43:03","slug":"introducing-the-new-default-wordpress-theme-twenty-twenty","status":"publish","type":"post","link":"https:\/\/www.elmastudio.de\/en\/introducing-the-new-default-wordpress-theme-twenty-twenty\/","title":{"rendered":"Introducing the New Default WordPress Theme Twenty Twenty"},"content":{"rendered":"

WordPress 5.3<\/a> is here including the new Twenty Twenty<\/a> default theme. It\u2019s an exciting WordPress release because it\u2019s including a number of new default block features and general improvements to the editor experience. I will write more about the new features in WordPress 5.3 in a separate post, for now let\u2019s have a look at the new theme.<\/p>\n

Twenty Twenty is a fork of Anders Nor\u00e9ns\u2019 free theme Chaplin<\/a>. Anders was also lead of the design team for Twenty Twenty. I like that the theme was designed by a member of the WordPress community. Forking an already existing free theme with theme designer himself to lead the design team for the new default theme is a first for WordPress as far as I know. The result is more polished since it builds on work already put into the original theme, considering the short time frame available for the Twenty Twenty design team.<\/p>\n

Now let\u2019s dive into the theme features and customization options of Twenty Twenty:<\/p>\n

Twenty Twenty and Gutenberg blocks?<\/h3>\n

It seems like the main focus for this theme was to seamlessly integrate with the WordPress default blocks, creating an editing experience in the new editor that is smooth and natural. I think the theme has accomplished this. All default blocks look polished in the editor and on the frontend. Personally, I think writing posts gets more exciting with this new default theme. You can create multi column content areas, include quotes, pull quotes or image galleries.<\/p>\n

\"\"
Pullquote in Twenty Twenty.<\/figcaption><\/figure>\n
\"\"
3-column block with image, paragraph and button blocks.<\/figcaption><\/figure>\n

In my opinion, the theme is not yet ready for creating more complex page layouts, e.g. for business websites, but this was also not necessarily the main focus for Twenty Twenty. As we move forward with the new editor, maybe next year\u2019s default theme will have options for more design and complexity.<\/p>\n

I wanted to see how well our Aino blocks<\/a> will work with Twenty Twenty and I was pleasantly surprised with how well this works. I also played around with other block plugins and I would love to hear of your experience on how well other blocks work in the new theme.<\/p>\n

\"\"
The Aino Hero block in Twenty Twenty.<\/figcaption><\/figure>\n

Page Templates (Default, Full Width, Cover)<\/h3>\n

One of Twenty Twenty\u2019s features are the Pages Templates, which are available on pages and posts. <\/p>\n

\n\"\"\n<\/div>\n

You have the default<\/strong> post and page template with a desktop content with of 580 pixels. If you include a Featured Image in the Default template, the Featured Image is visible below the title. The header background color is used for the background above the fold. Everything below will be in the background color (or background image).<\/p>\n

The Full Width<\/strong> template works as the default template, the only difference is the default content width switches to 1200 pixels.<\/p>\n

I found it difficult to hide the page title if you want to create your own page layouts not showing the page title, since the theme does not offer an \u201cempty canvas\u201d style template. You would need to work with custom CSS to achieve that.<\/p>\n

The Cover<\/strong> template uses the post or page Featured Image as a header background image. There is a default overlay color with opacity visible, which can be changed or deleted in the Customizer.<\/p>\n

Customizer Options<\/h3>\n

Twenty Twenty offers a number of straightforward options in the Customizer. One nice feature I discovered is the Retina logo option<\/strong> under \u201cSite Identity\u201d<\/strong>. This makes it easy to include Retina-ready logo images to the header.<\/p>\n

The color options<\/strong> are standard – with a main background color, the header and footer color (I would have loved to see them separated) and the Primary color.<\/p>\n

\"\"
The Twenty Twenty Color Options in the Customizer.<\/figcaption><\/figure>\n

When testing the theme, I thought that it would have been helpful to see the explanation of what the primary color actually does from the beginning, not only when clicking on \u201cCustom\u201d<\/strong>. The Primary color changes the link color, button and the default Cover block overlay color.<\/p>\n

Under Theme Options<\/strong>, you can hide the search form and choose between excerpt and full length posts, which are both much needed options. <\/p>\n

The next Customizer Tab is the Cover Template<\/strong> settings, which is the most unique feature of Twenty Twenty. <\/p>\n

\"\"
The Cover Template options in the Customizer.<\/figcaption><\/figure>\n

Here you can choose to have the Featured image in a fixed-positioned so that it doesn\u2019t scroll with the page, but instead an overlap effect is created. You can also choose the overlay background and text color as well as the opacity level.<\/p>\n

The next Customizer option \u201cBackground Image\u201d<\/strong> can be unclear for beginners, since it might be confused with the Cover Template background image (which is the post or page Featured Image).<\/p>\n

The Background Image option is instead used for the entire background of the website and it is visible on every page. In my opinion, it would have been better to only show the Background image on the front page, making it possible to create a background pattern for the front page. Showing the background image on every page and post it is a bit overwhelming for website users.<\/p>\n

Available Menus<\/h3>\n

Since the header navigation area can not yet be built with Gutenberg, you choose your menu positions in the Customizer under Menus \/ Menu Locations<\/strong>. Twenty Twenty offers a Social Links menu, which is visible in the open mobile menu and at the top right corner of the footer.<\/p>\n

The top-level only (sub level menu items are not visible) Footer menu is positioned at the top left of the Footer area. It\u2019s interesting that the theme uses two options for the main menu on desktop screens and one extra menu for mobile screens. I like the flexibility to choose my menus separately, although this might be a difficult option to understand for beginners.<\/p>\n

Footer Options<\/h3>\n

As mentioned above, the Footer menu and Social menu are visible on the top of the footer area. Twenty Twenty also comes with two footer widget areas. I personally like the Back To Top button in the footer, which is a helpful feature especially if you have long pages and\/or posts.<\/p>\n

\"\"
The Twenty Twenty Footer.<\/figcaption><\/figure>\n

Image Sizes<\/h3>\n

Twenty Twenty uses a Featured Image width of 1200 pixels. The Cover image size is 1980 pixels. If you include bigger images, the correct image sizes will be generated and used by the theme. You just need to make sure that you don\u2019t include smaller images for Featured and Cover Images, otherwise your images will not look sharp. <\/p>\n

Conclusion<\/h4>\n

I hope you enjoyed this walkthrough of the options and features the Twenty Twenty theme offers. Do you like the design of the theme? Which are your favourite features and which options do you think are missing? Do you think Twenty Twenty is a blog theme or would you also consider using it for a portfolio or business website? I would love to hear your thoughts so feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"

WordPress 5.3 is here including the new Twenty Twenty default theme. It\u2019s an exciting WordPress release because it\u2019s including a number of new default block features and general improvements to the editor experience. I will write more about the new features in WordPress 5.3 in a separate post, for now let\u2019s have a look at […]<\/p>\n","protected":false},"author":1,"featured_media":277406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[940,910],"tags":[1905,1729,1904,1052,913],"class_list":["post-277160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes-en","category-wordpress-en","tag-default-theme","tag-review","tag-twenty-twenty","tag-wordpress-en-2","tag-wordpress-theme-en"],"_links":{"self":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/277160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=277160"}],"version-history":[{"count":0,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/277160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media\/277406"}],"wp:attachment":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=277160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=277160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=277160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}