It is a great flexibility for a designer to be able to incorporate different stylesheets for a single theme to give that theme a different look and feel. Here I am going to discuss how one can do that in few easy steps-
First of all you need to have the following files handy- functions.php, header.php and style.css. They are located in \wp-content\themes\yourTheme\ folder.You also need to create different style sheets that you want to switch to in the theme option of your wordpress theme. For this demo, we will create a blue and black color scheme for our theme. So we have a styleBlue.css and styleBlack.css ready. We also have a styleDefault.css there in the theme directory. We have move all the code from the style.css in the default.css.
Now lets open the functions.php. At the very end of this file add the following code-
<?php
$themename = "Iftekhar Theme";
$shortname = "itheme";
$options = array (
array( "name" => "Layout Settings",
"type" => "titles",),
array( "name" => "Blog Color Scheme",
"id" => $shortname."_color",
"type" => "select",
"std" => "Default",
"options" => array("Default", "Blue", "Black")),
);
function mytheme_add_admin() {
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
header("Location: themes.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: themes.php?page=functions.php&reset=true");
die;
}
}
add_theme_page($themename." Options", "Current Theme Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
<div class="wrap">
<h2><?php echo $themename; ?> settings</h2>
<form method="post">
<?php foreach ($options as $value) {
if ($value['type'] == "text") { ?>
<div style="float: left; width: 880px; background-color:#EEEEEE; border-left: 1px solid #464646; border-right: 1px solid #464646; border-bottom: 1px solid #464646; padding: 10px;">
<div style="width: 200px; float: left;"><?php echo $value['name']; ?></div>
<div style="width: 680px; float: left;">
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" style="width: 400px;" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />
</div>
</div>
<?php } elseif ($value['type'] == "text2") { ?>
<div style="float: left; width: 880px; background-color:#EEEEEE; border-left: 1px solid #464646; border-right: 1px solid #464646; border-bottom: 1px solid #464646; padding: 10px;">
<div style="width: 200px; float: left;"><?php echo $value['name']; ?></div>
<div style="width: 680px; float: left;">
<textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" style="width: 400px; height: 200px;" type="<?php echo $value['type']; ?>"><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>
</textarea>
</div>
</div>
<?php } elseif ($value['type'] == "select") { ?>
<div style="float: left; width: 880px; background-color:#EEEEEE; border-left: 1px solid #464646; border-right: 1px solid #464646; border-bottom: 1px solid #464646; padding: 10px;">
<div style="width: 200px; float: left;"><?php echo $value['name']; ?></div>
<div style="width: 680px; float: left;">
<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" style="width: 400px;">
<?php foreach ($value['options'] as $option) { ?>
<option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
</div>
</div>
<?php } elseif ($value['type'] == "titles") { ?>
<div style="float: left; width: 870px; padding: 15px; background-color:#464646; border: 1px solid #464646; color: #FFF; font-size: 16px; font-weight: bold; margin-top: 25px;"> <?php echo $value['name']; ?> </div>
<?php
}
}
?>
<div style="clear: both;"></div>
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<?php
}
function mytheme_wp_head() { ?>
<?php }
add_action('wp_head', 'mytheme_wp_head');
add_action('admin_menu', 'mytheme_add_admin'); ?>
Here we define the options that will be displayed in the theme option page. Right now we are adding only css dropdown changer so I am going to skip discussing lot of the other option that can be added.
Lets discuss the code a little- at first there is themename and shortname which can be anything you wish. But if you chnage the shortname make sure you chage the shaortname in the header.php code as well. In the third line we are beginning an array which stores all the other arrays that we will be using. In this case, the css selector.
in the array, we use the following:
name – This is the title which will be displayed for this option.
id – This is very important. We will be using these to retrieve the option. $shortname gets replaced with whatever you set the shortname to (in our case wpc).
std – This is the ‘default’ setting for the option. For example on checkboxes we can use true or false to determine whether the box is pre-ticked or not.
type – This defines what type of option it is. For example, text, textarea, checkbox etc.
Next we define a loop and several other fucitions to display our theme option and save the changes we made. After completing this step, you should see a theme option page like this-
Now open up header.php and find out the line that link your css file. Its usually like this-
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
Replace the above line with the following-
<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style<?php echo $iTheme_color; ?>.css" type="text/css" media="screen" />
You are done! Now you should be able to see the changes you make from the theme option page in your site.
.JPG "DSC_0118 (2)")
