Welcome to this lesson where we’ll explore the main stylesheet file for WordPress themes.
With this lesson, you will:
- create the style.css file header to configure data about the theme,
- describe the list of header fields available within a theme’s style.css file, and
- add the necessary header field to designate the parent theme’s folder in a child theme.
Creating the style.css file header to configure data about the theme
The style.css file is a stylesheet required for every WordPress theme. The file’s header comment section is used to let WordPress and users know about the theme.
In a code editor, we can view the header for the style.css file of the default WordPress Twenty Twenty-Four theme. While you’re still in your code editor, take a quick look at the screenshot.png image file. Let’s now switch over to our WordPress dashboard.
Once in the WordPress dashboard, go to Appearance > Themes, then go into the Theme Details. Within the theme details we can see the screenshot on the left and the information from the style.css file header on the right. We also see the theme name, version, author, author’s URL, description, and finally we have a list of tags.
Header fields available within a theme’s style.css file
Let’s take a closer look now at the different fields that are available to us within the theme’s style.css file. For this demonstration, we’ll use the main stylesheet file for the default WordPress theme 2024. We’ll go through the fields that they’ve included in the stylesheet.
Starting with the theme name, note that this needs to be unique, especially if you plan to submit your theme to the official WordPress directory. The theme name, as we saw in WordPress, is seen by users, so think about that when you’re choosing your name.
Note that if you’re just getting started with theme development, you can stop after adding the theme name. That is all you really need.
The remaining optional fields:
The theme URI, and that is the URL of a public web page. This is where people will go to get more information about your theme.
The author’s name, and followed by the URL that gives people more information about the author.
The description, and again, this is especially important if you’re wanting users to see this and get a good idea of if this theme is for them.
The oldest WordPress version your theme will work with.
The last WordPress version the theme has been tested up to.
The oldest PHP version the theme will work with.
The version followed by the license and license URL.
The text domain, and this is a string used for translations, so make sure to include this if you plan to translate your theme, and make sure that you’re using all lowercase letters.
And finally we have tags which is a comma separated list of features that your theme supports.
The necessary header field to designate the parent theme’s folder within a child theme
Creating child themes is actually a more advanced topic for theme developers, however it does deserve a brief mention here. It’s important to understand that your child theme not only inherits your parent theme’s functions, filters, templates, and so on, but it will both extend and override its parent theme.
Now that connection between the child and parent theme is created by adding the header field template to the style.css file of the child theme. Here’s an example of a child theme created for the Twenty Twenty-Four theme.