Skip navigation

Using WordPress Categories To Style Posts

WordPress ThemesBy Abhijit Nadgouda

UPDATED 2010: See below

One of the reasons WordPress fits so many bills is its flexibility. It lets you do things at a much lesser cost, not necessarily money, but time and effort too, as compared to others. This article is about styling WordPress posts differently using the categories they are classified under.

Why Categories?

Categories are the metadata, they give you information about the post. This metadata can be from multiple aspects, e.g., using the category open source to convey that the post is on that subject or using the category feature to indicate that this is a researched feature as against a random post.

The categories contribute to the reason why WordPress suitable for so many non-blog web sites.

You can make this metadata more visible by styling the posts differently by categories – like a different background color or different icons or bigger font size.

The Wrong Way

Of course, you know the categories, you have the post and you have the if-else PHP command using which you can create different HTML code as per categories. It is quite easy to know if a post is classified in a specific category using in_category($category_id).

Everything is available and it is very tempting to use this. The only problem is that this can cause performance problems in future. Everytime an if-else is executed, processor cycles are spent in taking the decision. This can escalate to a severe performance problem if the number of categories increase.

The Right Way

So here is the solution I prefer. WordPress lets us control the styles purely in CSS, and the connector between the HTML code and the styles is the corresponding CSS class or ID. For example, consider the markup

<div class="post">

Here the CSS class post defines what styles will be applied to the post. I have omitted other code from typical templates to keep the space clean.

The best way to leverage this is to use the WordPress category slugs as CSS classes or IDs, and define styling for them in the CSS. Getting the category as slugs, and not as links, is not directly supported in WordPress today. But it is extremely easy to do so. You can put the following code in your theme, preferably in functions.php, so that it is available to all templates in the theme.

function the_category_unlinked($separator = ' ') {
    $categories = (array) get_the_category();
    
    $thelist = '';
    foreach($categories as $category) {    // concate
        $thelist .= $separator . $category->category_nicename;
    }
    
    echo $thelist;
}

The corresponding index.php can look like

<div class="post<?php the_category_unlinked(' '); ?>">

This will create the following HTML code for a post classified in categories with slugs opensource and feature:

<div class="post opensource feature">

And now the styles defined in the CSS classes post, opensource and feature will be applied to that post. The corresponding CSS code can look like:

.post {
    padding: 5px
}
.opensource {
    background-color: #f0f0f0;
}
.feature {
    font-size: 1.1em;
    background-image: url(images/feature.png) no-repeat top right;
}

This thing to remember here is that the styles are applied in a cascading manner, so you have to be careful in duplicating the styles. For example, if you set the background-color for CSS class feature, it will override the one set in the class opensource.

Conclusion

You can go ahead and use the other metadata like author name and define corresponding CSS classes in your stylesheet. You can find excellent code for this in the Sandbox theme, in functions.php as a function called sandbox_post_class($print = true).

I have been using this technique for quite some time. If you do remember this, then you can leverage this to the fullest extent to visually style posts differently.


Abhijit Nadgouda is a software engineer who wants to use software to solve problems and contribute to the software development world. Blogging is the medium of his choice for developing and conveying his thoughts.


Updated Information on Using WordPress Categories to Style Posts

WordPress has changed a lot since this article was written by my friend, Abhijit Nadgouda, as part of the anniversary of this blog. Here is some updated information to help you make this process easier.

There are a variety of ways to style posts by categories. Let’s focus on the two most easily implemented.

To Style the Post Content Area Only

To style the post content area by a specific category, use the post_class function.

In the WordPress Theme template file for the index.php, single.php, home.php, category,php, archive.php, and all template files which display posts, change the post DIV to:

<div id="post-<?php the_ID(); ?>" <?php="php" post_class();="post_class();">

An example of the results would be:

<div id="post-87" class="post-87 post type-post hentry category-road-food tag-food-on-the-road tag-healthy-eating"> 

Add the appropriate stylesheet classes to the stylesheet for styling the post by category.

.category-road-food {
	/* styles for all posts within the road food category */
	}

Another challenge is which style to choose when a post is in multiple categories. DigWP has a good option in “Include the Category ID via post_class” which only lists the first category.

To Style the Entire Post With a Specific Category

Sometimes the design must encompass the entire page, not just the post content area. Since WordPress 2.7, the ability to style any type of post from the BODY tag down has been built-in with the body_class template tag. If not in your WordPress Theme’s header.php, you can replace the BODY tag with the following:

<body <?php body_class(); ?>>

However, this is not the answer to style a post within a category.

If you wish to customize the Category Template Files, then this is the answer. In a perfect world, this template tag would include the categories the post is in. It doesn’t. It only includes the categories when a category template is used. If you wish to style the posts within a specific category, you need to take a few more steps.

