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

Conclusion:

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.

49 Responses

Comments are now closed on this post.

  • Angie Bowen, January 4, 2009

    Great tutorial, thanks so much! There are so many new options with WP 2.7 and I haven’t even started looking into them yet. I need to get my butt in gear and this will be very helpful.

  • Ross, January 4, 2009

    Great tutorial, was needing to do something like this on one of my sites. So glad WordPress continues to add great functionality for developers.

  • joyoge designers' bookmark, January 4, 2009

    very useful tutorial thank you so much..

  • Eddie, January 5, 2009

    Thanks for the tip.

    Is this method better than using the php include calls?

  • Max, January 5, 2009

    Really nice tip, i think ill try to implement this some time. i love dynamic content! haha

  • Vandelay Design, January 5, 2009

    Eddie,
    It’s not necessarily better, but for a simple addition like a small div, personally I’d prefer using just CSS as opposed to PHP.

  • TJ Mapes, January 5, 2009

    What do you recommend as far as a plugin when it comes to user submitted news like you have on there?

  • Vandelay Design, January 5, 2009

    TJ,
    The only plugin I use related to the news is the advanced category excluder to exclude the news and gallery from the rss feed. to put the news items in the sidebar I just use PHP. I guess I’m also using CForms II to submit the forms. I know some people are using TDO Mini Forms (http://thedeadone.net/software/tdo-mini-forms-wordpress-plugin/) to allow users to submit news items, which is something I’ll look into when I have some time.

  • Erik Pettersson, January 5, 2009

    This is great for inspiration to improvement. But just as you write, this is not a perfect approach. Google (and other search engines) can get really suspicious when you try to hide content with CSS (or JavaScript).

  • Vandelay Design, January 5, 2009

    Erik,
    Yeah, that’s one of the down sides to this approach in my opinion. I’m not an SEO expert, but I would think that a small paragraph wouldn’t cause problems, but I could be wrong. Personally, I’m not sure I’ll keep the paragraph on DesignM.ag, it was more of an experimental thing for me to learn some WordPress tricks.

    Thanks for the comment. That’s one of the reasons I asked for feedback and critiques, I wanted to see what others thought.

  • Matt Rossi, January 6, 2009

    Great tutorial! Can’t believe it is this easy in 2.7 heh

    It is things like this that make you think “why didn’t they think of that earlier?”

  • Stephen Cronin, January 6, 2009

    With Respect Steven, this is going to be one of the very few times I disagree with you.

    I think that it’s better to keep the page clean and add the paragraph (via PHP) only if the post is actually in that category. Not only is that better semantically, it’s scalable (ie it’s even worse if you have blurbs for 7 different categories, with 6 of them hidden).

    I wrote a little custom WordPress plugin that allows me to add blurbs for posts in each category. I’ve been planning to clean it up and release it – I guess I should get back to it and finish it off!

  • Vandelay Design, January 6, 2009

    Hi Stephen,
    Thanks for the comment. I was looking for some feedback because I’m not sold on the practicality of this approach either. For me this was more about learning some things that are possible with WP, and maybe there are better ways to use these techniques.

    I wouldn’t use it for lots of different categories (like you mentioned) because of cluttering up the code with lots of excess. But I try to stay away from plugins whenever possible, so I don’t think it’s a bad approach for just making an adjustment to one category.

  • bandisusi, January 7, 2009

    Hi…this is tutorial that I look for. It is very usefull to me. Thank you so much.

  • Dajat, January 9, 2009

    Good guideline, thank you!

  • Richh, January 13, 2009

    It’s a good example of one of the new features, but I don’t think it’s a good use of this functionality at all mate, I think it may confuse some newer wordpress users into taking on this as bad practice. Sorry, maybe I’m just getting the wrong end of the stick?

    I’d go down the route of using conditional if statements for achieving something like this, along the lines of

    Show this text Show his instead

    Rather than cluttering up your generated HTML – as you said yourself :)

  • Richh, January 13, 2009

    Ah, looks like the php tags in that last comment got stripped out :)

  • Vandely Design, January 13, 2009

    Richh,
    Like you said, it’s a good example of new features in WP 2.7. That was my primary intent in this experimentation. That said, I am pretty much in agreement with you at this point. The more I think about it, the less I like this approach in reality. I don’t think it’s the worst thing, but it’s not ideal either.

  • LinessaSay, January 30, 2009

    Thank you very much for this useful article and the comments. I love this site as it contains good materials.

  • Rudi, February 3, 2009

    Great tips. I will consider to use them on my blog.

  • jaxrogue, July 14, 2009

    I’ve got WP 2.7 using the Arras theme. I’ve been having category and navigation issues. This may help me.

  • SEO Tips for Blogger, August 26, 2009

    very nice article
    thanks

  • San Diego insurance, May 18, 2010

    No words! Btw all these tricks work on WordPress 2.9 too?