Selective Stylesheets For Wordpress Pages
October 15, 2009 · Print This Article
Pages in Wordpress blogs often times are created purposefully different from the rest of the blog, for instance, if one wants a separate sales page, or special event – Even certain posts might need to be look different and use a selective stylesheet.
But how do you load up a special CSS file, without having to create special classes and ids that will muck up the original CSS file?
The answer lies in selective loading of a stylesheet for only the pages, posts, categories or author pages that you want it to load for. And the great thing is that it isn’t only for pages or posts.
Below are some code snippets of various selective loading for stylesheets, based on what type of selective page you’re looking for. If you want more functions to help you be even more selective than what I’ve shown you here, checkout the Wordpress Codex page on Conditional Tags.
First, locate your original stylesheet, which will look something like this:
1 2 | <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" |
Or possibly even this:
1 2 3 | <style media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> ); </style> |
After you’ve located where your style sheet is, then you just need to decide how you want to be selective.
On a Category Archive Page
This is to style category archives of a particular category so that something like www.mydomain.com/category/special-category looks different from your other category archive pages. You can be selective by category id, category name, or category slug (permalink). This makes use of the is_category() Wordpress function to get the job done.
1 2 3 4 5 6 7 8 9 10 | <?php // does category have ID 99? // If so, use the special CSS file if ( is_category('99') ) { <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/special.css"; <?php } // otherwise use the default stylesheet (style.css) else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"; <?php } ?> |
On a Particular Post
This is for putting a special style on a particular post, and makes use of the is_single() wordpress function. As with other functions, you can select based on ID, Post Name, or post slug (permalink)
1 2 3 4 5 6 7 8 9 10 | <?php // Does post have slug of cool-post-slug // If so, use the special CSS file if ( is_single('cool-post-slug') ) { <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/special.css"; <?php } // otherwise use the default stylesheet (style.css) else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"; <?php } ?> |
Let Author Pages Stand Out
Let your author pages look different by selecting a different stylesheet. This is just like the other code selections, but uses the is_author() function.
1 2 3 4 5 6 7 8 9 10 | <?php // Does this author have a nickname of John? // If so, use the special CSS file if ( is_author('John') ) { <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/special.css"; <?php } // otherwise use the default stylesheet (style.css) else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"; <?php } ?> |
Set Your Pages Apart
Have a special event that doesn’t fit your blog, try using the is_page() wordpress function.
1 2 3 4 5 6 7 8 9 10 | <?php // Is the page title 'Event Page'? // If so, use the special CSS file if ( is_page('Event Page') ) { <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/special.css"; <?php } // otherwise use the default stylesheet (style.css) else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"; <?php } ?> |
There are many, many more selective functions that you can use, and I highly recommend that you visit the Wordpress Codex on Conditional Tags to see if there’s another selective function that you can use to style your wordpress blog the way you want it to look.
Good luck!
[...] original here: Selective Stylesheets For Wordpress Pages Comments0 Leave a Reply Click here to cancel [...]