To add category IDs in the body_class for posts, add the following to the functions.php of your WordPress Theme.

// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

The results would be:

<body class="logged-in single single-post postid-180 cat-1085-id"> 

The CSS for cat-1085-id would be:

.cat-1085-id {
	/* styles for all posts within the category with the 1085 ID number */
	}

Style by Category Nicename: If you don’t want to style by category ID number, which can be odd looking, you can use this version which styles by category nicename in the functions.php:

// category nicename in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Which will create the following for the “road food” category:

<body class="logged-in single single-post postid-114 road-food"> 

And the styles would be:

.road-food {
	/* styles for all posts within the road food category */
	}

If this is just too much for you, you can also use the Ambrosite Body Class Enhanced WordPress Plugin to make life a bit easier.

More Category and Post Styling Resources

Here are more resources for enhancing your WordPress Theme by individual post, category, page, and more styles.

80 Comments

  1. Posted September 6, 2007 at 10:26 am | Permalink

    Excellent. I used a different technique to set up a conditional tag to switch headers via the template files, thus introducing a new header with a new stylesheet on a per category basis. Your technique is much easier, though it does involve changing the core programming files.

    I wonder if there is a hook in there to create a Plugin to put this into the functions.php?

  2. Posted September 6, 2007 at 7:21 pm | Permalink

    We will not need to change the WordPress core files. We will need to change the theme files though. functions.php is usually present in a WordPress theme.

  3. Posted September 6, 2007 at 10:23 pm | Permalink

    I just want to make sure I understand what you’re describing here – are you saying that on a blog home page, we can have posts from different categories appear differently? Or are you talking about styling the category pages themselves, like when you click on a category name?

    If you are referring to different categories on a blog home page, this is so amazing, and I am really excited, since that can be so helpful with sites that have “feature” articles, as you mentioned yourself.

  4. Posted September 6, 2007 at 11:40 pm | Permalink

    Miriam, sorry if the post is creating a confusion.

    “… on a blog home page, we can have posts from different categories appear differently …”

    Yup, it is this one. You can style posts from different categories differently on the blog homepage, or for that matter on any page in the blog. This styling can be global throughout the blog, wherever you use the category slugs as the CSS classes.

    For styling the category pages you can use different category templates.

  5. Posted September 6, 2007 at 11:41 pm | Permalink

    Ah, that’s right. The functions.php comes with the new Default WordPress Theme, so if the user doesn’t have it, they need to get it working in their own Theme…hmmm. Another topic! Hint, hint!

  6. Posted September 6, 2007 at 11:55 pm | Permalink

    Thanks Abhijit – now I’m really excited! That is such an amazing functionality and can be used for so many things…

  7. Posted September 7, 2007 at 2:36 am | Permalink

    Well, here’s a poser for you – how well will this work when WP2.3 goes gold and (aside from the utter tag/cat confusion) will it be easy enough to do this using a tag rather than a category or would the blogger need to employ both categories AND tags (the core tags, not UTW or similar) to use the functionality in this post?

  8. Posted September 7, 2007 at 3:56 am | Permalink

    Lorelle, true, functions.php is one of the things we take for granted.

    Collin, I believe any metadata can be used for this purpose, which includes tags. You only need a way to retrieve the metadata for that post. Currently this code uses the get_the_category function to retrieve the categories. In the newer versions if this changes, we will have to change our code for that, otherwise there should be no problems.

    Whether a blogger should use tags for styling is completely dependent upon him/her, rather completely dependent on how the categories and tags are used. But assuming that there will be a way to retrieve tags for a post, one can use the same technique with them.

  9. Posted September 7, 2007 at 6:26 am | Permalink

    I like this. There is a plugin or widget that does something similar, if I recall correctly. Downside: You have to be dilligent about using categories.

    Missing: I would like to have a template for certain categories that includes not just style (style is handled by the method you describe here) but contents as well. For instance, a particular graphic in a particular location at the top of the post, and a particular bunch of text in the beginning and/or end of the post. I do this now with simple cut and paste, but I’d love to have a WordPress Post Editor that helps me to do this.

  10. Posted September 7, 2007 at 7:50 am | Permalink

    Greg: It will, but it’s a little bit challenging. If there is “space” and the text won’t cover the graphic, then you can put it in your stylesheet based upon the category, if your category template file is set up with category styles.

    Otherwise, you do what I do and keep a text file of the different “badges” I use for different categories of posts and copy and paste them into each post. They are physically within the post content, so the text easily wraps around. It takes seconds, and I control which one goes where.

  11. Posted September 10, 2007 at 10:22 am | Permalink

    figured this solution would be ideal to replace the missing-in-action CategoryIcons plugin :)

    wrap each post in a div with the particular category name as a class; would be better still if the category slug field can be called into a template (http://wordpress.org/support/topic/108241#post-599076)

  12. Posted December 8, 2007 at 2:38 am | Permalink

    I cannot agree that there is a right and a wrong way. I have just tried out both methods – ifelse and css-classes – and both have their advantages and disadvantages. The main point is that – in my eyes – only a combination of both gives you the power to really work with Asides/different categories: If you define an if-else-Block to filter just the categories needed to redefine the structure of your markup, but at the same time add all necessary classes, you can work with a highly optimized usage of processor cycles by at the same time no loss in editing power.

    I wrote an article on that, however, it’s in German. But I think you get the idea through the code-samples. 3 Varianten, Asides in WordPress zu erstellen.

  13. Posted December 13, 2007 at 9:27 am | Permalink

    Hello,

    This is an excellent method for styling the posts. Is it possible to apply corresponding classes to the Category links in my menu?

    Thanks, Gabe

  14. Posted December 13, 2007 at 10:56 am | Permalink

    @Gabe:

    If your WordPress Theme category links have CSS classes on them, anything is possible. The problem is that by default, the parent categories do not have individual classes, and the children categories are grouped under the “children” class. You can find or write a Plugin which might modify the WordPress category template tag to include category-specific ID or classes, or just edit your sidebar.php template file to list the categories manually, which would mean you would have to manually add or delete any category changes.

    If you find an easy method, let me know. For the most part, a cluttered sidebar (or Theme in general) is not very desirable or usable, so I’m not sure how much this would be in demand. Check out the parameters in the wp_list_categories() template tag to see if there’s a way to customize this to meet your needs.

  15. Posted December 13, 2007 at 12:37 pm | Permalink

    Hi Lorelle,

    Thanks for the quick reply.
    I found a great way to make this work.

    In the classes.php file.

    just change the following:

    line 637
    $class = 'cat-item cat-item-'.$category->term_id;
    TO

    $class = 'cat-item link-'.$category->category_nicename;

    Then add classes in your stylesheet for link-category-name.

  16. Posted December 13, 2007 at 4:41 pm | Permalink

    @Gabe:

    Excellent! Thanks.

  17. Posted December 14, 2007 at 1:31 am | Permalink

    Excellent job done here! This write-up will definately be of help to users who have difficulty understanding the different php file that came with wordpress script.

  18. Posted January 2, 2008 at 11:40 am | Permalink

    i do that too. however, i’m new and
    don’t understand why WordPress drops
    the post out of the main frame after
    someone comments…a little assist, please?

    Condi

  19. Posted January 2, 2008 at 12:07 pm | Permalink

    @ Condi:

    I don’t know what you are describing. After you comment, the page reloads. The comment will be visible if the comment has not been moderated or caught as comment spam. If you are using a WordPress Theme that features “frames”, I’d change Themes. Does this happen when you change Themes anyway? It could be a problem with your WordPress Theme.

    Please search for help on the WordPress Support Forums and ask there if you can’t find an answer. They usually have the time to visit your site and investigate.

  20. Posted February 15, 2008 at 12:06 pm | Permalink

    Very cool, thanks! Had a little hiccup with it, didn’t put the “functions.php” code between the php tags in my file at first.
    Nice way for me to mark up my automatic posts from del.icio.us. Now I can show them with a modified background

  21. Posted March 12, 2008 at 8:44 am | Permalink

    I want to style a single category title differently. I did get the above to work, only does this mean that everytime I add a new category I have to make sure I add a style for it in my css? How could I set a “default” style that is always active unless the post is filed under a the selected “styled” category?

  22. Posted March 12, 2008 at 1:12 pm | Permalink

    @ Niles:

    There are a lot of things you can do besides what I have listed here. You can use the Post Templates by Category WordPress Plugin. You could code it yourself using the techniques from Category Templates, Displaying Posts Using a Custom Select Query, Giving different styles to different WordPress categories, Conditional Tags, Sarah And Leo tips for designing their new Theme, and Category dependent post stylization.

  23. Posted April 2, 2008 at 5:21 am | Permalink

    hi guys, is there a way to creating multiple parent categories?

  24. Posted April 2, 2008 at 12:18 pm | Permalink

    @ rex:

    To create categories, use the Categories section in the Write Post Panel or under Manage > Categories. To rearrange how the categories are displayed on your blog, see Linking Posts Pages and Categories in the WordPress Codex.

    Is that what you wanted to know?

  25. Posted June 10, 2008 at 9:17 am | Permalink

    Hello,

    When i add the code to my functions.php file and update my theme files i get an error message,
    why is this happening and how can i fix it?

    thanx

  26. Posted June 10, 2008 at 11:28 am | Permalink

    @ Ali G:

    The code did not appear but these questions are to be directed to the WordPress Support Forums where you will find the help you need.

  27. Posted June 10, 2008 at 1:32 pm | Permalink

    I included a link to a imageshack screenshot i took, for some reason its not in my post now

    “http://img260.imageshack.us/img260/2527/picture1ad1.png”

    is the code in the functions supposed to be wrapped in any php tags? and is it compatible with the latest wordpress version? my functions.php was empty and that was the only code i had in there and it still didnt work

    ill try the support forums too, thank you

  28. Posted October 6, 2008 at 3:08 pm | Permalink

    please delete my previous messages.
    i want to place the content of my index.php so u can tell me where to put the the_category_unlinked line but it doesnt work out.

    sorry for messing up.

    greetz,
    Jonathan

  29. Posted October 6, 2008 at 6:52 pm | Permalink

    @ Jonathan:

    For help on WordPress issues, see the WordPress Support Forum first. To publish code within a WordPress blog post, comments, and in the WordPress Support Forum, see Writing and Publishing Code in Your WordPress Blog Posts. :D

  30. Posted October 6, 2008 at 8:43 pm | Permalink

    Hey Lorelle,

    Ive got the script working! But I would like something more… :)
    The category items are now getting they’re individual classes but it does not automaticly add the right classes to the ‘last post’ links and also not the the Categorie links on the left of the homepage. The ones displayed next to echt post. How can I manage to get that done without adding more classes in my .css file? It would be so nice if there’s a way to let those categorie links use the same class that has been generated for the categorie items on the top-right of my blog.

    Thanx in advance!
    -Jonathan

  31. Posted October 6, 2008 at 10:06 pm | Permalink

    @ Jonathan:

    I don’t understand what you are talking about. You really need to get specific help from the WordPress Support Forum where someone can look at your blog and give you the help you need.

    There is no “automatic” method of labeling the last post links unless you are using a WordPress Plugin. Categories are automatically labeled by classes with their category ID number, but you have to add the classes to your CSS file manually. WordPress does not “automatically” put anything in your WordPress Theme’s stylesheet. You have to do that.

    I assume you need the various styles to style each category name. You have to add that information manually and style it to fit your needs in the stylesheet.

  32. Posted October 27, 2008 at 6:52 pm | Permalink

    Thanks for this, it is really helping get my head around all the WordPress PHP stuff.

  33. neil
    Posted December 25, 2008 at 1:53 am | Permalink

    what if the post appears in more than one category? how would you add a custom style to each post slug?

    • Posted December 26, 2008 at 11:55 am | Permalink

      Using the WordPress Conditional tags to insert the category or custom style you want depending upon which category the post is in. However, are you talking about the post slug or the post title in the URL? Do you want something like example.com/categoryname/post-title/? to be in the URL or actually changing the post slug so it reads example.com/categoryname-post-title?

  34. Toby
    Posted May 4, 2009 at 11:03 am | Permalink

    Thankyou so much for this!

  35. Posted July 7, 2009 at 1:02 pm | Permalink

    Thank you so much for this! I’m using the WP-o-Matic plugin to feed Twitter entries to my blog (I know, it’ll get old soon) and it was posting them twice. With this trick I’m able to put a category slug in the “entrybody” style and specify “display:none” for that to get rid of the duplication without affecting posts in other categories. It’s exactly what I was looking for, and so easy. Thanks again!

  36. freshfleshcz
    Posted August 16, 2009 at 10:15 am | Permalink

    Hi, I’m sorry about my dumb question but believe me, help would be very appreciated.

    I’m one of those tutorial WordPress users, so I have no idea how and why do I have to modify my functions.php file. I give an hour to my google skills but haven’t really found an answer – on the other hand no one here seems to have the similar problem.

    Thanks for your time and tollerance. :) A.

  37. Posted August 18, 2009 at 6:31 pm | Permalink

    Hi Abhijit,

    This solution is fantastic. I am wondering if it is possible to style links in a “Recent Posts” sidebar widget using categories as well? If you’ve already answered this, I would really appreciate you pointing me in the right direction. If not, I look forward to your thoughts!

    Thanks so much!
    Adrienne

  38. Posted November 4, 2009 at 6:28 am | Permalink

    Not really related to this topic but I have been searching on google and found nothing so far. Know of a WP theme that is based on categories? So, on the main page shows (with icons) the recent 3 posts, and the best 3 posts for each category?

    • Posted November 6, 2009 at 1:28 am | Permalink

      All WordPress Themes use categories. I’m not sure what you are looking for. Maybe a Magazine style WordPress Theme?

  39. Posted November 6, 2009 at 6:26 am | Permalink

    Yes a magazine theme, but one that shows off 3 recent and 3 featured posts for each category

    • Posted November 6, 2009 at 6:57 am | Permalink

      There are hundreds to choose from. Good luck with the search. I know it’s tough, but I can’t help you with that. And many are very customizable, so if they have 2 or 4 recent posts and such, you can adjust it.

  40. Posted November 6, 2009 at 7:27 am | Permalink

    I am unable to find even one thats customisable

    • Posted November 17, 2009 at 2:55 pm | Permalink

      All are customizable. Sorry, your search hasn’t turned up something that will work for you. There are thousands of WordPress Themes to choose from and all of them listed in the WordPress Theme Directory are free and open to customization. I can’t keep track of all the various Themes out there, so I can’t recommend any specifics to you.

  41. Posted January 2, 2010 at 1:59 pm | Permalink

    tried using your method, was having trouble and came across this page:

    http://codex.wordpress.org/Function_Reference/get_the_category

  42. Posted January 22, 2010 at 10:19 am | Permalink

    A note if you’re trying to use this function as a parameter of another function like the new body_class() function. I was trying to do this:

    But kept getting malformed output. Simply alter the function to do:

    return $thelist;

    instead of:

    echo $thelist;

    and then you can do the above and have category listings on your body tag. I found this useful in the single.php template file so i can make custom layouts for single posts depending on the category.

  43. Posted January 22, 2010 at 10:25 am | Permalink

    argh, here’s the example of what I was trying to, missing from the above comment:

    body_class(the_category_unlinked());

  44. Posted March 17, 2010 at 6:37 pm | Permalink

    You can do this with any WordPress Theme, as long as post categories have an ID that identifies them accordingly. Thesis should.

  45. cg
    Posted March 29, 2010 at 12:43 am | Permalink

    thank-you so much works perfectly.
    to build on this i have a question:

    is there any way to take this further and actually change the format of the post itself, similar to how you would if you make category-1.php for example.
    i want my feature category posts on the main page to be styled extremely different than all the other posts, to the point where css is no longer capable. is this possible or just wishful thinking?

    thank-you

    • Posted May 7, 2010 at 4:50 pm | Permalink

      You don’t need to use this any more. You can now use custom styles to style any page on your site in any way you want. There are WordPress template tags that create custom category IDs so you can have a different style for category-1 than 2. You can even style by post. For instance, if you want the H2 heading to be different on category-1 (or whatever name it uses) you would have a style for category-1 h2 {whatever styles} and category-2 h2 {other styles} if you wanted. It’s now really easy, though all the styles fit within your single stylesheet. I wanted a totally different stylesheet for a specific category, which is how I came up with this technique, but you don’t have to do that.

  46. Posted July 10, 2010 at 11:32 am | Permalink

    “I wanted a totally different stylesheet for a specific category…”

    I want a totally different theme for a specific category. There is a plugin called themed categories, but I think it doesn’t work with WP 3.0 and the download link is broken.

    Do you know any alternative for this?

    Greetings from Mexico

    • Posted July 10, 2010 at 1:30 pm | Permalink

      Theme? A Theme is a collection of template files and stylesheets to style them all. You can use the same Theme to style every pageview, be it posts, categories, multipost pageviews, author pages, search pages, whatever. It’s the same Theme with a bunch of different looks for any pageview you want.

      If you wish to have a different design for a specific category of posts, you can use this, or one of the newer features with a Theme with custom functions that asks the similar question as above, but instead of posts, it puts a conditional statement in that says “If post is in X category, make it look like this.”

      OR, like many modern WordPress Themes, they automatically generate the category name in their post styles (see the SandBox WordPress Theme as an example), which means you can create post styles based upon that CSS ID for that category. That’s the easiest method which requires no special code other than ensuring the post has the category ID in it’s “body” or “wrapper” styles.

      There are so many ways to do this, but I have to add that if the categories look “too” different, it confuses the visitor and can have a negative impact, as discovered by Vandelay and others, so use this carefully.

  47. Posted July 10, 2010 at 11:27 pm | Permalink

    Thanks for your quick help Lorelle,

    I’m sorry about my english, it is hard for me to explain it but here I go.

    I really need to load different themes for each category. I’m trying to simulate blogs but using a single WP installation.

    I am managing a multi-author magazine which has 16 blogs. Each blog is represented by a category. The whole site has about 50 categories (sections). There is only one editor and he must review all the posts before they get published.

    The thing is that I do not want to install WP 16 times (nor use the wpmu plugin) because not all the collaborators of the magazine want to stylize their section, but the ones who want to do it are asking me too many changes. Also there is no need to worry if the categories change a lot because the blogs are not the main content of the site.

    Maybe you could take a look at the site: http://www.revistareplicante.com

    There are sections that would work better with different themes. I have some podcasts, some traditional blogs, some regular sections, photoblogs, news, some guys want a multicolumn blog, etc.

    I already sent messages to the people who crated and have modified the “themed categories” plugin. I hope they answer.

    Greetings

    • Posted July 11, 2010 at 9:15 pm | Permalink

      I understand your situation. You can use the WordPress 3.0 multi-user version, which would really help things a lot, or use the technique I explained. If they want a lot of customization – honestly, it is your publication, learn to say no. You must control the look and feel of the entire thing, so tell them what they can and cannot do and be done with it. Harsh, but that’s the way of it.

      Your site is also a commercial one, so I recommend you hire a professional who specializes in such site designs instead of playing with Themes and Plugins. It will only get you into a bigger mess. There are some great resources at http://www.codepoet.com/ which can help.

      I’ve been a part of similar publications and there are only two choices. Multi-user version (called a blog network now) or be a dictator. :D Good luck.

    • Posted July 12, 2010 at 12:20 pm | Permalink

      I just found out that WordPress 3.0 now takes the template hierarchy with author.php template files to a new level and automatically creates author ID based template files. For example, if I had an account with you, my author ID name would be “Lorelle” thus WordPress will support author-lorelle.php and that template file could be totally customized to look like anything you wanted. This deals with the issue of creating a custom look for an author, but not for the categories, but you can create custom category template files, based on the same technique. I’ve done that for years. Hate it, but it works. Doesn’t apply to posts, but does to categories. See Category Templates which I initially wrote for the WordPress Codex.

      Still, the most effective way it to add the author ID to the core styles for a post then add styles based upon that author. Still doesn’t impact Widgets and such, but will customize the look of the post belonging to that author.

  48. Posted July 12, 2010 at 6:18 am | Permalink

    Thanks a lot for your advice, I really appreciate it.

    Jos

  49. Posted July 13, 2010 at 11:30 pm | Permalink

    Almost three years later and this is still incredibly helpful. Thanks a lot! Saved my life (:

  50. david
    Posted July 20, 2010 at 12:01 pm | Permalink

    Hi Lorelle,

    Like you explained in your comment on May 7, 2010 at 4:50 pm. You say that all you need to do is edit your css file and add
    Something like:

    category-1 h2 {
    color: #00fd0e;
    }

    In my case my category is id=1. But adding this to the css doesn’t change anything. I’m pretty new at all this… but could you please enlighten me on this issue? I’m using the latest wordpress version believe it’s 3 now.

    Thank you so much.

    Ah… and basically all I want to do is change the Entry-title and Entry-meta background to different colours per category. I’m also doing this on the thematic theme.

    Any help is very much appreciated! =)

    • Posted July 20, 2010 at 12:56 pm | Permalink

      I don’t know how your Theme is set up. Best to contact the Theme author to find out if they are using category ID numbers in their Theme. If not, this won’t work. To change the entry title and meta information, find the styles in your stylesheet and change them in the CSS. See Finding Your CSS Styles in WordPress if you are unfamiliar with digging into the CSS and tracking down the styles in a WordPress Theme.

  51. Posted July 25, 2010 at 10:33 am | Permalink

    hello, thanks for sharing this, i found it pretty useful.
    but i’m having problems…
    the code spits the classes correctly for the post div, it’s now like

    but when i try to style the .webdesign class, the attributes i give it apply to ALL posts in the loop, even the ones that do not share the .webdesign class. what could be going on? i’m applying it to a theme i’m developing, it’s my first theme.

    plus i must have made some mess here, now all the posts permalinks point to my 1st post single page. gahhhh

    i hope you can help me with this, if you have the time.
    thanks a lot

    • Posted July 25, 2010 at 11:01 am | Permalink

      I see from the popularity of this post that I’ll have to update it. I cannot offer specific help beyond the comments in the post and the article, but I’ll update it and maybe that will help. Thanks.

  52. Posted July 25, 2010 at 11:23 am | Permalink

    perhaps you’ll have to, but i just found out what i was doing wrong…
    still need to resolve the “all permalinks point to 1st post” issue though

    thanks !

    • Posted July 26, 2010 at 10:45 am | Permalink

      I’ve updated the post and the WordPress Codex articles accordingly for the new information. Thanks for the kick.

  53. J S
    Posted September 3, 2010 at 4:56 pm | Permalink

    Your “div id” code you provided is giving me a big “Parse error: syntax error”. Are you sure it’s correct?

    • Posted September 4, 2010 at 8:37 am | Permalink

      div codes do not give syntax errors. PHP code does. Check your code carefully.

  54. Tim
    Posted September 25, 2011 at 11:42 pm | Permalink

    Thanks! I’ve spent hours looking for a way to do this, and this solution is so simple.

  55. Posted October 5, 2011 at 2:10 pm | Permalink

    Thanks for this, Lorelle! You rock, I typed it right into my functions.php code, didn’t have to edit anything, and it worked. Saved me lots of time, and I’m upset I didn’t find your article earlier!

  56. Tianna Maschak
    Posted October 31, 2011 at 5:00 am | Permalink

    My partner and I came here simply because this internet site was tweeted by a lady I was following and i’m very pleased I made it here.

  57. Mats
    Posted November 15, 2011 at 2:00 pm | Permalink

    Thank you Abhijit! The code to get the category was just what I was looking for. I tried an other version, from wp codex, but that gave me letters like åäö in the class attribute, and that wasn’t really good.

  58. Posted August 29, 2012 at 3:37 am | Permalink

    Actually another very simple way to do this is with pure css.

    for example if you want to hide the author and date in posts of a certain category then
    in your themes css file do the following

    /* Hide the author and date metabox above posts for certain categories. */
    .category-properties .single_postmeta {display:none;}
    .category-letters .single_postmeta {display:none;}

    to change the background color

    /* Change the background color of posts for certain categories. */
    .category-cars {background:red;}
    .category-bikes {background:green;}

  59. Posted November 27, 2012 at 1:31 am | Permalink

    I want to show specific categories title with link when a particular category opens. Kindly let me know the conditional tag for it. Can I open it by specific slug? Like if I have slug ie author_someone-you than condition can be if – slug someone_s so could show all author with word s?? Thanks in advance…..

    • Posted November 27, 2012 at 3:55 pm | Permalink

      According to your signature, you are on WordPress.com, and such actions are not available to WordPress.com users. If you are trying this on a self-hosted version of WordPress, please see conditional tags and statements in the WordPress Codex.

      By default, when someone clicks on a category, posts within that category are shown. I don’t know what you mean by “specific slug,” implying the URL address or slug. If an author link is clicked, by default the resulting page shows all the posts by that category. If you would like information on managing multiple authors, and highlighting their posts in unique ways, see my series on WebVisions: Managing Multiple Bloggers in WordPress. Thanks.

  60. Posted May 30, 2013 at 11:58 pm | Permalink

    Hi there, There’s no doubt that your site could be having web browser compatibility problems. Whenever I look at your blog in Safari, it looks fine however, when opening in I.E., it’s got some
    overlapping issues. I just wanted to give you a
    quick heads up! Aside from that, great website!

  61. Posted January 8, 2014 at 7:29 am | Permalink

    hey.. the 1st way is working for me but there is a problem.. my category resides within the and i need to give the class to <a> inside this function.. but i cant seem to access its inbuilt from wordpress…

    can u suggest me how to bypass the function and access that anchor element.. ?

    or is there any other way to give the class in the container without accessing the <a> element??

    Thanx in advance :)

    • Posted January 15, 2014 at 10:15 pm | Permalink

      To put a class inside of a link, depends upon the link and how it is generated. For example, if the link is a post title, that is generated by the post title WordPress template file and it has a parameter to generate a class for that link. Other links, it all depends.

      The WordPress Support Forum for WordPress.org is the best place for you to get the help you need. Thanks.

  62. Posted July 22, 2014 at 3:16 pm | Permalink

    I tried the one to change the entire page, not just the post content, but it still only changed the background color of the post content. HELP.

    • Posted July 23, 2014 at 5:38 pm | Permalink

      If you are on WordPress.com, this technique will not work for you. Check the specifics of your WordPress Theme and check with the WordPress support forums for specific help.

      If you are styling this in CSS, you have to find the CSS container holding what you wish to change. See this article on finding your CSS Styles in a WordPress Theme on the WordPress Codex for more help.

    • stenar
      Posted July 23, 2014 at 5:43 pm | Permalink

      Yes, I’ve read that article and looked through the hugely long CSS document, but cannot figure out what controls the rest of the page. Or, I think I might find it, but how do you put a .sidebar or other container that begins with a period into something that is already beginning with a period? .category I’m not entirely unfamiliar with CSS, but not sure how to do that.

    • Posted July 27, 2014 at 8:56 pm | Permalink

      There are many sites and tutorials available online for you to learn about the basics of CSS, including this article on the WordPress Codex. The period before a word is CSS for the classification of a class. CSS uses two different classifications (identifiers) to identify specific sections of HTML such as the header, sidebar, footer, etc. A class is an identifier that may be used repeated on the same web page, and a ID has a # in front of it such as #header, and is used to identify a section that does not repeat on a web page, thus is considered unique. Sidebar could be a class or ID (#sidebar or .sidebar) depending upon the Theme. Each one is different.

      Honestly, switch Themes to get the effect you wish rather than try to do it yourself, or find someone with the time to help you. I recommend a local WordPress meetup. Good luck.


