PreviousPauseNext
Latest Free WordPress Themes | More Free Themes
DailyPress WordPress Theme
DailyPress

Minimalistic Theme
125x125 Ad Space
Widgets Ready
Social Tagging
Tabbed Sidebar
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Firebug WordPress Theme
Firebug

Colorful Theme
125x125 Ad Space
Widgets Ready
Social Tagging
Gravatar Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Gridblog WordPress Theme
Gridblog

Minimalistic Design
WP Gallery Ready
Gravatar Ready
Grid Based
Widget Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Blue Weed WordPress Theme
Blue Weed

WP 2.5 Gallery Compatible
Adsense Ready
Gravatar Ready
3-Columns
Widget Ready
Logo PSD

Demo
Download
Latest Free WordPress Themes | More Free Themes
AdsPress WordPress Theme
AdsPress

WP 2.5 Gallery Compatible
Adsense Ready
Gravatar Ready
2-Columns
Widget-Ready
Logo PSD

Demo
Download
Latest Free WordPress Themes | More Free Themes
Statement WordPress Theme
Statement

WP 2.5 Gallery Compatible
Quick Tabs
100% Width
3-Columns
Widget-Ready
Logo PSD

Demo
Download
Latest Free WordPress Themes | More Free Themes
Tutorials WordPress Theme
Tutorial Theme

Tutorials Feature
Thumbnails
Bright colors
3-Columns
Widget-Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Corptheme WordPress Theme
Corptheme

Four Flavors
Dropdown Menu
Separate Trackbacks
3-Columns
Widget-Ready
XHTML Compliant

Demo
Download
Latest Free WordPress Themes | More Free Themes
Chronicles WordPress Theme
Chronicles

Dark Brown
3-Columns
Widget-Ready
XHTML Compliant
Web 2.0

Demo
Download
Latest Free WordPress Themes | More Free Themes
Velocity WordPress Theme
Velocity

Trackbacks & Comments
3-Columns
Widget Ready
XHTML Compliant
Web 2.0

Demo
Download
Latest Free WordPress Themes | More Free Themes
Blue Lily Theme
Blue Lily

3-Column
Widget Ready
XHTML Compliant
Web 2.0
Rounded Edges

Demo
Download
Latest Free WordPress Themes | More Free Themes
Techicon Theme
Techicon

4-Column
Widget Ready
XHTML Compliant
Blue/White
Recent Boxes

Demo
Download
Latest Free WordPress Themes | More Free Themes
Brilliance Theme
Brilliance

3-Column
Widget Ready
XHTML Compliant
Black/White
Adsense Ready

Demo
Download
Latest Free WordPress Themes | More Free Themes
Identity Theme
Identity

3-Column
Widget Ready
XHTML Compliant
Black/White
Rounded Edges

Demo
Download
Latest Free WordPress Themes | More Free Themes
Xplosive Reloaded Theme
Xplosive Reloaded

3-Column
Widget Ready
XHTML Compliant
Multi-colored
CSS Style Switcher

Demo
Download
Latest Free WordPress Themes | More Free Themes
Limit Theme
Limit

3-Column
Widget Ready
XHTML Compliant
Blue/White
Rounded Edges

Demo
Download

Integrating Alternative Stylesheets in WordPress Themes

Written by Jai on July 15, 2008 – 11:12 am - 3,610 views

I am sure that everyone has come across WordPress themes which use alternative stylesheets (CSS) to switch between different sets of style information. For example, you can have a look at the following themes that have this functionality :-

Here is how these themes do it :-

Default Stylesheet

Ideally, every WordPress theme has a style.css file associated with it that contains all the style information for the theme. This default stylesheet is usually called in the header.php file of your WordPress theme by something like this :-

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

Rel=”stylesheet” is what defines the active stylesheet as the default one.

Alternative Stylesheets

Now you will need alternative stylesheets that change the look or the layout of your theme. For example, you can change the color of the background, fonts, positioning of the sidebar, header images etc. To define the alternate stylesheets, you should use something like rel=”alternate stylesheet” during the stylesheet call. Here are some examples :-

<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/orange.css" media="screen" title="orange" />

