How to let Visitors to Switch Between two or three CSS Styles / Themes

[socialjeev]

After spending too much time of my theme customization , i finished creating a beautiful style of my theme in Dark color. Not sure if the visitors like the dark styled site and to make them convenient , I want to provide an option to switch to white colored style with a simple feature to switch.

I know that several template vendors use such feature to show case their theme and enable visitors to switch between color styles on front end of their demo site’s itself. I want to have the same feature for my site . On the top corner of front page my visitors should have two buttons to switch between black and white styles. Googled for such tutorial , failed to find one for me.

Found such a tutorial here . But not with much help

I am not expert in coding, but can do with some guide/tutorial. Could any one help me with such tutorial to create such a featured option for my site

Thanks !

[Mottie]

Check out this thread. It essentially uses the same method they describe, but I know it works… the demo on the link you shared doesn’t seem to work =(

[socialjeev]

@amyth91 and @mottie ,

I have tried the source this on a wordpress installation( on localserver)

1) copied the code to header

2) Copied the two .css files style2 and style3 to the theme ‘s root folder. Added styleswitcher.js and images too

3) Copied style.css ‘s content to theme’s style-sheet.
4) Finally copied this to header :

A webpage with alternate user-selectable stylesheets

I have done without changing the code to check if it works . I can see the links on site.But no switching of styles as expected are happened.

Could any one help me to resolve the issue

Thanks

[Mottie]

It doesn’t look like you are pointing the correct directories. For the themes directory, use the following:

As for the javascript, check out this article (I’d be a youngling according to it LOL) on how to target and load the file correctly.

[socialjeev]

I think I stuck some where. No luck with it

Actually moved the .js file into a custom folder named ” custom-jquery ” and tried this in functions.php

function register_my_script() {

wp_register_script('my-script', plugins_url('/custom-jquery/styleswitcher.js', __FILE__), array('jquery'), '1.0', true);

}



function print_my_script() {

global $add_my_script;



if ( ! $add_my_script )

return;



wp_print_scripts('my-script');

}  

Could able to use the style ” One ” . But unable to switch to other two styles

[Author]

Posts