It\u2019s typically best to use the latest default theme. This is because it will be built with the most up-to-date features in mind. Plus, it should already be activated if you\u2019ve recently installed WordPress:<\/p>\n\n\n\n You can also choose any theme from the official Theme Directory<\/a> to learn from, but for the purposes of this guide, it should be a block theme<\/a>. For more information on installing and activating themes, read the Work with themes<\/a> documentation.<\/p>\n\n\n\n If your interests lie in classic WordPress, you should jump forward to the Classic Themes<\/a> chapter for more details on building classic themes.<\/p><\/div><\/div>\n\n\n\n Once you\u2019ve activated a block theme, take some time to simply have fun exploring and tinkering with the available options in the Site Editor<\/a>. Essentially, this is an editable, visual representation of your theme in the WordPress admin.<\/p>\n\n\n\n And, as promised earlier in the Getting Started chapter, you can build your theme entirely from this interface without touching a single line of code.<\/p>\n\n\n\n You can locate the Site Editor via Appearance > Editor <\/strong>in the WordPress admin menu. Once opened, your screen should look similar to this:<\/p>\n\n\n\n There are a lot of pieces to this, and you can find yourself lost for hours just tinkering around in the Site Editor. It can be fun, and you\u2019ll learn more about how this integrates with your theme as you read through this handbook. For now, let\u2019s get to the basics of \u201ccreating\u201d a theme.<\/p>\n\n\n\n This part of the journey can be entirely self-directed, so feel free to do this at your own pace and in your own way. But most people will want to begin by adjusting their design. <\/p>\n\n\n\n You can do this by first selecting the Styles<\/strong> item in the menu panel:<\/p>\n\n\n\n The Twenty Twenty-Four theme (and many other block themes) include pre-designed style variations, which you can see in the sidebar in the above screenshot. You will learn more about these variations in the Global Settings and Styles<\/a> chapter, but feel free to use one as a starting point for your own customizations.<\/p>\n\n\n\n The next step is to select the Style Book<\/strong> icon (it looks like an eye). Opening this screen will give you full access to modifying the global styles of the site:<\/p>\n\n\n\n At this point, the world is your oyster<\/em>\u2014in other words, feel free to let your creativity run wild. But most importantly, get a feel for what settings and styles are available in the interface. This familiarity will come in hand as you dive into more advanced sections of the handbook.<\/p>\n\n\n\n For a deeper dive into using the Style Book, read this guide from the WordPress Developer Blog: The Style Book: a one-stop shop for styling block themes<\/a>.<\/p>\n\n\n\n Once you\u2019ve customized the theme to your liking, be sure to hit the Save<\/strong> button. When you\u2019re ready, you will \u201ccreate\u201d your first theme.<\/p>\n\n\n\n You have two options for doing this. The first is to use the built-in exporter from the Site Editor in WordPress. The second is to use the Create Block Theme<\/a> plugin, which has more extensive options available. There are instructions for both methods below.<\/p>\n\n\n\n To export your theme from the Site Editor interface, click the \u22ee (Options)<\/strong> button in the header area. You will see a dropdown of available options. Click the Export<\/strong> option, as shown below:<\/p>\n\n\n\n This will give you a ZIP file with your complete theme in it. The filename will match that of the theme you were working from. In the case of the default Twenty Twenty-Four theme, it will be Congratulations!<\/em><\/strong> You have now successfully created your first WordPress theme.<\/p>\n\n\n\n You were assured that you could create a theme without touching code. That was the truth. You have built a theme that can be uploaded to any WordPress website just like any other theme.<\/p>\n\n\n\n But there was a fib<\/em>\u2014a harmless white lie\u2014mixed in with that truth about there being no code involved. <\/p>\n\n\n\n The theme you downloaded is still named \u201cTwenty Twenty-Four,\u201d and it\u2019s best to rename it so that it\u2019s representative of what you\u2019ve created. To do this, unzip the Then, open the At the very least, you should adjust those first four lines, particularly the As a final step, zip the file again with whatever utility program you have on your computer for creating ZIP files.<\/p>\n\n\n\n The Create Block Theme<\/a> plugin is an official, first-party plugin that WordPress contributors maintain. Often, you will see new ideas for exporting themes tried and tested here before they land in WordPress.<\/p>\n\n\n\n The plugin is more robust than what you will find in core WordPress, meaning that it has many more options for exporting your theme. This guide will only cover the basics of exporting your theme, but feel free to explore the plugin\u2019s features in more detail.<\/p>\n\n\n\n Once you\u2019ve activated Create Block Theme, you should see a new button in the Site Editor that is displayed as a wrench icon. Click this button to open the Create Block Theme<\/strong> menu.<\/p>\n\n\n\n You will see several options for saving changes, exporting a ZIP, editing theme info, and creating a new theme:<\/p>\n\n\n\n You can use the Export ZIP<\/strong> option to export the theme as you did earlier.<\/p>\n\n\n\n![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-activated.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\nCustomizing your theme<\/h2>\n\n\n\n
![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-editor.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\n![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-styles.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\n![\"Style](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-style-book.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\nExporting your theme<\/h2>\n\n\n\n
Exporting from the Styles interface<\/h3>\n\n\n\n
![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-export.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\ntwentytwentyfour.zip<\/code>.<\/p>\n\n\n\ntwentytwentyfour.zip<\/code> folder and rename it to your-theme-name<\/code>. <\/p>\n\n\n\nstyle.css<\/code> file within that folder. You should see something like this at the top of the file:<\/p>\n\n\n\n\/*\nTheme Name: Twenty Twenty-Four\nTheme URI: https:\/\/wordpress.org\/themes\/twentytwentyfour\/\nAuthor: the WordPress team\nAuthor URI: https:\/\/wordpress.org\n...<\/code><\/pre>\n\n\n\nTheme Name<\/code> value. And that\u2019s all the code you really<\/em> have to touch.<\/p>\n\n\n\nUsing the Create Block Theme plugin<\/h3>\n\n\n\n
![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-create-block-theme-menu.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\n
![\"WordPress](\"https:\/\/i0.wp.com\/developer.wordpress.org\/files\/2023\/11\/tt4-create-block-theme-customize.jpg?resize=2048%2C1064&ssl=1\")
<\/a><\/figure>\n\n\n\n