<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />

You can make new stylesheet files called orange.css and blue.css files and maybe change the background colors for the body of your theme (for this example). Use something like :-

body {background-color:#FF6E1F;}

Goes in orange.css for orange background color

body {background-color:#2C85EF;}

Goes in blue.css for blue background color

Now, place these files in your theme folder (same path as your style.css).

Style Switcher

The styles in the above alternate stylesheets will be included into your theme but will not be used until it is specified in some way. To do this, we can take help of Javascript code which will serve as a style switcher. You can download the Javascript file here :-

Download styleswitcher.js

Please the styleswitcher.js file into your theme folder and include it into your theme by placing the following code above the tag in your header.php file :-

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/styleswitcher.js"></script>

Now, you need a control scheme that will allow you to switch between the alternative stylesheets. Place the following code anywhere in your theme body :-

Orange
Blue

The above code will make new hyperlinks in your theme called Orange and Blue. When you click on these links, your theme’s background color will change to the specified color.

Conclusion

So you can now experiment and tweak different things in your theme using the alternate stylesheets. You can make any number of such stylesheets but make sure that you call them through the Javascript code. I hope you benefit from this article :)

If you enjoyed this post, make sure you subscribe to my RSS feed!


21 Responses to “Integrating Alternative Stylesheets in WordPress Themes”

  1. I must say that this stylesheet tutorial has helped me a lot in understanding css. Thanks for making this tutorial


    Reply to this comment

  2. I have been looking for this, since a while but did not know what to search for!

    Thanks, I think I have found it:D


    Reply to this comment

  3. ??????????


    Reply to this comment

  4. now i think , i can develop my own wp theme,

    thanks brother for this css tutorial


    Reply to this comment

  5. you are ok!


    Reply to this comment

  6. now i know how to change the wp style.
    u’re a good tutor, jai. good job


    Reply to this comment

  7. Very interesting article, and something that I’ve been curious to learn about recently!

    One question I would have is: how useful has the community here found alternating stylesheets to be? Do your readers prefer them, or are they more of a novelty?

    Nice instructional post!


    Reply to this comment

  8. I liked this implemented in the templates so I have been working on one for my site.


    Reply to this comment

  9. Thank you for this Jai! It has really helped me a lot.


    Reply to this comment

  10. ^_^ I am a Chinese student~


    Reply to this comment

  11. Really your words are fantastic thanx


    Reply to this comment

  12. Really your words are fantastic thanx
    http://www.roro44.com


    Reply to this comment

  13. I think this is a very good post, I will come to this website again…no doubt.


    Reply to this comment

  14. Thanks for this !
    I have a question, though : I noticed that even when I don’t choose a specific stylesheet, the cookie “style” is created. I’d like to avoid that (I’m trying to design a two-mode style switcher : as long as the user hasn’t choosen a style, styles are random), but I’m not that much into javascript and I don’t know how to have the cookie created ONLY if the user has chosen a stylesheet.
    Any advise ?


    Reply to this comment

  15. I’ve seen this idea before a few times, usually incorporatd with a cookie that allows you to set a style sheet and when you revisit the site it picks up the cookie data and keeps your selection from last time. Nice touch … if you think you can do it?


    Reply to this comment

  16. Hi ! Actually, I managed to do it, and it works really fine. I used a js file to get the user’s computer time and to return a stylesheet accordingly. The user can also choose to keep a specific stylesheet (I used cookies), and to toss the cookie to return to the night / day alternance.
    Also, for people who don’t have js enabled, I did a php function which does basically the same, but based on the server’s time.
    Quite a mess mixing both languages, but now it works ^^ I might put the website url here if somebody’s interested (for the moment, the website is still in development).


    Reply to this comment

  17. it’s a joomla’ image or wp’s?


    Reply to this comment

  18. If you’re talking to me, it’s wp, but the same can also be done quite simply with Joomla, I guess !


    Reply to this comment

  1. 3 Trackback(s)

  2. ?WordPress???????css?? | ??
  3. ???Wordpress?????????? | ???
  4. ??? » ?Wordpress??????????

Post a Comment