Let’s talk about WordPress body classes! But first, an explanation of what this is. This is the first short post, from what I hope will end up being several short posts, called “Quick Tips”. It can take me weeks to write a “normal” sized post on RachieVee, and so, in an effort to keep myself active in 2019, and still pass on tidbits of knowledge, I’ve started this new category. I have also categorized these “Quick Tip” posts based on developer experience. This first post is geared towards “Beginners”. This level is meant for developers just getting to know how WordPress themes work.
What are WordPress body classes?
Back on topic! WordPress body classes are exactly what they sound like. They are HTML classes applied to the body tag of a WordPress site. WordPress themes use the body_class() function to apply these classes auto-magically.
If you’ve ever had an error show up on the front-end of your site, or if you’re looking to change something in a WordPress theme – taking a glance at these classes are a quick way to orient yourself. While these classes won’t tell you exactly what template to look for in a WordPress theme (unless it’s a custom page template), they can provide a clue about where you are in the WordPress template hierarchy.
Not sure what the WordPress template hierarchy is? I’ve linked to it above. It’s a flowchart of how WordPress decides what template file to display on the front-end, based on the type of content. It also differs depending on the theme.
There are only three required files for a WordPress theme: functions.php, style.css and index.php. Any other file aside from these required three, are for additional functionality and/or styling in a theme. The more template files that exist in a WordPress theme, the harder it can be to narrow down bugs or alter anything for those is still getting comfortable in said themes. Here is where the body classes can help.
Examples
Let’s review an example of how body classes can be useful. Let’s say you are viewing a category archive on a website. A real example we could use is from my site’s category: Accessibility Series. When inspecting the page using your developer tools, here is what the body classes will look like:
<body class="archive category category-accessibility-series category-69 logged-in admin-bar customize-support">
The body classes above tell us it’s an archive page with archive as a class. It also tells us what category is displaying with category-accessibility-series. If you’re tinkering around a standard theme from the WordPress theme directory, I would expect the template file we’re looking for to be category.php. However it can also be archive.php or category-69.php as well. By using the body classes as our first clue, we can follow the trail of the template hierarchy until we find the correct template.
Let’s look at another example, this one not on RachieVee. The example below is based on viewing a “contact page” that uses a custom page template. The body classes look something like this:
<body class="page-template page-template-page-contact-us page-template-page-contact-us-php page page-id-53 group-blog">
This is a case where WordPress tells us the template to go to from the body classes. This usually happens whenever we’re viewing a page that has a template assigned to it. The first class is page-template and following that, it says page-template-page-contact-us. Further down the line, we’ll get the post type, which is a page, and the post id as well.
What I am looking for is the latter half of the page-template-page-contact-us class, the page-contact-us part. This part of the class is created based on the file name of the template. Therefore, the first place I’d go looking, is a template file called page-contact-us.php. Once I’ve discovered the correct template, then I can make edits or troubleshoot.
Quick Review
That is all for my first quick tip! We’ve briefly gone over what WordPress body classes are, and how they can help us orient ourselves in a WordPress theme. The template hierarchy is the flowchart WordPress follows when it decides what template to display on the front-end. We can use these classes to give us clues, and we can follow the trail within the template hierarchy to track down a template file.
While I only gave two small examples, keep in mind that WordPress classes can tell us a lot more. They often tell us what post type we’re viewing, what post id a post is, even the category or taxonomy id. With practice, you’ll get used to checking these classes. Eventually you’ll memorize them to the point where you won’t need to reference the template hierarchy anymore when looking for template files.
I hope this quick tip was useful! Since this was the first, if you have any feedback on the format and content, I’d love to hear it. I’m always open to learning. Thanks for reading.
*Featured image credit by Mike Cohen at creditscoregeek.com
Be First to Comment