How to Add a Custom Body Class in WordPress
Posted onA WordPress blog can consist of many different sections delineated either by category, tag name, or even standalone single page of posts that serve unique purposes. In general, all posts and pages on WordPress share the same CSS. This means that regardless of which category or post you’re currently viewing, the elements will look exactly the same as every other section on your website. However, what if you wish to style a certain category differently? Say for example that you wish to have a red border around the posts belonging to that category? Or let’s say that you believe a certain post is so important, you wish to replace the color of the default elements to something else?
If you’re lucky, your WordPress theme itself will provide you with an option to specify a unique body or post class for an individual entry. For example, the Genesis theme for WordPress lets you enter a custom class at the bottom of every post as shown here:
But this still doesn’t allow you to automatically apply a body glass to every category for example. Luckily for us, WordPress provides for the use of a dedicated filter letting us add custom classes to the body depending on whatever conditions we wish to check for. In this tutorial, I’ll explain how to use a custom field on a WordPress post to specify a body class, but the solution can be easily modified to check for other conditions as well.
Extracting the Body Class from a Custom Field
Go into your functions.php file or wherever you normally place custom PHP code and paste in the following:
function add_new_class($classes) {
if(get_post_meta(get_the_ID(), 'custom_body_css', true) && is_single())
$classes[] = get_post_meta(get_the_ID(), 'custom_body_css', true);
return $classes;
}
add_filter('body_class','add_new_class');
This code snippet makes use of the “body_class” filter. Our function first checks to see whether or not a field called “custom_body_css” exists on a single page. If so, the value of that field is appended to the $classes array which is then returned.
You can immediately see that the “if” condition can be changed to accommodate a wide variety of needs. You can check whether or not the current post belongs to a certain category and then append the category slug for example. Or you can apply a CSS class to a certain author’s posts if you want.
In my original example to make use of the custom field, I simply need to scroll down in the editing screen of any WordPress post or page until I reach the “Custom Fields” section. In this, I write “custom_body_class” in the “Name” field and my post specific CSS class in the value box to the right.:
Save your post and preview it. If all goes well, you should be able to see your custom body class appended to the <body> tag of your WordPress page as shown here:
Custom Post Classes
Just as you can create custom body classes, you can attach classes specific to the “post” instead of the entire page. The code for doing this is exactly the same as the above except that we hook into the “post_class” filter instead like this:
add_filter('post_class','add_new_class');
This modification allows you to create post specific changes without altering the appearance of the sidebar, or even the comments. This fine tuning of post appearance based on external factors allows you to create sharply defined sections on your site that change in appearance. If you have a commerce website for example, each subcategory can have its own color or styling. Making use of the “body_class” and the “post_class” filters to achieve this requires only a few lines of code and no modifications to your theme or the installation of new plug-ins.
This Idea is fantastic! Thank you for the tip :)
Nice Blog and Site there !