Take the Twenty Twenty-Four theme to the next level.

Twenty Twenty-Four is a beautiful multipurpose WordPress theme. And together with the Twentig plugin and its designer-made website templates, you can build stunning sites with ease.

An “Import complete” modal shown on top of a website created with a template for the WordPress Twenty Twenty-Four theme.

Supercharge the Twenty Twenty-Four theme.

Instead of designing from scratch, you can easily import a pre-made and customizable website. Explore our starter sites for the Twenty Twenty-Four theme.

Plus, Twentig enhances Twenty Twenty-Four with block patterns, enhanced blocks, and portfolio tools, making it simple to build a professional website.

A selection of WordPress website templates designed for the Twenty Twenty-Four theme that you can import with Twentig.

About Twenty Twenty-Four.

Twenty Twenty-Four is a great WordPress block theme fully compatible with all the site editor tools. Thanks to its flexibility and minimalist design, it’s a solid starting point to create any type of website.

This theme was designed by Beatriz Fialho and developed by WordPress contributors led by Maggie Cabrera and Jessica Lyschik.

Download Twenty Twenty-Four
View Twenty Twenty-Four demo
The official screenshot of Twenty Twenty-Four, the new WordPress default theme.

Tutorials for the WordPress Twenty Twenty-Four theme.

You don’t need to code to customize your theme. However, if you want to personalize it even more, here are some customization tips.

How to set the favicon with the Twenty Twenty-Four theme?

The favicon, also known as the site icon, appears in browser tabs, bookmark bars, and search results. To change the favicon with the Twenty Twenty-Four theme, you have two options.

Option 1: You have a logo inside your site’s header

By default, the image used for your logo is also set as your site’s favicon. To use a custom icon, follow these steps:

  1. Select the Site Logo block and click the Settings icon to open the Settings sidebar.
  2. Click the Site Icon settings link that opens the WordPress Customizer.
  3. In the Site Icon section, click the Select site icon button and upload or choose an image from your media library.
  4. Click the Publish button to save your changes.

Option 2: You don’t have a logo inside your site’s header

If you aren’t using the Site Logo block, you can access the Site Icon settings directly from the WordPress Customizer. Follow these steps:

  1. Visit example.com/wp-admin/customize.php?autofocus[section]=title_tagline, replacing example.com with your own domain name.
  2. In the Site Icon section, click the Select site icon button and upload or choose an image from your media library.
  3. Click the Publish button to save your changes.

How to add custom CSS to the Twenty Twenty-Four theme?

You can use the WordPress editor to add custom CSS and make style customizations to your site. To do so, follow this step-by-step guide:

  1. Inside your WordPress dashboard, go to Appearance > Editor.
  2. Click Styles in the Design menu.
  3. Click the Edit styles icon.
  4. Click the More icon in the top-right corner of the Styles panel.
  5. Select Additional CSS.
  6. Add your CSS code in the Additional CSS box.
  7. Once done, click the Save button.
A close-up of the WordPress Styles section, showing how to access the Additional CSS panel by clicking on the more button.

How to add a background image to my website?

For the Twenty Twenty-Four theme, you can add custom CSS to set a global background image on your site. First, upload your background image in the Media Library and copy its URL. Next, paste the following code in the Additional CSS box:

body {
    background-image: url("IMAGE_URL");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Finally, replace IMAGE_URL with your background image URL. You can also modify the other background properties as you want.

How to make a sticky header with the Twenty Twenty-Four theme?

The easiest way to stick your header throughout your entire website is to add the following custom CSS in the Additional CSS box:

header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0);
    z-index: 10;
}

How to create a child theme for Twenty Twenty-Four?

You may use a child theme to make advanced customizations that aren’t possible to achieve with the WordPress editor. With it you can override the theme.json file, write PHP functions, or add JavaScript code. You can download our Twenty Twenty-Four child theme to get you started.

Start building your website with Twentig. It’s easy and free.

Get started