WordPress Tutorial: Category Trick for WP 2.7

A lot has been written about the recent release WordPress 2.7, and I think most WordPress users and developers understand that this release adds some significant features that open up some new options for theme development. I did a little bit of experimenting with one of the changes and I wanted to write a brief tutorial that demonstrates a real-world situation for taking advantage of a new feature.

Styling posts differently according to its category has been possible in the past with WordPress, in fact, I wrote an article several months ago called Enhanced Sidebars with Dynamic Content. That post showed one approach using conditional statements in PHP to enhance the sidebar. With WordPress 2.7 it’s now possible to achieve a similar end result just by using CSS.

What We’re Going to Do:

UPDATE: I’m no longer using this approach on my blog, so you may notice that the examples are no longer relevant.

Instead of focusing on sidebar content like I did in the earlier post, I’m going to show you an easy way to add a brief message at the end of posts in a particular category. There may be a situation with your blog (or one of a client) where you would like to have some type of content at the beginning or end of a post, but only in a specific category. WordPress 2.7 makes this possible because of the new category classes that are added to posts.

Before we get started with the tutorial I’d like to show some potential reasons to use this technique to improve a blog.

1. Add diversity to your blog

Your regular blog readers and visitors will get used to seeing the same design and the same sidebar content, and most of them will tune it out. By adding something to posts in a specific category you can mix things up just enough to catch the attention of some visitors.

2. Make content more relevant and useful to visitors

A lot of times the links in your sidebar or at the bottom of posts may not be very relevant to those who are reading a particular post. With category styling you can add content and navigation that is targeted to specific content, making it easier for visitors to find what interests them.

3. Increase pageviews

One of the results of a more relevant and useful blog is an increase in pageviews per visitor. If you can use category styling to help readers find what they are looking for, they’re liking to stay on your blog longer and visit more pages.

4. Increase subscribers

One of the potential uses of this technique is to add a call for subscriptions on posts from a specific category. Many blogs include a call for subscriptions either before or after posts, but some bloggers choose not to do this because things are a little cleaner and less cluttered without it. But those bloggers may be interested in using a call for subscriptions only on posts in a specific category, such as a “featured posts” category.

5. Monetization

It’s possible that category styling could be used to promote products or services that are more relevant based on the category of the post. We’ll look at some of the possibilities for this in just a minute.

Possible Uses of Category Styling:

Category styling is a neat trick for WordPress developers, but knowing how to do it and applying it in a real-world scenario are two different things. The approach that I’m going to use for this tutorial could be applied for a wide variety of purposes. Here are some of the ways that you could put this tutorial into practice for yourself.

1. Link to a particular page or post that is of interest

Most blogs link to popular posts in their sidebars, but with category-based styling it’s possible to customize the links to point towards posts that are relevant to what the reader is seeing. These links could be in the sidebar or they could be at the bottom of the post, like the approach we’re going to use in this tutorial. Popular posts aren’t the only option here. Take for instance my other blog, DesignM.ag. One of the categories of posts on DesignM.ag is for the community news. Using this technique I could add a brief paragraph to the top of all posts in the news category that encouraged visitors to submit links to the news section, and I could link to the submission page.

2. Promotion of your own services or products

Say you have a design blog and you sell some premium WordPress themes from your site (or from anywhere else for that matter). Most likely you probably write some blog posts about WordPress, maybe tips or tutorials. In this case you could add some content to the beginning or end of the posts in your “WordPress” category that would provide some basic information about your premium themes and link to a page where visitors could buy them. You could do the same thing with any type of product or service. If it’s relevant to a particular category of blog content, the response from readers and visitors should be better.

3. Promote a specific affiliate program

A lot of bloggers attempt to monetize their blog through affiliate products. If you want to include an ad or a link to a product that is relevant to a specific post you could add a section at the end of posts that does just that based on the category of the post.

4. Cross promote another blog

