This article is a localized edition of the Japanese original. Read the Japanese original
Twenty Twenty-Four is the official default theme released alongside WordPress 6.4, and it is built as a block theme. Instead of the old "Customizer," you edit everything from the header, colors, and fonts to page templates in "Appearance" → "Editor" (the Site Editor). This article covers the first settings to make after activation, how to use style variations and patterns, editing templates, adjusting fonts for Japanese-language sites, and how to manage your changes safely.
Features of Twenty Twenty-Four
Twenty Twenty-Four is designed around three use cases: "business," "personal blog and writing," and "portfolio," and it ships with many patterns (pre-built combinations of blocks) suited to each. Just by arranging patterns, you can quickly build the layout of a front page or a services page.
On the other hand, because it is a block theme, people used to classic themes may find some things confusing.
- "Appearance" → "Customize" is generally not shown (things like Additional CSS are edited from the Site Editor)
- There are no dedicated Widgets or Menus screens; you edit them as blocks in the header and footer
- Your changes are saved in the database, not in theme files
Note that as of October 2026, its successor Twenty Twenty-Five has also been released as a default theme. Twenty Twenty-Four can still be downloaded and updated from WordPress.org, and the way you work with it is the same as with other block themes.
Installation and Activation
A fresh install of WordPress 6.4 or later may already include Twenty Twenty-Four. If it doesn't, go to "Appearance" → "Themes" → "Add New Theme," search for "Twenty Twenty-Four," install it, and activate it. With WP-CLI:
wp theme install twentytwentyfour --activateIf you are switching the theme on an existing site, take a backup first. When you switch from a classic theme, content you placed in widgets, your menu placement, theme-specific shortcodes, and so on will not display as is. For a production site, it is safest to check the display on a staging environment before switching.
Site Editor Basics
After activating, open "Appearance" → "Editor." On the left you will see items such as Navigation, Styles, Pages, Templates, and Patterns (the labels and order may change between WordPress versions).
- Styles: Set site-wide colors, typography, spacing, and so on
- Templates: Edit the template for each page type, such as single posts, pages, and archives
- Patterns: Manage template parts such as the header and footer, as well as your own patterns
- Navigation: Manage the menu items placed in the header and elsewhere
At first, working in the order "set the overall look in Styles → tidy up the header and footer → build the front page" keeps rework to a minimum.
Set the Overall Design with Styles
When you open "Styles," the style variations included with Twenty Twenty-Four are listed. A variation switches a combination of color palette and fonts all at once. Click one and it is applied to the whole site; if you don't like it, you can switch back to another.
After choosing a variation, if you want finer changes, adjust "Typography," "Colors," "Layout," and so on from the style editing screen. Values changed here apply site-wide, so setting them here first, rather than setting colors or font sizes directly on individual blocks, keeps the site consistent later on.
Tidy Up the Header, Footer, and Navigation
The header and footer are managed as "template parts." If you open the header from the list of template parts under "Patterns," you can see it is made of blocks such as Site Logo, Site Title, and Navigation.
You build menu items by selecting the Navigation block and adding and reordering links to pages. In the initial state, it may be set to show a list of pages automatically, which makes the menu grow on its own every time you add a page. Adding only the pages you want to show, by hand, makes it easier to manage.
The footer contains things such as the Twenty Twenty-Four credit line. You can delete or edit unneeded parts just like any other block.
Edit the Front Page and Templates
In "Settings" → "Reading," choose whether your homepage shows your latest posts or a static page. This changes which template is used for the front page.
- If it shows your latest posts: the template for the blog home is used
- If it shows a static page: the template for that page, or the front page template, is used
If you want to build out the front page, the quickest way is to open the template, delete the blocks you don't need, and then add Twenty Twenty-Four patterns from the "Patterns" tab of the block inserter. Once inserted, a pattern becomes an ordinary group of blocks, so you replace the text and images with your own.
Editing a template affects the whole site. For example, changing the "Single Posts" template changes how every post is displayed. If you want a different layout for one specific post only, add a new template and select it in that post's editing screen.
Adjusting Fonts for Japanese-Language Sites
The fonts bundled with Twenty Twenty-Four are for Latin script and do not include Japanese characters. Japanese text is rendered with whatever fonts are on the visitor's device, so it can look different from device to device, and the Latin and Japanese text can look mismatched.
If this bothers you, override the font settings in a child theme's theme.json. A child theme can be made with the following two files.
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/Save the above as style.css, and put a theme.json in the same folder.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Japanese Sans",
"slug": "ja-sans",
"fontFamily": "\"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Noto Sans JP\", Meiryo, sans-serif"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--ja-sans)"
}
}
}A child theme's theme.json is layered on top of the parent theme's settings, so you only need to write the parts you want to change. However, fontFamilies replaces the whole array, so if you want to keep the parent theme's fonts as options, copy the parent theme's definitions and add to them.
One more caveat: when you change the font in the Site Editor's "Styles," that change is saved in the database and takes precedence over theme.json. If editing the file doesn't change the display, check the Styles screen for leftover manual changes.
Saving and Reverting Changes
Templates and styles edited in the Site Editor are saved in the database, not in theme files. That means your edits are not lost when the theme is updated. Conversely, keep in mind that even if a theme update improves a template, the improvement is not applied to templates you have edited yourself.
To revert an edited template, select it in the template list and use the option to reset its customizations. From the Site Editor's menu, you can also export the whole theme, including your edits, as a zip. Exporting before a major rework keeps a copy of the previous state on hand.
Summary
- Twenty Twenty-Four is a block theme, and you configure it in the Site Editor under "Appearance" → "Editor." It has many use-case patterns, so you can build a front page quickly
- Decide the overall colors and fonts with style variations and style editing, and keep direct settings on individual blocks to a minimum
- The bundled fonts are for Latin script, so on Japanese-language sites, set the fonts in a child theme's
theme.json. Note that changes made on the Styles screen take precedence - Edits are saved in the database, so before major changes, make sure you can roll back with a backup and an export
Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)