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.
Try it Out
If you want to see working code, I’ve also included this demo in the Options Kit and the Options Theme Kit, which are paid demo packages for the Options Framework.
This is awesome. Thanks for all the great tutorials thus far as well! One question…I’ve seen multiple different themes with the option to load different slideshows/sliders (on to the home page) from the Options panel. Could you send me in the right direction to add this to my Options Framework? Thanks!
Not specifically. I’d try downloading one the popular slider plugins in the WordPress repo, or some premium theme that has a slider and uses Options Framework (Press75, Organic Themes, etc.), and deconstruct how they did it.
Great, thanks. I will look into those.
In the case of wanting to offer users a dropdown with multiple stylesheets, wouldn’t it be easier to have an option like:
http://pastebin.com/svF7UXwJ
And then put something like:
<link rel="stylesheet" type="text/css" href="/css/.css” />
In the head, where /css contains the corresponding stylesheets?
Of course, this way doesn’t involve wp_enqueue_style and isn’t perfect, but is my thinking practical?
Thanks Devin!
You’re welcome to do it however you like, but I think wp_enqueue_style is probably the way to go since this allows minification plugins to combine it with other stylesheets and allows more flexibility if a child theme wants to unhook it.
In terms of using just the file name rather than the full filepath, I don’t see that it makes much of a difference.
Hello,
I’m trying to implement this in a Thematic Child Theme without sucess… Everything seems to work but it doesn’t load the css file, it always use the default css.
Is there a better solution to work with child themes? I tried the Plugin but i receive a message saying that the plugin can’t be used with my theme.
Thanks for your great work and for your help.
Minacio
I have a Thematic specific example here:
https://github.com/devinsays/thematic-options
Hi Devin,
Thanks for the reply.
I misunderstood how to work with the theme but I managed to install and adapt to my project.
Now I have difficulty loading the stylesheets … After selecting everything seems fine but do not load …
Thank you.
Are you enqueuing them properly?
Hi again Devin,
In the beginning I misunderstood how this could work and confuse the use of plugin and theme but finally everything works just fine. I’ve been reading most of your post in foruns and learning with people with similar doubts.
Thanks for your great work!
i keep getting this error Fatal error: Call to undefined function options_stylesheets_get_file_list() line 34 options.php
This might be an obvious question, but do you have the options_stylesheets_get_file_list function defined?
Sorry About that, here’s the new error i now get after the correction
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\development\wp-content\themes\new-theme12\functions.php:570) in C:\xampp\htdocs\development\wp-includes\pluggable.php on line 881
Thanks for your help so far.
Hi Devin!
Nice tutorial, I was trying to use it for a custom theme but then made a small tweak. And as you mention that loading multiple CSS files increases HTTP requests.
How about this:
Instead of creating a separate CSS file for each color, simply create a CSS class and add all the required CSS to main Stylesheet.
Now, instead of using wp_enqueue_style, we can use body_class filter to add custom CSS class to “body” :)
Right, that’s why I mentioned body classes in the second paragraph. :)
I use them in Portfolio Press for the layout options (1-col, 2-col, etc)- and you’re right, that’s generally more efficient than an additional HTTP request.
But if you had, say, 20 stylesheets to choose from, the additional HTTP request is probably worth it to keep the main stylesheet file size low. Also, plugins like W3C total cache allow you do combine your stylesheets- so if you do that it also wouldn’t matter.
Oh wow! I actually missed that you mentioned “body class” :)
And yes, I agree if there are tens of color schemes or stylesheets it’s good to have additional HTTP request rather than a super long stylesheet with unused CSS.