In Enhanced Sidebars with Dynamic Content one of the specific examples that I used placed a sidebar link to my social media blog, Traffikd, when the visitor was seeing a post in the social media category. I could basically do the same thing. With the approach that I’m covering in this post I could add that content at the end of a post rather than in the sidebar and use CSS instead of PHP.

How to Set Up Category-Specific Content in WordPress 2.7

The example that I’m going to walk through in this tutorial will use my blog DesignM.ag. DesignM.ag includes blog posts in various categories, a community news section, and a design gallery. One of the post categories is “Inspiration.” In this category I publish posts that provide various types of design inspiration, and I’m going to assume that visitors who enjoy this type of content might also enjoy visiting the design gallery on the site.

What I’m going to do is set up a brief paragraph that will encourage visitors to browse through the gallery if they are looking for more inspiration. I’m going to use CSS so that this paragraph only shows up on posts in the Inspiration category.

Here is a screenshot of the end result.

DesignM.ag Screenshot

Step 1: Add the div or Paragraph to the single.php File of the Theme

Obviously, the content of the paragraph or div that you use will depend on what you’re trying to accomplish. I’m just adding some simple content shown below.

Looking for More Design Inspiration?
We also have a web design gallery that you may enjoy. Several new websites are featured each week. You can subscribe to our all-inclusive feed if you would like to get updates on gallery submissions, articles, and news items.

Step 2: Make Sure The Theme is Set to Produce the Category-Based Class

Most themes being used will need to have a minor tweak in order to take advantage of the new feature in WordPress 2.7. In the DesignM.ag theme I added the following code to a content div that contains the post:

<?php post_class(); ?>

If your blog is on WordPress 2.7 and you have this code, it will produce a class according to the category of the post. For example, the content div in my theme will have the following code on posts in the Inspiration category:

<div id="content" class="post category-inspiration">

Find a div in your theme that contains the post, and add the code to create the class.

Step 3: Give the Div or Paragraph an ID

In order to style the div I need to give it an ID, so I’m going to call it “gallery-promo”. See the example HTML code from my single.php below.

<div id="gallery-promo"><h5>Looking for More Design Inspiration?</h5>
<p>We also have a <a href="http://designm.ag/category/gallery/">web design gallery</a> that you may enjoy. Several new websites are featured each week. You can subscribe to our <a href="http://feeds.feedburner.com/designmagall">all-inclusive feed</a> if you would like to get updates on gallery submissions, articles, and news items.</p></div>

Step 4: Style the Div or Paragraph to display:none

The first thing we’re going to do is style this paragraph to not be shown. The reason for doing this is that I want to exclude it on every category aside from “Inspiration.” The code used is shown below.

#gallery-promo { display: none; }

Step 5: Style the Paragraph Appropriately for the Inspiration Category

WordPress 2.7 will add the class “category-inspiration” to all posts in the Inspiration category (Obviously, you would replace the word “inspiration” with whatever category you’re working with. So if your category is called “finance”, the class would be “category-finance”). So I want to add the CSS code shown below, which will override the display:none and the paragraph will be shown and styled on posts in the Inspiration category.

.category-inspiration #gallery-promo { display: block; padding: 10px; background-color: #DEDBBE; border: 1px solid #B7B075; }

Here’s a screenshot of the end result in action. You can see it live by visiting 40+ Inspirational Non-Profit Websites.

DesignM.ag Screenshot


I now have a little “teaser” paragraph that shows up at the end of all posts in the Inspiration category that attempts to funnel visitors to the gallery. The paragraph only shows up on Inspiration posts. This technique could easily be used for any number of purposes.

Personally, I wouldn’t use this technique too much because your pages will wind up with a lot of code that’s not being displayed because of the CSS. But for one small div I think it’s a decent way to improve a blog.

If you have any thoughts or suggestions or critiques about this technique, please share in the comments.

If you like getting design inspiration by looking at excellent blog designs, you’ll love our new gallery site Blog Design Heroes.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.