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
Thanks for the fix, I had tried a few different things and nothing worked.
Not quite sure I understand how you will be using this. Do you mean to say that on your multi-country site, if you have a post for country X, you will use this code to make the whole post look differently, or it will affect just an element on the post?
I really don’t know the difference between classes, divs, etc. I’m trying to create a custom box look that I can insert anywhere and wonder if that is definited in a class or something else?
Liz – With the body class you can style pieces of different pages differently. For example, I could set the h2 headers to look one way on one page and a different way on the about page. This plugin, however, does even more – it adds additional body classes so I can style single posts that are within a specific category differently that single posts within another category (as an example.)