A couple of different secondary stylesheets?
-
I was wondering what would be the most painless and standard-compilant way of giving the end user an option to pick a secondary stylesheet which would then change the colours, from the option panel? I looked into a bunch of premium third-party themes as well as some hosted on the repository and I wasn’t sure what would be acceptable and what would not be. Any help is appreciated. 🙂
-
If you have a theme options page, it should be easy to just add a dropdown and if it has a value load the stylesheet in header.php
I am not at my usual place so cannot give an example until later, but I am testing it here, home, page and singular.
I will post something later tonight.
David
I’ll wait as long as needed. 🙂
My theme is almost complete, but I have used the out of date tutorials to get its options page done, which is why I’m asking this in a first place.
For the options page this might help, read the comments as there is a small issue, download the sample theme as the code below is based on it but not tested!
The Stylesheets
Create a folder in the theme called /styles/ and add in your alternate stylesheets.These can only change fonts, colors and graphics not the layout, give them a friendly lowercase names like crimson.css, purple.css, blue.css, colbolt.css.
NOTE: Based on a childtheme and using STYLESHEETPATH change to TEMPLATEPATH if not creating a Child Theme.
In the theme-options.php.php add a function to get the stylesheet names and a variable.
// Get the Stylesheets function sa_list_styles(){ $path = STYLESHEETPATH .'/styles/'; $list = array(); $dir_handle = @opendir($path) or die("Unable to open $path"); while($file = readdir($dir_handle)){ if($file == "." || $file == ".."){continue;} $filename = explode(".",$file); $cnt = count($filename); $cnt--; $ext = $filename[$cnt]; $name = $filename[0]; if(strtolower($ext) == ('css') ) { $list[$name] = array( 'value' => $name, 'label' => $name ); } } return $list; } $sa_css = sa_list_styles(); array_unshift($sa_css, "");Add in the stylesheet options in the general section for switching stylesheets.
// Default options values $sa_general = array( 'default_css' => '', 'footer_copyright' => '© ' . date('Y') . ' ' . get_bloginfo('name'), 'intro_text' => '', 'featured_cat' => '', );Then to display the option on the options page.
<tr valign="top"><th scope="row"><label for="default_css">Default Stylesheet</label></th> <td> <select id="default_css" name="sa_general[default_css]"> <?php foreach ( $sa_css as $style ) : $label = $style['label']; $selected = ''; if ( $style['value'] == $settings['default_css'] ) $selected = 'selected="selected"'; echo '<option style="padding-right: 10px;" value="' . esc_attr( $style['value'] ) . '" ' . $selected . '>' . $label . '</option>'; endforeach; ?> </select> </td> </tr>header.php
$settings = get_option( 'sa_general' ); if( isset( $settings['default_css']) && $settings['default_css'] ) { wp_register_style( 'customstyle', get_stylesheet_directory_uri() .'/styles/'.$settings['default_css'] .'.css', '', '0.1' ); wp_enqueue_style( 'customstyle' ); }That is about it!
David
I have merged the code with the tabbed option page download from my website.
Added three options and even included the stylesheets for a twenty ten child theme.
This is only meant as an example or training aid, and not a full theme, if anyone wants a copy.
Install and activate the theme in a local install, then Admin > Appearance > Theme Options
On the general tab there are three dropdowns, Default, Page and Post CSS, the default is just the home page.
The example stylesheets are in the /styles/ folder and I have included a lot of the colors you might want to control.
I will post a link to a post later today where you can download the sample theme.
HTH
David
Here is a working solution, details and a child theme download.
If this is enough to get you going towards a solution, mark the topic as resolved.
HTH
David
The topic ‘A couple of different secondary stylesheets?’ is closed to new replies.