Target CSS for Specific Content With WordPress Template Tags
One of the things I love about WordPress is its flexibility. You can use it to run a simple blog, as a high powered content management system, or to drive custom applications.
Within theme development, one aspect that gives you lots of flexibility is the use of template tags. These will dynamically fetch data and let you output content in a way that works for your design.
In this post I’m going to focus on two very specific template tags: the
post_class() tags. I’ll show you how WordPress uses these to dynamically generate CSS classes in your site, and how you can use those to style your blog or website.
Specifically, I’ll show you how to use these classes to style content from different categories, adding specific colours, text effects or layout styling to each. This way, you can give the different sections of your site a different look and you can also jazz up your archive pages, giving different categories their own styling so users can immediately find the kind of content they’re looking for.
What You’ll Need
To follow along with this post, you’ll need the following:
- A development installation of WordPress (don’t do any of this on your live site until you’re completely happy with the results).
- Your own theme, or a child theme of a third party theme. Don’t directly edit a third party theme as when that’s later updated, all your changes will be lost.
- A code editor.
Identifying and Using the Template Tags
First, let’s take a look at the template tags. These should be present in every theme – if they aren’t in yours, make sure you add them!
The body_class() Template Tag
The first template tag is the
body_class() template tag. This goes in your theme’s header.php file, with the opening of the
You code it like this:
Once you’ve done that, you’ll find that WordPress outputs a range of classes for the
body element in each page in your site, depending on the type of content being displayed and the template file being used.
Here’s the generated code for the home page of my website:
Let’s take a look at what each of those classes tells us:
- home: this is the home page of the site.
- page-template: it uses a page template because it’s a static page.
- page-template-page-full-width: the template the page is using.
- page-template-page-full-width.php: the full name of the template file being used.
- page: the content type. If my home page was the main blog page, this would be different.
- page-id-7: the ID of this specific page.
And here’s the code that’s generated for a category archive page:
This tells us a few different things:
- archive: this is an archive page rather than a single post or page.
- category: it’s a category archive.
- category-basics: the specific category archive being displayed.
- category-154: the ID of this category.
You might already be imagining the type of content you could use this to target using those CSS classes:
- an individual post or page
- a specific category archive
- the home page
- all category archives, or all archives for a given custom taxonomy.
But before we move on to doing that, let’s take a look at the second of our template tags.
The post_class() Template Tag
This next template tag is used in the loop. So if you have multiple files for the loop in your theme (either multiple include files or multiple loops coded within your template files), you’ll need to add it to each of them.
You normally add it with the opening of the
<article> element which will contain your post:
Note that I’ve added two things to my article element here: not only the
post_class() tag, but also an ID using the post ID. As we’ll see, that value is then generated as both a class and an ID for the element.
Let’s take a look at how this is output on the home page:
We have a few classes we can work with here:
- post-7: the post ID
- page: the post type. The home page of my site is a static page.
- type-page: another way of showing the post type
- status-publish: this page is published (not draft or scheduled)
- has-post-thumbnail: this page has a post thumbnail (not something you’d always see but I’ve added featured images to my pages in this site).
- hentry: a class that’s used to style posts in RSS feeds.
Now let’s take a look at our category archive:
This gives us a whole bunch of output classes. Let’s take a look at them.
- post-2522: the post ID.
- post: the post type.
- type-post: the post type again.
- status-publish: this post has been published.
- format-standard: the post format for this post.
- has-post-thumbnail: this post has a thumbnail, or featured image. Particularly useful for styling archive pages in which you want to include featured images, so those posts that don’t have them can be adjusted.
- hentry: for RSS.
- category-basics, category-roundups: the categories that this post features in.
- tag-admin etc.: the tags for this post.
I recommend taking some time to explore your own site and take a look at the output classes. It’s not just single posts and archives that have these – you could use these to target your 404 or search pages, for example.
This gives us plenty of flexibility for styling individual posts, either on their own page or in archives. Let’s move on to look at a way of doing this.
Using body_class() and post_class() For Styling
Now you know how these template tags are coded and what they do, let’s move on to see how we can use them.
I’m going to show you an example that gives a different color to different categories, and uses that to style the posts and the category archives. This is one of the most common uses of these tags that I’ve seen, although another popular one is for giving sticky posts their own styling.
You do all this in the stylesheet of your theme, so if you’re using a third party theme, don’t forget to create a child theme. You’ll also need to adapt my code to target the specific categories in your own site, whether you choose to use the ID or the slug (more of which shortly).
You’ll notice that this uses blue post titles in line with the styling of my site’s header and sidebars. This is the styling I use for any general archive pages.
Here’s the CSS that styles it:
Styling Using the body_class Tag
Straightforward enough. But you’ll notice from that screenshot that there are four main categories linked to in the sidebar, and that each has its own color. I want to use this to style the category archives for each of those four categories.
Here’s the styling for the basics category:
How do we know what I’m targeting with that styling? You can tell this by the fact that I use the
.category-basics class before the
#content ID. So I’m targeting the
category-basics class that’s output with the body tag by the
body_class() template tag.
Note: I’ve used the class that includes the slug of the category. If you have multiple users on your site and think they might change the slug, use the category ID class instead.
Here’s the resulting archive page:
You can see that it uses the category color for the post titles, the border below each post, and the background to the category description.
I’ve also added similar styling for the three other catgeories:
This gives me three more colours. Green for essentials:
Red for ultimate:
And finally, yellow for applications:
That looks great. But let’s take a look at the
post_class() tag, and how you can use that to take things further.
Styling Using the post_class Tag
Right now, my site only has color co-ordinated styling on the category archive pages. But I could also add styling that targets individual posts in the main blog page and uses color to highlight which category they belong to.
To do this, I add the following to my stylesheet:
And here’s the effect it has on my blog page:
I could also add styling to the bottom border of each post if I wanted, or even give the posts a background color for their category. You’re only limited by your imagination (and the boundaries of good design).
Targeting The Body and Post Classes Gives You More Design Control
This technique gives you more control over the way you style your site. If you have clear categories that separate different sections of your site (such as for departments of your business or sections of your store), you can use this to create a different look or brand for each section of your site. If you take it far enough, it could even save you using a Multisite network with separate sites for each division in your company.Tags: