Home | Advertise | Contact

RSS Feed | Email RSS

How To: Using Another Stylesheet For Certain Pages

By | Filed Under Hacks
Tag(s): , ,

300x250 How To: Using Another Stylesheet For Certain Pages

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!
  • Print This

    • Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Connect with Kyle on Twitter or Google+!

    There Are 13 Responses So Far »

    • http://www.moon-blogger.com moon

      Good tutorial.Thanx^.^

    • http://elitebydesign.com Brian

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

    • http://kyleeslick.com Kyle Eslick

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

    • Harris

      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.

    • Pingback: 100+ Killer Wordpress Resources | Steffan Antonas' Blog

    • Pingback: Collection of WordPress Hacks | WordPress Hacks

    • lissa

      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! =)

      • http://www.artistsinlet.com/writing/ Mike Carter

        Hi Lissa — if you still need help on this, you can use custom fields. Won’t go into it unless you let me know you haven’t found a solution. Been 2 1/2 years since your post :) .

        Mike

    • Pingback: Wordpress – How to do. - Web Development Notes

    • http://heathermain.com heather

      thanks for the tutorial. unfortunately, when i copied and pasted the code into the header file, all my wp pages came up with a parsing error message regarding line 2. it’s probably something i’m doing – i’ve been having a lot of coding issues the past few days. no worries though. turns out there’s a plugin that accomplishes the same thing, and i got it working. it’s “Page Specific CSS/JS” in case anyone else needs it. thanks again for sharing, i’ll probably try this again sometime when my brain is being more code-coherent :)

      • Bryan

        I believe the error is due to him having left out the “?>” at the end of the first line, before the HTML starts.

        Other than that small error, very nice post. I appreciate the info, Kyle.

        • Bryan

          For anyone else having problems with this: On further inspection, I found an unneeded “;” at the end of the first that was resulting in extra space at the top of my page. Just remove it, add the aforementioned “?>” to the end of the first line, and you’re good.

    • http://romanharcke.de Roman

      Thank you for this code! What a great site

    • Pete

      Thank you for posting this. Can you tell me how I would do this for a post template? Currently I have a post template called single-wide.php. I’d like for this template to always use a stylesheet called stylesheetwide.css. Can you tell me how to do this?

      Thank you!

    • Miguel Lopez

      I found this MUCH easier to do :

      How to make a page specific stylesheet in a WordPress multiple-paged site:

      1. Go to this site…

      http://wordpress.org/extend/plugins/page-specific-cssjs/installation/

      Follow those 5 easy steps.

      **Step 5 is kinda tricky but easy. Copy your original or create your own css stylesheet, name it like the page you want it to affect. Insert it in the appropriate folder (where the original css is at). One thing I noticed was my page was named “?pageid_5?, that’s not good. I renamed it “projects” under WPAdmin>Pages>Edit Permalink (just below your page title).

      So you should have inserted 2 things in your WP folders: the page-specific-cssjs file and your new css stylesheet (named the same as your the page you want it to affect)

      3. That’s it! You should see your new stylesheet in your admin. Reload your browser if not showing. Any changes you make on this new css will only make changes to the same-named page on your site!

    • http://www.happywhiskerz.com/wordpress Susan Mouw

      This worked great, but inadvertently caused another issue. The custom menu background disappears on the pages with the custom stylesheet. However both stylesheets have the exact same settings for the nav background. Help!