I’ve been working on a project where there are five sections for individual countries and each section has specific styling.
I was able to set the styling via css for the pages based on the page id and for categories based on the name of the category. I ran into a problem on the single post page, however, because there wasn’t a body class that could be used for single posts that are within a specific category. A single post has it’s post id but a client isn’t going to add each post id to the style sheet and that would be a ridiculous way to manage this.
For example, if I wanted separate headers on my home page, on the About page and on the WordPress Themes category page I could add the following in my CSS file.
.home #header {background-image: url("/images/header1.jpg");
.page-id-2 #header {background-image: url("/images/header2.jpg");
.category-wordpress-themes #header {background-image: url("/images/header3.jpg");
By viewing the source on the specific page you can look for the body tag and see the classes that can be used. For example, this is on my WordPress Themes category page.
<body class="archive category category-wordpress-themes category-641 logged-in">
which is how I knew that I could use category-wordpress-themes as a class on the CSS file.
But, say I want the single posts within the WordPress Themes category to have the same style as the WordPress Themes category page. The body tag has the following classes but there is nothing I can use to match it with the category. Well, like I mentioned, I could use .postid-13518 but that would be extremely inefficient and would need to be done for every single post in that category.
<body class="single single-post postid-13518 single-format-standard logged-in">
If you are smarter than I am, you could write your own function, but I located a plugin, Ambrosite Body Class Enhanced, that adds 5 extra body classes. One of these adds the category to the body tag on the single post page. So after installing and activating it, the following is what I now have in the body tag on the single post page.
<body class="single single-post postid-13518 single-format-standard logged-in postname-new-features-in-the-wordpress-twenty-twelve-theme-available-now single-wordpress-themes">
This allows me to use .single-wordpress-themes #header to have the single posts in that category match the Category page for WordPress Themes.
This is the only way I’ve used the classes the plugin adds so far but I’m sure it’s going to end up being super useful on certain projects.
Do you think this is something you would use and that would help with your WordPress projects.
photo credit: usembassymanila
The post Add Extra Classes to the Body Tag in WordPress with the Ambrosite Body Class Enhanced Plugin appeared first on (Anti) Social Development.
