When you think of having two stylesheets for a website or blog, you typically think of an alternate stylesheet specifically for a web browser, such as an Internet Explorer stylesheet.

One thing we haven’t covered yet is how to add a second stylesheet that is only used for certain pages. In order to do this, you’ll want to open up your header.php file and locate your existing stylesheet. The stylesheet code should look something like this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Now, we need to make an adjustment so that it will only show the code in a certain situation. For example, if you want a certain category to use a different stylesheet, you’d use the following code:

<?php if ( is_category('1') ) {
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/cat-1.css"
type="text/css" media="screen" />;
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<?php } ?>

In this example, we are assigning the cat-1.css to be used for category 1. Every other page will use the normal stylesheet.

You can plugin in alternate information as needed.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
Digg This | Stumble it | Add to Del.icio.us | | Print This

There Are 7 Responses So Far. »

  1. 1 moon
    Friday, March 28th, 2008 at 6:23 am

    Good tutorial.Thanx^.^

  2. 2 Brian
    Friday, March 28th, 2008 at 9:38 am

    how would I change that so instead of changing the CSS for a category it would change it for a specific page.

  3. 3 Kyle Eslick
    Friday, March 28th, 2008 at 10:38 am

    @ Brian – Pages and posts are the same as far as assigning a number to them, so you should be able to use the post number.

  4. 4 Harris
    Sunday, April 6th, 2008 at 11:25 pm

    How about change the whole css style or at least override de main css? For example, the theme has 3 different alternate styles (spring.css, summer.css and winter css)so the user can choose one through a theme option. Is that possible? If yes, do you have any idea how it can be done?

    Thank you.

  5. 5 lissa
    Tuesday, January 27th, 2009 at 7:16 pm

    hi Kyle. i can’t seem to make this multiple stylesheet working. On our site cfcontario.ca, i wanted some pages to have a different colored page, but using the same template, without creating a whole new template. i basically want to ’skin’ different pages. a stylesheet should do but nothing worked. email me your suggestions.

    what’s the best way? please help and thanks! =)



Leave A Comment