Support » Themes and Templates » A couple of different secondary stylesheets?

  • Iva

    (@supersonicsquirrel)


    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. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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

    Iva

    (@supersonicsquirrel)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘A couple of different secondary stylesheets?’ is closed to new replies.