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.

Dark Blue

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.

1 Like

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.

Did you ever find a solution to this? I’m having the same problem now :-S

Did you ever find a solution to this? I'm having the same problem now :-S

Unfortunately not :frowning: I’m not going to add one to the preview unless I find a solution.

Ah well looks like i’ll have to resort to wordpress multisite each with a different colour scheme then haha.

Its a strange problem though. I tried making sure the new style sheet was loaded before using cufon.refresh but still it didn’t work. the only way the cufon would change would be by refreshing the page. Weird and annoying!

Anyone can apply css3 shadow to the cufon-headlines?

I don’t know if this helps to you guys, but we had a useful discussion about creating a style switcher here:

Cheers AkinGn,

Im using php now. Out of interest did you have to include session_start(); at the top of your wp-config.php file to get sessions working?

If i dont do that I always get the headers already sent error :-S

this thread may help http://themeforest.net/forums/thread/create-pages-with-alternate-information-in-wp/32737

Cheers AkinGn,

Im using php now. Out of interest did you have to include session_start(); at the top of your wp-config.php file to get sessions working?

If i dont do that I always get the headers already sent error :-S

I include that code at the very top of my functions.php:

<?php session_start() ?>

and it works perfect.

ah cool thanks

Reply to : JamiGibbs Jul '10

I use the Dynamic Drive style switcher:

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

I just want to add that this solution still works great. I used it to create a dropdown select field as a WordPress main menu using some functions.php code.

1 Like