A number of leading designers have already dominated this WordPress premium themes market; quite notably: Woothemes, DIYThemes and StudioPress.

But amongst these big names you may have come across a more succinct, straightforward and classy premium theme designer – simply named “Elegant Themes“.

Who is Elegant Themes?

Elegant Themes is owned by a designer named Nick Roach. This means that all of the designs and code that is produced from Elegant Themes is from this mighty fellow. According to Nick:

I created this website to provide WordPress themes of quality and integrity. I craft my themes with a goal of simplicity and professionalism and strive to inject each design with a dose of modest elegance. I believe that your website is not just a tool, it is an integral part of your identity. My job is to respect each customer by providing attractive and userfriendly templates that will help you achieve your online goals.

What’s so special about Elegant Themes?

Quality over quantity. Elegant Themes is hardly a large collection – I mean, there’s only about 30 downloadable themes at the time of this writing. But note they are quite high quality. Check out some of them below:

Wooden

Very down to earth, classy and professionally done – this theme can transform your blog into a modern website wonder.

Lumin

Soothing to the eye with subtle textures and sharp, detailed accents – this theme is packed with visual amenities that scream WEB 2.0!

GrungeMag

Semi-magazine, semi-newspaper – beautiful textures, slider, thumbnails – simply stunning.

Evid

Create your own “Hulu” styled video website with this theme:

Deviant

The ultimate grunge look! Random page tears, crumpled paper, dirty textures – you want your blog to stand out from the crowd – this be the theme for you!

Like Nick said – “each design is injected with a dose of modest elegance”. With each theme you will find excellent color schema, superb use of typography, plenty of textures, just the right amount of Javascript, and above all – originality. The themes obviously took time to build.

You Can’t Beat 20 Bucks a Year!

I don’t think I can elaborate on this any further. $20 dollars a year gives you unlimited access to all of Elegant Themes. Whether you’re a blog owner, an entrepreneur, or even a web developer – you’ve already won by having this arsenal of elegant designs to beautify your websites; all for about the same price as a bucket of fried chicken. Head on over to Elegant Themes!

This tutorial will show you how to create a simple style switcher from your themes options panel. It will have a single drop down list with all the available styles to pick from. Once saved – your theme will switch to the selected style. Ready to get started – let’s begin:

Part 1 – Set up functions.php

First thing you need is a functions.php file. A functions file is an optional “plugin” type of file you can include in your theme directory folder. One of its’ purpose is to setup administration options for your theme – which is exactly what we’re doing. Create a file and name it “functions.php” and paste the code below. Note that you need to change variables that define your theme name ($themename) and the short name ($shortname) to match your themes:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php 
 
$themename = "My Sweet Theme";
$shortname = "mst";
$options = array (
array( "name" => "Style Sheet",
	"desc" => "Enter the Style Sheet you would like to use for Sweet Ass Theme",
	"id" => $shortname."_style_sheet",
	"type" => "select",
	"options" => array("default", "green", "blue", "yellow"), 
	"std" => "default"),
);
?>

The above code initializes your theme options structure. First it defines several variables, including a multi-dimensional array (which will become our drop down list containing the four selectable options that will dictate our style sheets). Next is to copy the code below. This code loops through each iteration of the array we declared previously. It assigns a type of form field, displays labels and applies the correct descriptions etc. It also includes several functions that saves the form data, resets information and displays status messages etc. It’s a wee bit technical – so its better if we simply copy and paste the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

 
<?php
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", "".$themename." 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) {
switch ( $value['type'] ) {
 
case "open":
?>
<table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
 
<?php break;
 
case "close":
?>
 
</table><br />
 
<?php break;
 
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
<td valign="top" colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
 
<!--custom-->
 
 
<?php break; 
case "sub-title":
?>
<h3 style="font-family:Georgia,'Times New Roman',Times,serif; padding-left:8px;"><?php echo $value['name']; ?></h3> 
<!--end-of-custom-->
 
 
<?php break;
 
case 'text':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
<td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?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></td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php
break;
 
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
 
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
<?php break;
 
}
}
?>
 
<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
}
add_action('admin_menu', 'mytheme_add_admin');
?>

Test out your theme options by going under the “Appearance” section > “Your Theme Name Options” tab. You will see the drop down list with the selectors already in place. Once you hit “Save Changes” – it saves your data. While clicking “Reset” sets it back to the default selector. We also see nice status messages appear on top each time we update.

Part 2 – Create the Style Sheets

Create four .css files that correspond to the drop down list selections we defined in our functions.php. The names do not have to exactly match the selectors (but is wise to have some meaningful relation to the names). Save these four files in the root directory of your theme:

style.css – this style sheet is for a black background page with white colored fonts.

1
2

