Marketing Technology
12
Aug

Different Stylesheet For Different WordPress Categories

Posted by Lynette

Here’s an interesting question I found on Twitter today. Here’s what she asked.

Anyone know how you over write they style sheets for one page on a WordPress blog?

hexcodessm
Photo credit: Diego Sinning

I’m not sure if she’s referring to Pages in WordPress or categories. In both cases it is possible but you have to be prepared to write a small php command. Here’s where knowing just a little bit of basic PHP can go a long way when working with WordPress.

There are several methods of doing this but we’ll only cover one here to keep things simple. Let’s say we want a special style sheet just for the home page. This is what you’d put in your header.php of your theme. Find the line of code that references the style sheet. It would look something like this.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />

Change that out to something like this

< ?php if (is_home()) { ?> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style1.css" />
< ?php } else {?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
 < ?php } ?>

Make sure you enter the correct name for the alternate style sheet. In this case, I’ve named my alternate style sheet style2.css

You can also specify a different style sheet for different categories, authors, specific Pages or single post page by using different conditional tags as explained in the Codex.

Example if you want the style2.css for category 2 archive page, just switch out is_home() for is_category(’2′) where the number 2 is the category ID.

Category : Blog

4 Responses to “Different Stylesheet For Different WordPress Categories”



Parody October 26, 2008

Great post, its exactly what im looking for! But how would you do multiple conditions ? As in one for home one for archives, one for pages etc ??

Ive tired the above and it does not work ! Im sure its something simple but i just cant get my head around it.

Thanks for the great post.


Lynette October 27, 2008

Hi Parody. You’ll need to do an if else statement. Like this:

<?php if (is_home()) { ?>
  <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_url’); ?>/style2.css” />
  <?php } elseif (is_category()) {?>
  <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_url’); ?>/style3.css” />
  <?php } else { ?>
  <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’stylesheet_url’); ?>” />
  <?php } ?>

Check out WP’s Conditional Tags page in the Codex. While it does not explain it for style sheets, the concept is the same.
http://codex.wordpress.org/Conditional_Tags


Parody November 24, 2008

Lynette !! your champion!

Thank you so much ! I’m using it now on my site.


Lynette November 24, 2008

Hello again Parody, you’re most welcome.