Theme structure

Welcome to this lesson where we’ll explore the structure of a WordPress theme.

Folders and files used in a WordPress theme

Within the assets folder, you’ll find fonts, images, CSS and JS files. Within the parts folder, you’ll find HTML files for things like the header and the footer. Within patterns, you’ll find PHP files for components you can build to save users time when they’re building their pages and posts. Within styles, you’ll find JSON files, which offer the user variations on their sites global styles. And finally, within templates, you’ll find HTML files for generating pages and posts.

Required and optional files needed for a block theme

Required

The two necessary files are style.css and index.html. The style.css file is the main style sheet and is required for configuring theme data, such as name and description, and it’s also handy for adding custom CSS.

The other required file needs to be in the templates folder and it is index.html. It is the default fallback template and it’s necessary for WordPress to consider this a block theme.

Optional

The functions.php file is automatically loaded by WordPress after the theme is initialized and this is a good place to run your custom PHP. Next we have the readme.txt file and it’s not used directly by WordPress but is a required file when you submit your theme to the official WordPress theme directory and it also provides theme information to your users.

Next we have the screenshot file and it is recommended to use a dimension of 1200 by 900. It’s an image of your theme. It’s used to display your theme when people navigate within the WordPress admin. They go to appearance themes, then they’ll see the screenshot there and it’s also used within the WordPress theme directory if you choose to submit it there and the file format can either be PNG or JPEG.

The last file we’ll look at is theme.json and it is your site’s configuration file for mainly settings and styles that integrate with the user interface. We’ll be taking a very close look at this particular file later in the module.

Standard folders used with a block theme

There are four standard folders. These are the standard ones that WordPress has designated for specific features.

Starting off with the templates folder, these are HTML files and they represent the overall document structure of the front end and they are essentially templates made up of block markup. We’ll be taking a deeper dive into the contents of these files later in this module.

Next there’s the styles folder which are JSON files and each one of these represents a different style variation. Users can pick the colors and fonts, adjust the different look and feel that they want for their website. We’ll discuss these in more detail within the intermediate theme developer learning pathway.

Next there’s patterns which are reusable components and they’re made up of one or more blocks that users can insert within the site editor. Note that WordPress will automatically register files included in this folder. Patterns are also covered in much more detail within the intermediate theme developer learning pathway.

The last folder is the parts folder. These are smaller sections that can be included within top level templates. This includes things like headers, footers, sidebars.