Plugin Directory

WP User Stylesheet Switcher

Adds a list (or multiple list) of stylesheets in the frontend 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

  • switcher_id : Reference of the switcher to display (shown in the switcher admin page)
  • 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 switcher_id="s0" 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('switcher_id'=>'s0', '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('switcher_id'=>'s0', '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".

Show icon link

If showing the available stylesheets as icons, you can also print the name of the stylesheets before, after, over or under the icon. In php, you would add 'icon_names'=>'after' to the array to show the names after each icon.

Automatic stylesheet rotation

This option offer to possibility to automatically change the stylesheet. There are different options (weekday, week, month, year or random)

The switcher will simply rotate one stylesheet after the other. So if you want a different stylesheet for each season, setup 4 different stylesheet options and set the default to the actual season.

If you don't want any automatic rotation (default), select "none".

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;

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.6 or higher
Compatible up to: 4.2.3
Last Updated: 2015-7-27
Active Installs: 400+


4.4 out of 5 stars


1 of 2 support threads in the last two months have been resolved.

Got something to say? Need help?


Not enough data

1 person says it works.
0 people say 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 50,2,1 100,1,1
100,1,1 100,2,2
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 100,1,1 100,1,1 100,1,1
100,1,1 100,1,1