Wordpress Style Switcher

Hi guys and gals,

How can I create a front end style switcher for my Wordpress theme? I got what I want in my theme options panel but I need it to work on the front as well so potential buyers can change the graphics and styles.

There are quite a few things that can be changed, I don’t have just 5 style sheets named blue.css, red.css, etc.

The potential client can change the background colour, background gradient, background pattern and content colour.

Something similar to what Kriesi has created on his latest theme. I think this is the only way viewers are going to be able to change the styles.

Any help would be awesome!

Here is how I do mine on my Illuminati theme using jquery.cookie.js

$(document).ready(function() {
  $("a").click(function() {
    $("link").attr("href",$(this).attr('rel'));
    $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
    return false;
 });
}); 

Then just put your stylesheets in the links they click.

<a href="#" rel="yourstyle.css">Dark Blue</a>

I use the Dynamic Drive style switcher:

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

You’ll have to add some styling to make it look decent but it’s a great no-frills option.

So am I going to have to put each style option in it’s own style sheet for this to work?

My theme allows the user to change each element separately.

For example:

Unlimited Background Colours – This needs to be a hex code added by the user

5 Background Patterns – 5 different images used

18 Background Gradients – 18 different images used

2 Content Colour – 2 different style sheets

In the theme options panel the name of the colour determines the images used in the background. I only have the main style sheet, dark and light content style sheets and some styles in the header ( used for the theme options ).

So am I going to have to put each style option in it’s own style sheet for this to work?

My theme allows the user to change each element separately.

For example:

Unlimited Background Colours – This needs to be a hex code added by the user

5 Background Patterns – 5 different images used

18 Background Gradients – 18 different images used

2 Content Colour – 2 different style sheets

In the theme options panel the name of the colour determines the images used in the background. I only have the main style sheet, dark and light content style sheets and some styles in the header ( used for the theme options ).

Oh boy.. yeah. That’s a whole different can of worms. For demonstration purposes, you’re probably going to need to create a few different color combination style sheets for your buyers to try out. Otherwise, I don’t know of a way to do it short of providing a test user login information to the WP admin panel.

@JamiGibbs Yeah I thought it was going to be a tad more difficult then I thought. I can narrow the background colours down to just black, white and grey. Then create style sheets for each background image. As this is just going to be for the preview it shouldn’t matter if it uses many style sheets, should it?

So am I going to have to put each style option in it’s own style sheet for this to work?

My theme allows the user to change each element separately.

For example:

Unlimited Background Colours – This needs to be a hex code added by the user

5 Background Patterns – 5 different images used

18 Background Gradients – 18 different images used

2 Content Colour – 2 different style sheets

In the theme options panel the name of the colour determines the images used in the background. I only have the main style sheet, dark and light content style sheets and some styles in the header ( used for the theme options ).

Only way I see is to serialize all this data in the cookie and use it on the php side to set the style.

I am in need of some help. I have a style switcher in place. Everything is working great, but Cufon is not setting the colors of the new stylesheet until you either a) mouse over menu items (only fixes menu items) or b) you head to a new page (or re-enter the current address in the address bar). Any help is greatly appreciated. Here is the url: http://practicefieldadv.com/wp/squared3/grey

I am in need of some help. I have a style switcher in place. Everything is working great, but Cufon is not setting the colors of the new stylesheet until you either a) mouse over menu items (only fixes menu items) or b) you head to a new page (or re-enter the current address in the address bar). Any help is greatly appreciated. Here is the url: http://practicefieldadv.com/wp/squared3/grey

Cufon.Refresh(); might help?

I am in need of some help. I have a style switcher in place. Everything is working great, but Cufon is not setting the colors of the new stylesheet until you either a) mouse over menu items (only fixes menu items) or b) you head to a new page (or re-enter the current address in the address bar). Any help is greatly appreciated. Here is the url: http://practicefieldadv.com/wp/squared3/grey

Cufon.Refresh(); might help?

Thanks, but no luck. I had tried that earlier. It actually causes the Cufon replacement to stop entirely.