32 Trackbacks/Pingbacks

  1. [...] two month party is on, and this month it is about WordPress. I have used a nifty technique to use WordPress category slugs to use different styles for posts in different categories. It not only keeps the HTML code clean, [...]

  2. [...] Using WordPress Categories To Style Posts has some very useful info on setting CSS classes depending on the category in which an article is [...]

  3. [...] a great article about Using WordPress Categories To Style Posts at Lorelle on WordPress [...]

  4. [...] has an interesting post about Using WordPress Categories To Style Posts. I use it so far to get a different layout for my Asides category. It was fairly easy to set up, [...]

  5. [...] Using WordPress Categories To Style Posts: Abhijit Nadgouda of ifacethoughts helps us customize any post by category, allowing you to change how a post is viewed on multi-post page views so it stands out visually by category “style”. [...]

  6. [...] pages only appear on those web pages and not the rest of the site. This is one method. In Using WordPress Categories to Style Posts, guest blogger, Abhijit Nadgouda of ifacethoughts, explains a similar method that might be easier [...]

  7. [...] Using WordPress Categories To Style Posts: Abhijit Nadgouda of ifacethoughts helps us customize any post by category, allowing you to change how a post is viewed on multi-post page views so it stands out visually by category “style”. [...]

  8. [...] This page shows quite easily how to style your posts based on category. ace. [...]

  9. [...] Die Codevorlage zur Variante 1 (und eine genauere Erklärung als meine) findet sich bei Remote Sensing Tools. Die Codevorlage zur Variante 2 (und eine genauere Erklärung) findet sich bei Lorelle. [...]

  10. [...] Nachteil der If-else-Abfrage bringt Abhijit Nadgouda auf den Punkt: Of course, you know the categories, you have the post and you have the if-else PHP [...]

  11. [...] Using WordPress Categories To Style Posts « Lorelle on WordPress Found a way to change post styling in wordpress using the post’s category (tags: mycomments wordpress css html howto background) [...]

  12. [...] Using WordPress Categories To Style Posts Saa poster ser forskellige ud alt efter kategori de er postet i (tags: wordpress css webdesign) [...]

  13. [...] At kunne style kategorier forskelligt [...]

  14. [...] Using WordPress Categories To Style Posts – Design ift. kategori Lignende indlæg [...]

  15. [...] Using WordPress Categories To Style Posts « Lorelle on WordPress [...]

  16. [...] categories. It’s not an approach that I’ve used before, so I’ll point you to Using WordPress Categories to Style Posts from Lorelle via a guest [...]

  17. [...] these two seem to be more of what i’m looking for. Styling Posts by Category and Category-Specific Images, using wordpress categories to style posts [...]

  18. [...] for them. There is another way to style different posts based on categories, which you can find at http://lorelle.wordpress.com/2007/09/06/using-wordpress-categories-to-style-posts/ which might be a better solution if you plan on having a lot of different [...]

  19. [...] 120. Using WordPress Categories To Style Posts [...]

  20. [...] Using WordPress Categories To Style Posts « Lorelle on WordPress [...]

  21. [...] schnell bin ich auf die Lösung von Lorelle van Fossen gestoßen, die auch direkt funktioniert hat. Die Plugin-Suche ergab leider nichts konkretes … [...]

  22. [...] Shared Using WordPress Categories To Style Posts « Lorelle on WordPress. [...]

  23. [...] hur och varför, utan bara snabbt visa hur man gör. Vill du veta mer ingående följ denna länk. Using WordPress Categories To Style Posts Kategori Okategoriserade | Inga [...]

  24. [...] post will show off support for individual category styles. I found the code at Lorelle’s. It is done by adding a few extra lines to functions.php and adding extra CSS for specific [...]

  25. [...] skip all that and see if I can add some shout-out style… saved to weblog @ 15:20 on Tuesday, August 10th 2010 [...]

  26. [...] 120. Using WordPress Categories To Style Posts [...]

  27. [...] ganz einfach herauslöschen oder stark reduzieren. Den Nachteil der If-else-Abfrage bringt Abhijit Nadgouda auf den Punkt:Of course, you know the categories, you have the post and you have the if-else PHP [...]

  28. [...] out how to mark posts by their post type on the homepage i.e. in the Loop. I had previously seen this nice solution to add categories to css classes i.e. to make each post on the homepage of the blog have a different CSS class depending on its [...]

  29. [...] ganz einfach herauslöschen oder stark reduzieren. Den Nachteil der If-else-Abfrage bringt Abhijit Nadgouda auf den Punkt: Of course, you know the categories, you have the post and you have the if-else PHP [...]

  30. [...] ganz einfach herauslöschen oder stark reduzieren. Den Nachteil der If-else-Abfrage bringt Abhijit Nadgouda auf den [...]

  31. […] Using WordPress Categories To Style Posts: Abhijit Nadgouda of ifacethoughts helps us customize any post by category, allowing you to change how a post is viewed on multi-post page views so it stands out visually by category “style”. […]

  32. […] Using WordPress Categories To Style Posts […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,965 other followers

%d bloggers like this: