Custom Stylings for category pages

2 Views

Is there a way to have the styles on a page appear differently for certain categories, when viewing a page that is only of that category?

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. @EAMann has a great answer if you want different layouts for different categories. OTOH if you only want to change the CSS to, for example, have a different background color for each category then you’ll find that most themes will include the category slug as a CSS class on the <body> element and/or possibly other HTML elements that are output by the theme. (And even if your theme doesn’t you could always add that functionality yourself.)

    For example the TwentyTen theme does exactly that; for the following URL:

    http://example.com/category/category-1/

    Here’s what the <body> element looks like:

    <body class="archive category category-category-1">

    Knowing the above you could add the following styles to your theme’s style.css file to have different color backgrounds for each page (I’m being very simplistic here of course; your actual CSS would certainly be more sophisticated):

    /* style.css */
body.category-category-1 {
  background-color: red;
}
body.category-category-2 {
  background-color: green;
}
body.category-category-3 {
  background-color: blue;
}

    All you really need to do do figure out if your theme does this or not is to view source on the category pages of interest and search for your category slug.

    Use a Child Theme

    Of course you probably don’t want to modify your theme’s style.css; you probably want to create a Child Theme instead. Here are some answers where I talk about Child Themes:

    Note that not all themes support child themes, Thesis being one notable example. In the case of those themes you’ll have to research more into how they are extended.

  3. What Eric said. But if you only want to change the style, and not the markup, there’s an easier way. As long as your theme includes the body_class() call in the opening body tag, WP will add all sorts of useful CSS hooks to your page. The default markup will add the follwing classes to the body element on a category archive:

    • archive
    • category
    • category-slug

    which you can style as you like. A lot of theme frameworks will add even more useful hooks to your body class, although some of them I can’t possibly see the real-world use cases for.