Using multiple stylesheets with WordPress
It’s rather common practice to use more than one stylesheet within any type of web design. So with a recent project I managed to create 2 stylesheets that both had different layout properties. One CSS layout was for the index / front page and a second CSS stylesheet was used for pages within WordPress. So to keep in line with web standards, separating design from content, I found a very simple way to use a php if … else statement along with the WordPress conditional tag to achieve this task.
Here’s the code I used:
<?php if ( is_page() ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/page.css" type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>
So a simple explanation of this is to start with the “if” statment. Our “if” statement starts by asking is this a WordPress page (using the conditional tag is_page) and if it is to load the page.css stylesheet. But if it is not a page (else statement) then load the default style.css.
You may also have noticed that within this code I used the bloginfo() template tag. This can be used within a template file to gather information about your blog. I used the bloginfo() tag within my header.php file. Now you can also use the get_bloginfo() template tag to pull your blog information into a page outside of a template file.
So now go and have fun templating your WordPress blog!
Tags: CSS, Development, Stylesheets, Wordpress, XHTML
January 11, 2010
Hi, what if you wanted to set these as user defined statements instead of page defined if statements.
I would like to be able to have 4 thumbnails in a header with 4 choices of skin for the visitor/user to browse my site with, how could that be achieved?
Thanks in advance.
January 18, 2010
Hi David and good question, thanks!
You can actually declare multiple styles and allow the user to change styles with the use of their browser. In Firefox, for example, with multiple styles you can select ‘View -> Page Style’. Of course, not all visitors to your site will know that (nor do they all use Firefox, for shame!)
Found this great resource though, this gives a great example of what I believe you are after.
http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml
Oh and to use WordPress to do this, you could easily use a “theme switcher” plugin.
Found this one here, http://wordpress.org/extend/plugins/theme-switcher/.
If I had a bit more time I would have loved to try and work this out, however, that’s what Google is for anyways right?
Happy Coding!