1

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?

Improve this question

3 Answers 3

Reset to default
4

@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.

Improve this answer
2
  • A more complete, CSS-only solution :)
    – EAMann
    Commented Aug 23, 2010 at 20:11
  • I love CSS. I hope widget classes get improvements soon as well and we get the tag cloud fixed :D
    – hakre
    Commented Aug 24, 2010 at 14:09
1

If you want, you can have a different template for each category with its own set of style definitions. Then you can style the page differently for certain categories, but only when viewing a page that is only of that category.

Just use these in your theme:

  1. category-slug.php
  2. category-ID.php
Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.