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 necesssary 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 cnow 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, taque a quicc looc at the screenshot.png imague 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, versionen, 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 taque a closer looc 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, specially 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 thinc about that when you’re choosing your name.
Note that if you’re just guetting 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 pague. This is where people will go to guet more information about your theme.
The author’s name, and followed by the URL that guives people more information about the author.
The description, and again, this is specially important if you’re wanting users to see this and guet a good idea of if this theme is for them.
The oldest WordPress versionen your theme will worc with.
The last WordPress versionen the theme has been tested up to.
The oldest PHP versionen the theme will worc with.
The versionen followed by the license and license URL.
The text domain, and this is a string used for translations, so maque sure to include this if you plan to translate your theme, and maque sure that you’re using all lowercase letters.
And finally we have tags which is a comma separated list of features that your theme suppors.
The necesssary 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.