Twenty Twenty Two: First WordPress Default Block Theme


Exploring the most recent WordPress default theme

Twenty Twenty Two is the brand new default theme coming with WordPress 5.9, and the primary block theme. Practically yearly since 2010, a brand new default theme is launched with WordPress. This yr’s theme has been designed to be versatile so that you just get exactly the customization you anticipate. With Twenty Twenty Two, you may make use of the brand new Full Web site Enhancing options, comparable to international types, and configure your theme in new methods.

On this submit, we’ll stroll by the most recent options of Twenty Twenty Two and allow you to customise the appear and feel of your website.

First have a look at Twenty Twenty Two

Twenty Twenty Two preview. Picture Supply WordPress Information

Whereas theme developer, Kjell Reigstad, was closely impressed by bird-watching, you’ll be able to shortly change photographs with distinctive content material. With almost 70 completely different block patterns to select from, you can begin with varied layouts and insert your personal content material.

Twenty Twenty Two lets you change fonts, picture results, style-specific blocks, and extra. These new settings create are a drastically completely different approach to customise web sites.

Putting in Twenty Twenty Two

Default themes are named as such as a result of when a brand new WordPress set up occurs, the latest default theme can be robotically put in and activated. Take into account that new WordPress customers will now expertise block themes as their first theme configuration course of, and will have expectations for different themes to work equally.

It’s nonetheless an excellent observe to put in Twenty Twenty Two, even if in case you have no want of switching themes at the moment. It gives you a spot to observe utilizing the brand new options of Full Web site Enhancing.

Go to Look > Themes > Add new and seek for Twenty Twenty Two, or obtain it from the Theme repository.

Install Twenty Twenty Two by going to Appearance > Themes > Add New

Configuring the theme

Let’s stroll by establishing your website. Begin by going to Look > Editor. 


From right here, you possibly can configure your Types.

Right here, you possibly can change your font types, colours, and format choices.

Appearance > Editor > Twenty Twenty Two Styles

Record View

Regulate the blocks you employ. Add, insert, transfer, or delete blocks on this dwelling web page format.

Appearance > Editor > Twenty Twenty Two List View


Subsequent, we’ll configure the templates. These are a approach to modify layouts utilizing the block editor. From right here, you possibly can modify what you see on Single Posts, comparable to eradicating the remark block.

Appearance > Editor > Toggle Navigation > Templates in Twenty Twenty Two

You can too reset layouts again to the default from right here.

Twenty Twenty Two templates > Single post > clear customizations

Template Components

Template elements are fairly much like templates. These are smaller elements comparable to headers and footers.

Appearance > Editor > Toggle Navigation > Template Parts

Creating Content material

Now that you just’ve configured your website, you’re prepared so as to add content material to your website. From right here, you possibly can proceed to entry these many block patterns. Return to your Dashboard to entry posts, pages, and extra.

Introduction to making a Little one Theme

Would you like a code choice to customise the styling in your website? Like overriding different WordPress themes, utilizing a youngster theme is the easiest way to override code. When your theme updates, your youngster theme code will stay.

See the developer documentation for a deeper dive into theme.json. Let’s check out the Twenty Twenty Two theme.json file:

	"model": 2,
	"settings": {},
	"types": {},
	"customTemplates": {},
	"templateParts": {}

Inside every of those are additional types accessible to you. For instance, within the types space, Twenty Twenty Two makes use of:

	"settings": {
		"appearanceTools": true,
		"shade": {
		"duotone": [
				"colors": [
	"slug": "foreground-and-background",
	"title": "Foreground and background"

As with basic youngster themes, you’ll must add this with a fashion.css file containing your header data like this:

Theme Title: Twenty Twenty-Two Little one
Theme URI:
Creator: Your title
Creator URI:
Description: Twenty Twenty Two Little one Theme
Requires at the very least: 5.8
Examined as much as: 5.9
Requires PHP: 5.6
Model: 0.1
License: GNU Basic Public License v2 or later
License URI:
Textual content Area: twentytwentytwo-child
Template: twentytwentytwo
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns

Twenty Twenty-Two Little one WordPress Theme, (C) 2021
Twenty Twenty-Two Little one is distributed beneath the phrases of the GNU GPL.

Zip fashion.css and theme.json information collectively and add to your observe website.


Twenty Twenty Two, and Block themes on the whole, are a giant departure from basic themes. New WordPress websites will now default to utilizing Block-based themes. It’s value testing these options on observe web sites and exploring creating block youngster themes.




Please enter your comment!
Please enter your name here