{"id":83720,"date":"2020-11-16T09:40:38","date_gmt":"2020-11-16T17:40:38","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2023-09-11T22:29:21","modified_gmt":"2023-09-11T20:29:21","slug":"twenty-twenty-one-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/blog\/twenty-twenty-one-theme\/","title":{"rendered":"Twenty Twenty-One: A Deep Dive into the New Default WordPress Theme"},"content":{"rendered":"

Twenty Twenty-One is the new WordPress default theme coming with WordPress 5.6. If you are waiting for a fully featured WordPress theme<\/a> you may be a little disappointed.<\/p>\n

Twenty Twenty-One is a minimalist theme that looks and acts as a highly customizable blank canvas. Like its predecessors, the new default theme will mostly rely on the Block Editor<\/a> for page building.<\/p>\n

In this post, we’ll go through the most interesting features of the Twenty Twenty-One theme and we’ll show you how to customize the look and feel of a WordPress website with a simple Twenty Twenty-One child theme.<\/p>\n

Ready? Let’s dive in!<\/p>\n

<\/div><\/kinsta-auto-toc>\n
\"Twenty
Twenty Twenty-One theme preview (Image source: Make WordPress Core<\/a>)<\/figcaption><\/figure>\n

A First Look at Twenty Twenty-One WordPress Theme<\/h2>\n

Like Twenty Twenty<\/a>, the new default theme coming with WordPress 5.6 isn’t built from scratch, but it’s based on a theme coming from the community.<\/p>\n

Twenty Twenty-One has been developed upon a new Automattic’s theme, the Seedlet<\/a> theme, which provides a clean and well-ordered structure of nested CSS custom properties. Due to the large usage of CSS properties<\/a> in the theme’s stylesheet, building child themes upon Twenty Twenty-One is quick and easy.<\/p>\n

\"Seedlet
Seedlet WordPress theme<\/figcaption><\/figure>\n

Twenty Twenty-One is a highly accessible, minimalist WordPress theme with a single column layout, a footer sidebar, and two menu locations<\/a>: Primary navigation and Footer navigation.<\/p>\n

The new theme uses a system font stack<\/a>. This should have several benefits for both users and developers<\/a>:<\/p>\n