A common option in premium WordPress themes is the ability to select different design styles. Even “Twenty Eleven” has the option to use a “Light” or “Dark” color palette.
There are two main ways to apply these styles- either with body classes or by loading in a second stylesheet. This tutorial covers the stylesheet method.
I’m also assuming you’re using the Options Framework (theme or plugin version) to set up your options, though you could likely adapt the code if you are building your own panel from scratch.
The above screenshot shows two options for stylesheet loading. One uses pre-defined stylesheets that the developer selects. The other scans a specific directory for stylesheets and allows the user to pick anyone file that’s there (even if they added their own). Choose the method that works best for you.
Pre-Defined Stylesheets
Here’s how you would set up an option with predefined stylesheets. If you’re using the Options Framework this would go in options.php in the optionsframework_options function:
// Defined Stylesheet Paths // Use get_template_directory_uri if it's a parent theme $defined_stylesheets = array( "0" => "Default", // There is no "default" stylesheet to load get_stylesheet_directory_uri() . '/css/blue.css' => "Blue", get_stylesheet_directory_uri() . '/css/green.css' => "Green", get_stylesheet_directory_uri() . '/css/pink.css' => "Pink" ); $options[] = array( "name" => "Select a Stylesheet to be Loaded", "desc" => "This is a manually defined list of stylesheets.", "id" => "stylesheet", "std" => "0", "type" => "select", "options" => $defined_stylesheets );
Notice that the first option is “default”, which for this example means that no additional stylesheet will be loaded.
The three stylesheet options are blue.css, green.css and pink.css- which reside in the “css” folder of the theme.
List all Stylesheets in a Directory
The other option is add as many css files as you want to a directory, and have the options panel automatically load those as an option in the select box. Here’s how you would do that:
// Generated list of stylesheets in the "CSS" directory // Use template_directory paths if you're using a parent theme $alt_stylesheets = options_stylesheets_get_file_list( get_stylesheet_directory() . '/css/', // $directory_path 'css', // $filetype get_stylesheet_directory_uri() . '/css/' // $directory_uri ); $options[] = array( "name" => "Automatically Load List of Stylesheets", "desc" => 'In this example the css files in the "css" directory are automatically loaded into the option.', "id" => "auto_stylesheet", "type" => "select", "options" => $alt_stylesheets );
Loading a list of files into an option could be used for other uses than just css, so I created a generic function that returns an array of files when pass the path to the directory, file type and directory uri.
This will also be needed for the above code to work:
/**
* Returns an array of all files in $directory_path of type $filetype.
*
* The $directory_uri + file name is used for the key
* The file name is the value
*/
function options_stylesheets_get_file_list( $directory_path, $filetype, $directory_uri ) {
$alt_stylesheets = array();
$alt_stylesheet_files = array();
if ( is_dir( $directory_path ) ) {
$alt_stylesheet_files = glob( $directory_path . "*.$filetype");
foreach ( $alt_stylesheet_files as $file ) {
$file = str_replace( $directory_path, "", $file);
$alt_stylesheets[ $directory_uri . $file] = $file;
}
}
return $alt_stylesheets;
}
Enqueue the Stylesheet on the Front End
Now that the options are available in the backend, you need to set up a function to actually load the stylesheet into the theme. This code can go in functions.php:
/*
* The CSS file selected in the options panel 'stylesheet' option
* is loaded on the theme front end
*
* If you'd prefer to use the 'auto_stylesheet' option, replace
* of_get_option('stylesheet') with of_get_option('auto_stylesheet')
*
* If the "Default" option is selected, "0" is returned (equivalent to false),
* which means no files will be registered or enqueued
*/
function options_stylesheets_alt_style() {
if ( of_get_option('stylesheet') ) {
wp_enqueue_style( 'options_stylesheets_alt_style', of_get_option('stylesheet'), array(), null );
}
}
add_action( 'wp_enqueue_scripts', 'options_stylesheets_alt_style' );
Warning
Loading multiple stylesheets might seem like a good way to give users more control of their themes but there is also a performance hit on the front end.
Every enqueued stylesheet is an additional file that needs to be loaded, so be judicious in where you use it, and try to keep the HTTP requests as low as possible.
View the Source Code
The full source code for this demo is available on GitHub.
