Ready to get started?Download WordPress

Plugin Directory

WP User Stylesheet Switcher

Adds a 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

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

Example : [wp_user_stylesheet_switcher list_title="Les styles en icons " 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'=>'icon'));?>

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.

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.0 or higher
Compatible up to: 3.8.3
Last Updated: 2014-2-2
Downloads: 839


3 stars
3.8 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say 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