/* CSS Document */
body {background:#000000; color:#FFFFFF;}

green.css – this style sheet is for a green background page with white colored fonts.

1
2

/* CSS Document */
body {background:#3bae09; color:#FFFFFF;}

blue.css – this style sheet is for a blue background page with white colored fonts.

1
2

/* CSS Document */
body {background:#038aba; color:#FFFFFF;}

yellow.css – this style sheet is for… you get the picture.

1
2

/* CSS Document */
body {background:#f6f658; color:#333333;}

Part 3 – The Switch Statement

Now that we have our options working in the back end, and we have our four style sheets sitting in the root folder waiting to be called, all we need now is a way to flip the style sheets in our header file. We achieve this by using a standard switch statement. A switch statement in php is an alternative to the the “if…else” statement. It uses the case keyword which we use to match our selectors to execute a statement that calls the appropriate style sheet. In the default header.php file – look for the line of code below and delete it:

1

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

This is the standard call for the default style.css file which we no longer need. Next, paste the code below inside your header.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
	global $options;
	foreach ($options as $value) {
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
	}
	?>			
	<?php switch ($mst_style_sheet) {
		 case "default":?>
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<?php break; ?>	
	<?php case "green":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/green.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "blue":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blue.css" type="text/css" media="screen" />
	<?php break; ?>
	<?php case "yellow":?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/yellow.css" type="text/css" media="screen" />
	<?php break; ?>	
	<?php }?>

The above code is quite self explanatory. First it grabs whichever values we’ve stored in our theme options. Second – is the switch statement for our drop down list, followed by cases for each entry – with its unique statement calling the style sheets.

Now if you go back to your style switcher and select “blue” – your theme style should switch to blue – and so on and so forth.

You can have as many styles as you wish to integrate in your options. As well as the amount of customization in the actual .css files is completely up to you. You can download the source files from this link – simply add these files in your theme folder and change some values – and your theme will instantly have it’s own style switcher.

Argyle’s Drudge has a very narrow content area of only 746 pixels. I chose to stay away from the standard 960 grid design because I find that grunge layouts don’t seem to play well with it. Speaking of grid based design, find this article about lining up your posts perfectly within the grid. As I was saying – the whole point of grunge is random and spontaneous – conforming to a grid just doesn’t fit.

More Details:

The pale blue watercolor splash background is courtesy of my Backgrounds etc. The beautiful hand sketched fonts is known as “Fail Font” and can be downloaded from DaFont.com. Note that since “Fail Font” is free – it’s the perfect opportunity to use Cufon in your coding. Cufon is the technology that enables you to use any kind of font in your pages (read article).

Argyle’s Drudge is completely free to use for your next theme of choice. May it be WordPress, Blogger, Typepad: all I ask in return is for you to follow my updates in Twitter or leave a comment below.

Download Argyles Drudge.

The Home Page

The Garamond’s home page mimicks a magazine layout. This was made possible without any special wordpress queries, nor does it filter by categories. Instead, the latest post is automatically styled different. Thanks to this neat trick by Ruhani Rabin. The feature image and the thumbnails are automatically resized upon client request. Meaning, you can upload any size image (preferably wider than 540 pixels – which is the size of the container), assign it to a custom field – and voila! Images are cropped, zoomed and sharpened when once the browser hits it. The code I used is from Darren Hoyt known as TimThumb.

The Inner Pages

The Garamond is a bloggers theme. Traditional templates are intact: search, archive, category etc. I also included an authors bio at the end of each single post, as well as an author template which grabs all their articles. I went a little overboard in styling the subheadings for the post (shown below). The default font family used is of course – Garamond; although since it is not a standard font – Georgia is used as back up. The contrast between the larger text and the tiny Verdana is striking – which I felt was good.

Other Features

The two sidebars and the footer are all widget driven. Comments support Gravatars, pagination as well as multi-level threads. I’ve also added a random quote container right below the header – which requires the Stray Quotes plugin by Italyisfalling.com


You can view the demo from this link, or download directly from here. All I ask is for you leave a comment below – or follow my updates via twitter.

The problem

For anyone who’s developed a WordPress theme would know how to break it up in templates: header.php, sidebar.php , footer.php etc. And as I’ve mentioned: you control the background image (if you want it to span the entire page) usually in the body tag of your HTML. The problem is – the body tag comes BEFORE any other tag in your templates.

For example, take a look at the screenshot of a typical header.php file below. It shows the body tag where you apply a different property value in the CSS file each time you want it unique from another page:

The problem is, in your special template, you’ve already called the get header file:

The Answer – Conditional Tags

WordPress is built is such a way that you can control almost every aspect of your pages. One useful snippet is known as Conditional Tags. Conditional tags can be used in your templates to change what is displayed on a particular page – like the background image. Examples of conditional tags are: is_single(), is_front_page() or is_admin(). For more information on Conditional Tags – see the this link from WordPress Codex library. In our case – we’re going to use the tag is_page_template().

Step 1: Insert the PHP

Open your header.php in your text editor. You’re going to add a conditional statement in inside the opening body id tag. In my case, I’m using three different backround images. Two of them, I want to apply in two individual templates, while the rest of the pages share a default image:

1
2
3
4
5
6
7
8

<body id="
<?php if (is_page_template('template-diff-bg-demo1.php')){
       echo "template-diff-bg-demo1";} 
elseif (is_page_template('template-diff-bg-demo2.php')){
       echo "template-diff-bg-demo2";
}else{
echo "default";
}?>" >

Explanation: If the template used is named “template-diff-bg-demo1.php”, echo a body id of “template-diff-bg-demo1”, or if template used is named “template-diff-bg-demo2.php” use body id of “template-diff-bg-demo2”, otherwise – just use body id of “default”.

Step 2: The CSS

Open your styles.css. We’re going to match the body ids that are going to be called each time you switch page templates. In our case – we need three different ids:

• body# template-diff-bg-demo1 – a different background
• body# template-diff-bg-demo2 – another background
• body#default – the default background

1
2
3

body#default { background:url(images/default-bg.jpg) top center no-repeat #000000; }
body#template-diff-bg-demo1 { background:url(images/default-bg2.jpg) top center no-repeat #000000;}
body#template-diff-bg-demo2 { background:url(images/default-bg3.jpg) top center no-repeat #000000; }

Conclusion

There you have it. We dynamically changed the body ids of our theme – according to specific page templates. Changing the body ids allowed us style them differently in our stylesheet. This is just one of many possibilities in displaying content (or in our case – style) by using WordPress’ conditional tags. Check out the demo using the code above from this link. Happy Coding!