Simple Style Changer Twenty Ten

We answered a topic on the WordPress forum about offering the administrator a way of switching stylesheets, this we are already looking at this for a new theme we are working on for our own website.

When changing styles we may not want to give the administrator to many options as it is only the style that can really be changed and not the layout, there is no point in loading a stylesheet for a three column layout if the theme has only one column.

We have taken our tabbed options tutorial and added three dropdowns where we can select a stylesheet, home, pages and posts, in the download there are three stylesheets included and a sample child theme for testing.

Download the twenty ten child theme:  Twenty Ten Styles (749)

The Stylesheets

 We have created a folder in the theme called /styles/ and added in our three alternate stylesheets, these can only change fonts, colors and graphics not the layout of any pages.

 We have also give our stylesheets friendly lowercase names like crimson.css, purple.css, blue.css, colbolt.css, this will make it easy for the theme administrator.

This system could also be adapted to give each user a choice without changing the whole theme.

theme-options.php

As we are using a child theme we have used STYLESHEETPATH this would be changed to TEMPLATEPATH if we were not using a Child Theme.

In the theme-options.php. we added a function to get the stylesheet names from the folder, this we load into a variable called $sa_css.

// 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, "");

 

We then added in the stylesheet options in the general array section for switching stylesheets.

// Default options values
$sa_general = array(
 'default_css' => '',
 'post_css' => '',
 'page_css' => '',
 'footer_copyright' => '© ' . date('Y') . ' ' . get_bloginfo('name'),
 'intro_text' => '',
 'featured_cat' => '',
);

header.php

If we only wanted the one option we would have coded to get the setting and load the stylesheet like this, in the download we have used an if else statement for the different file (page) types.

<?php
 $sa_settings = get_option( 'sa_general' );
 if( isset( $sa_settings['default_css']) && $sa_settings['default_css'] ) {
  wp_register_style( 'customstyle', get_stylesheet_directory_uri() .'/styles/'.$sa_settings['default_css'] .'.css', '', '0.1' );
  wp_enqueue_style( 'customstyle' );
 }
 ?>

The Theme Options

styles

styles-1

styles3

 styles-21

There we have our three styles, we hope that you have found the information here of some use, if you are a facebook user please like our pages to help spread the fan base for Digital Raindrops.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More