WordPress.org

Ready to get started?Download WordPress

Plugin Directory

WP User Stylesheet Switcher

Adds a list of stylesheets in the frontesnd to allow visitors to choose a different visual look for the website.

  1. Place the wp_user_stylesheet_switcher folder in the wp-content/plugins folder.
  2. Activate the plugin through the 'Plugins' menu in WordPress.
  3. Go in Settings->WP User Stylesheet Switcher to setup the alternative stylesheet files. The CSS files should be in the same folder as the other CSS files. Most commonly, this is the theme folder or the child-theme folder.
  4. Add an optional icon file for each stylesheet if you want to use the icon list instead of the dropdown list
  5. Tell WordPress to show the stylesheet list by adding the shortcode [wp_user_stylesheet_switcher] in a page/post or put the widget in a sidebar. Alternatively, you can use the php function show_wp_user_stylesheet_switcher() in your theme, for example to have the list in the footer on every pages of your website (see details below).
  6. If using icons, customize the look of the list in the CSS files.

Options for the shortcode

  • list_title : Used to set a title to the list of stylesheets
  • list_type : Select between "dropdown" "icon" or "button". The dropdown list is set by default. "Button" will show only only button to rotate between available stylesheets.
  • show_list_title : Set to "false" if you don't want any list title. "true" by default.

Example : [wp_user_stylesheet_switcher list_title="Available styles" list_type="icon" show_list_title="false"]

If using the php function show_wp_user_stylesheet_switcher(), you can customize the list using an array of variables (similar to the shortcode) : array('list_title'=>'Available styles', 'show_list_title'=>'true', 'list_type'=>'icon')

By default <?php show_wp_user_stylesheet_switcher(); ?> will show a dropdown list with the default list title. But you can also pass an array like this :

<?php global $wpUserStylesheetSwitcher;
$wpUserStylesheetSwitcher->show_wp_user_stylesheet_switcher(array('list_title'=>'Available styles', 'show_list_title'=>'true', 'list_type'=>'dropdown'));?>

To customize the icon list, place the icons in your the theme folder (where the CSS are). You can give a different look for the icon list for each CSS files. If no icon files are specified in the admin settings, the buttons will show the name of the stylesheet.

If you want to offer the option of desactivating all stylesheets, you have to add an option give a name to that option and specify a an empty css file in the configuration page. Then, select that option in the droplist "Option to remove stylesheets".

CSS classes to use

  • button.wp_user_stylesheet_switcher_button : for the general buttons aspect
  • img.wp_user_stylesheet_switcher_icon : for the image inside the buttons
  • button.wp_user_stylesheet_switcher_button:active : for the button being pressed
  • button.wp_user_stylesheet_switcher_active_option : for the active stylesheet

Here an example:

button.wp_user_stylesheet_switcher_button {
    padding: 0;
    margin: 1px;
    border: none;
}

img.wp_user_stylesheet_switcher_icon {
    border: none;
    padding: 0px;
    margin: 0px;
    width: 30px;
    height: 30px;
    vertical-align:middle;
}

button.wp_user_stylesheet_switcher_button:active {
    padding: 0;
    margin: 1px;
}

button.wp_user_stylesheet_switcher_active_option {
    padding-bottom: 1px;
    border-bottom: 3px rgb(185, 50, 7) solid;
    border-radius: 0px;
}

Requires: 3.0 or higher
Compatible up to: 3.9.2
Last Updated: 2014-8-17
Downloads: 1,027

Ratings

4 stars
4 out of 5 stars

Support

0 of 3 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
1 person says it's broken.

100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1
100,1,1 100,1,1 100,1,1 50,2,1