Note that you can “widgetize” almost any of your template files, but for the sake of this article, we will take a look at just the more common, single sidebar.

First of all – What are Widgets?

According to Automattic (the company behind Wordpress), “they’re just things you can use to personalize your WordPress site without knowing HTML”. To elaborate further, widgets are like a fast way to plug in bits of code into your sidebar. Widgets are accessed via the admin panel, under “Appearance” > “Widgets”. Common widgets are Calendar, Meta, Recent Posts, the Tag Cloud and Text. Widgets are not to be confused with “plugins”. Although there are some plugins that become available as “Widgets” once you install them.

Why use Widgets?

For theme developers – it is almost a necessity for your theme to be widgetized. This means that you have to tailor your theme to non-savvy users to be able to customize your theme to use these small snippets of code without writing a bit of HMTL. It is a way to cater to their needs as well as expand and utilize the full capability of Wordpress. Check out the screenshot below of the Widgets section from the admin panel:

Now consider the user of your theme doesn’t know any web development – doesn’t this functionality come in very handy? This is why widgetizing your themes is always a good idea.

Styling Your Widgetized Sidebar

The Container Approach:

I’m sure you’ve seen this kind of sidebar. It’s one where widgets are compartmentalized or “boxed”. May it be sharp squares, faded edges or even rounded corners – the container approach is definitely one of the more popular sidebar styles around. Take a look at a typical container for a widget:

As you can see, the entire container can be drawn up by just one DIV. This is what the “before_widget” and “after_widget” name-value pairs are for in your functions.php:

Note that declaring a “sidebar-column” div for the widget container – you are now able to style unordered list items, as well as their child elements. As with my example, I’ve designated bigger icons for the parent list-style property, and a smaller arrow button for the children.

Below are a couple of good example websites that use the container approach for their sidebars:

http://www.gomediazine.com

http://www.blurbia.com/blog

The Continuous Column Approach:

This approach preserves the notion of a sidebar being – just a real bar. May it be in the right side or the left, the continuous column sidebar remains classic, simple and if done right – timeless.

Take a look at the simplicity of this style:

In this case, all I really styled is the headings of each widget. This is what the function.php’s “before_title” and “after_title” comes in handy. I used a regular H3 tag, assigning just the right font style, sufficient padding and a tiny bottom-border image – and it’s ready to go.

As mentioned, the continuous column approach gives your sidebar that “clean” look. It is used by many news and magazine style blogs in the conservative end. Two popular websites that employ the continuous column approach are:

http://www.woothemes.com/blog/

http://daily.creattica.com/

Anything Goes:

Anything goes is exactly what it implies. It is very random, no compartments, borders or even visible patterns. Although it is still a column, there is no definite distinction where widgets start or end. Note that this can only be achieved by combining the “fewest similar” widgets, along with static elements. By “fewest similar” I mean widgets that are visually different from one another. For example: “Recent Posts”, “Archives” and “Categories” widgets are all rendered as lists.

Remember – you can play with static elements and combine them with the more dynamic widgets, to give your sidebar a more arbitrary look:

Take a look at these websites that have an “anything goes” style sidebar:

http://www.webdesignerwall.com/

http://www.dawghousedesignstudio.com/

What about you? What’s your take on styling sidebars and widgets?

The Images

I only used a couple of images for the form. First is the little tab that extends just right below the edge of our browser that when clicked, shows the entire form. Second is the actual login button. Note that you don’t have to create any images at all for this form – regular CSS styling would look fine. In my case – I used rounded edges for a more stylistic look; hence the need for images:

The Form

This is where the functionality kicks in. This code came from Kriesi’s post: “Admin login in your front page”. His code is basically a valid login form that can reside in any page of your Wordpress site. An else condition is also included that shows additional options for when the user is logged in. I added a table (that’s correct, I used a TABLE! – so shoot me!) for the input fields and labels to behave and align accordingly. Of course – you can omit the table if you want to. I’ve also added several DIV elements so our form can be housed in a little box.

This part shows when the user isn’t logged in:

<div id="quick-login">
  <div id="login-form">
  <?php if (!(current_user_can('level_0'))){ ?>
  <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<table>
<tr>
<td> 
<label for="label">User</label>
</td>
<td> 
<label for="label">Password</label>
<em class="forgot"><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Forgot?</a></em></span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td> 
<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" />
</td>
<td> 
<input type="password" name="pwd" id="pwd" size="20" class="login-fields"/>
</td>
<td> 
<input type="submit" name="submit" value="" class="login-button" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</td>
</tr>
</table> 
</form>

This code shows when the user IS logged in. I’ve also included my own message for the logged in user. You should adjust this to accommodate your theme.

<?php } else { ?>
  <div id="logged-in-box">
  <p>You can now quickly edit your posts by clicking the <em>Edit This</em> &nbsp;buttons after each post</p>
<ul class="admin_box">
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> 
<li><a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">logout</a></li>
</ul> 
</div><!--logged-in-box--> 

<?php }?>
  </div><!--login-form-->	

The CSS

Now that we have all the elements in place, we can proceed with styling them. Note the color for the tab image is the background color for the entire DIV. Another important property is “display:none” – which hides the form by default. This is what jQuery will toggle to “display:block” when we’re done.

a.menu_class {float:right; background:url(images/button-toggle3.png); width:184px; height:32px; text-indent:-9999px; outline-style: none;}
  #login-form {float:right; padding:2px 10px 10px 10px ; display:none; background:#397846;}
  #login-form label {color:#FFFFFF; text-transform:uppercase; font-size:11px; padding-left:5px; font-weight:bold; font-family:verdana; position:relative; top:5px; left:0;}
  #login-form em a {color:#a1dbe6; text-decoration:none; font-size:10px; position:relative; top:5px; left:37px;}
  #login-form em a:hover {color:#999999;}
  input.login-fields {border:none; background:#444444; padding:7px 5px; margin:0 10px 0 2px; color:#FFFFFF;}
  input.login-button {width:101px; height:36px; background:url(images/login-btn.png); border:none;}
  #logged-in-box {width:456px;}
  #logged-in-box p {float:right; width:238px; line-height:14px; font-size:10px; padding:5px 10px 0 0; color:#999999;}
  #logged-in-box p em {font-style:normal; color:#a1dbe6;}
  ul.admin_box {padding:10px 20px 20px 10px;}
  ul.admin_box li{float:left; list-style:none; padding:0 10px 10px 10px; text-align:center; }
  ul.admin_box li a{text-decoration:none; color:#FFFFFF; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:verdana;}
  ul.admin_box li a:hover {color:#ccc;}

The jQuery

Our form is complete, styles and all. The last thing we need is the action. We accomplish this by adding jQuery. First of, don’t forget to reference the library and your custom script in your head section:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/js/slider.js"></script>

Then the following few lines of code is what we include in our custom script (“slider.js”).

$(document).ready(function () {
$('a.menu_class').click(function () {
$('div#login-form').slideToggle('medium');
});
});

And that’s it! You have created a slick jQuery powered login form for your Wordpress site. This particular form is designed to be placed in your header file. Note that the form will work from any template in your theme. Give the demo a try – I’ve designated a test user account so you can see how the form looks when logged in.

The project I envisioned was a full website turn around. The company was still using static pages with old style tables and in line styling. My proposal was to completely overhaul their site into Wordpress.

As you can see from above I planned on using Wordpress as a CMS. A large section that will house a jQuery Content Slider or another form of slideshow that leads viewers to try out the demo. Directly below are a set of three column containers which will pull posts from different categories. A slightly different approach for the footer – which contains six mini columns as the main sitemap.

Feel free to download this fully layered and grouped PSD file from this link. Hopefully you can find a good use for the template. If one of you should become successful in taking some company away from static pages – then I’m happy.

Usage

Blue Rooster is ready to use out of the box. The standard blog template will work with or without assigning thumbnails to your posts. In order to use thumbnails – you would have to assign custom fields to your posts with name: “image“. To learn more about custom fields – check this link from the Wordpress Codex. You DO NOT have to resize your images for the thumbnails, thanks to the Darren Hoyt for his TimThumb script which made this all possible. The thumbnails are also powered by jQuery: PrettyPhoto – which is a lightbox clone where the larger images are displayed when clicked. A link to the single post is also included with the larger image.

The Bonus Templates

If you want to use the slide show in the front page – just apply the template “template-home” to your home page. Then make this page the static page of your site. To customize the slide show – simply replace the images in the images folder. Note that there are two sets of images: the larger image and the bottom bar. The active state and non-active state of the bottom bar matches the larger image. The Testimonials section in the template are actual posts under a category: testimonials. Simply create this category and start creating posts under it. The testimonial author works as the title for this section.

The Photo Gallery page is as simple as applying “photo gallery” to a page. The images in this gallery are automatically populated from your custom field thumbnails. So in order for this to populate – you must use thumbnails in your post.

Other Stuff

A custom login form is built in the header which is also jQuery powered. Once logged in will give you quick access to the dashboard, as well as quick “Edit” links after each post. The single post page includes an author information which feeds information from your user profile and Gravatar. So to utilize this section – your user information and gravatar must be filled out. The comments section support threading and pagination.

You can demo Blue Rooster from this link. Download the theme from here. I can also release the .psd files for customization only if I get a large response (by leaving comments). Otherwise – feel free to check it out and use it for your next project.

Part 1: The Key

Using the Rounded Rectangle tool, Create a new shape of a square, with fill color #2c2c2c

Using the Add Anchor Point, add new anchors at both lower corners of the shape. Drag these new anchor points upwards to form a nice edge.

Apply a Gradient Overlay on the shape. Adjust the settings as shown below or you can choose your own gradiation.

Duplicate the layer you just created and Ctrl + T to transform. Transform it to about 90% less than the original size. Make sure you constrain the proportions.

Apply a new layer style – Stroke, with fill type as gradient, size of 3 and the rest of the settings like shown below:

Using the rounded rectangle tool and the ellipse tool, create two more shapes. The rounded rectangle will have a fill color of #ffffff, the ellipse with fill color #2c2c2c. Apply the same layer styles to both – stroke with gradient fill. Play around with the gradients and try to match the outer shapes:

Next is the shaft of the key. With the Pen Tool, start outlining the jagged edges of the key shaft. You can use a real key as a guide. I used two shapes for the shaft – one for the main, the other for the underlying teeth behind the main shaft. I also used the line tool to draw a line on top of the main shaft.

Again, apply some layer styles to the two main shapes. First is a stroke with gradient fill type – reduce the size of the stroke line to 1 and adjust the gradient colors. Do the same thing for the teeth.

The final result should be something like below. We now move on to the car alarm part.

Part 2: The Car Alarm

Hide all the layers you’ve done so far so you won’t get distracted. Starting again with the rounded rectangle tool, create a new shape – slightly bigger than our key head before. Make the radius to 50 pixels for a more rounded look. Go to “Edit” > “Transform” > “Perspective” and drag the upper handles closer to each other.

Again, apply layer styles to the new shape: An angled gradient overlay with the setting below, as well as a thick stroke with gradient fill type – again play with the shades.

The first shape should look like something like below. Note that when playing with gradient fills – there’s no exact way to do it. You just have to follow what looks right with your eye considering the light, shadows etc.

Next is to add two more shapes using the ellipse tool. One is for the keyhole which is smaller, the other for the button. Both will have stroke styles with gradient fill types. By now you should know how to play with this effect. Remember that the keyhole is to have a fill of white – or whatever background color you have, and the button is a darker red, also filled with a gradient:

And we’re done with the car alarm part. Next part is pretty easy – the key rings.

Part 3: The Rings

Start with the ellipse tool, create an oval shape (size it according to the key and the alarm). Apply layer style stroke of 1 pixel, with type gradient fill. Adjust the gradient accordingly varying colors from light grey to dark.

Duplicate the first ring twice. The duplicate rings should have a Fill (not Opacity) of 60 percent each. Adjust the angle of the gradients of each layer stroke to go in different directions. Again, its up to your judgment what looks best. You’re trying to achieve the illusion of aluminum texture with the shines.

From these three shapes – you want to duplicate them into another group. Click Ctrl – T to transform about 80 percent smaller than the first group.

And that is the final step for the rings. Next section is combining all the elements together.

Part 4: Combining Them Together

The easiest way to work with what we have so far is to rasterize the shapes into more manageable sections. Rasterizing means to flatten the shape for a different kind of editing. It is good practice to always keep your layers grouped and organized – in my case, I’ve grouped them into three sections: key, alarm and rings. To rasterize – I select one group, duplicate it and from that group I merge layers. Once its merged – the key group is going to be just a key layer, the alarm group – an alarm layer and so forth. DO NOT rasterize the original group! Its good practice to keep the vector shapes intact just in case you want to change something.

So after merging each of the groups – we should now have four layers: key, alarm and the two rings.

First rotate the key a few degrees clockwise. Put the bigger ring on top of the key layer. Using the ellipse marquee tool, select the inner section of the rings and start erasing the area where the key is supposed to be visible.

Do the same thing for the ring layer. You can use any selection tool that you’re comfortable with using: Lasso, Magic Wand – I use the pen tool because it’s more precise and have more control.

Finally, add some shadows in the places there should be shadows. I do not know of an efficient way to do this but to use the brush tool. Using the built in Photoshop shadow or glow effects apply it in the entire layer – leaving you with having to separate the layer, then erasing – this may be suitable for larger surface areas – but for our purpose, just dab a few brush spots – play with the brush types, opacity and strength, and you should have a pretty decent effect:

Do the same to the rest of the layers. You will be using a combination of rotating, erasing and painting to achieve the interlocking illusion as in a real set of keys. It is important to pay attention where the light, the shines and the shadows are supposed to be. Also, keep in mind – you may rotate your layers, but DO NOT – I repeat DO NOT resize them. Resizing rasterized layers result in extreme loss of quality. If ever you need to resize say the key image – you will have to go back to your vector layers for that. The interlocking rings, key and alarm should look something like this:

And there you have it. You’ve just created a key with car alarm entirely in Photoshop. You may download the psd file from this link. All I ask is for you leave me a nice comment below, follow me in Twitter or subscribe to my RSS Feeds.

Part 1 – Creating the Image

In Photoshop, create a new image 432 pixels by 78 pixels. Add a title for your bar, and four icons of your subscription options. In our case, we’re using an RSS feed icon, Twitter, Email and Facebook. *Icons are from WeFunction Collection. Line them up and space them evenly.

Add guides that divide each button. Also be sure to add a guide right on the top of the document. Lock the guides in place – you will need these dimensions when creating the CSS.

Multiply the canvas height by two. Make sure you click the button that keeps the canvas flushed to the bottom

Select all existing layers and create a duplicate set. Merge all the layers in that set to create a single layer which we’ll use for the hover effect of the links.

Nudge the new layer upwards – make sure it’s lined up exactly as the bottom layers. To create a hover effect – I desaturate the layer all the way to the max – making it a grayscale layer.

Make sure you hide the background layer and save the image as a .png.

Part 2 – The HTML

We’re going to need a single div and an unordered list of links to render the sprites. Make sure to add an id for each anchor tag. This is how we’ll match the image through our stylesheet.

<div id="subscribe-div">
  <ul id="subsc">
<li class="title">Keep Updated</li>
<li><a id="rss" href="#" title="Subscribe to RSS">RSS</a></li>
<li><a id="twit" href="#" title="Follow Us in Twitter">Twitter</a></li>
<li><a id="mailrss" href="#" title="Get Feeds through Mail">Subscribe By Email</a></li>
<li><a id="facebook" href="#" title="Find us in Facebook">Facebook</a></li>
</ul> 
</div><!--subscribe-div-->

Of course you have to replace the # with your links. Note that the first list item is not a link. This is just a placeholder for the title “Keep Updated” title.

Part 3 – The CSS

#subscribe-div {margin:0 auto;}
#subscribe-div ul#subsc li {display:inline; float:left; }
#subscribe-div ul#subsc li a { background:url(images/social-sprites.png);  display:block; float:left; height:78px;}

The first selector (#subscribe-div) can contain general properties of your bar. This includes overall padding, margins or positioning. The second selector (#subscribe-div ul#subsc li) – lets the browser know to display list items horizontally. The third (#subscribe-div ul#subsc li a) – calls our .png image.

#subscribe-div ul#subsc li.bar-title {background:url(images/social-sprites.png); background-position:0 0; width:156px; height:78px; text-indent:-9999px;}

This styles our list item bar-title with the “Keep Updated” leftmost section of our .png image – hence the position of 0 0 (means coordinates of 0 and 0). Next is styling the normal state of the links:

#subscribe-div ul#subsc li a#rss {background-position:-156px 0; width:68px; }
#subscribe-div ul#subsc li a#twit {background-position:-224px 0; width:65px; }
#subscribe-div ul#subsc li a#mailrss {background-position:-289px 0; width:65px; }
#subscribe-div ul#subsc li a#facebook {background-position:-354px 0; width:78px; }

The above code reflects the normal state of the buttons in our list. The only properties applied are width and background position. To get the width of each button, you have to go back to your .psd (remember applying the guides in the beginning of the tutorial). Note that not all the buttons are identical in size, thus varying in widths. To get the background position, always remember: the first value is the left coordinate and the next value is top. Since we already know that our title is 156 pixels, we know our first button (rss) is going to have a background position of -156px.

Next is the hover state.

#subscribe-div ul#subsc li a:hover#rss {background-position:-156px 78px; width:68px;}
#subscribe-div ul#subsc li a:hover#twit {background-position:-224px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#mailrss {background-position:-289px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#facebook {background-position:-354px 78px; width:78px; }

Notice I just copied the code for the normal state and re-pasted it. The only difference is the use of anchor pseudo class :hover is appended to the “a” selector, and the top value of background position is now 78 pixels. This is because we want the .png image to shift 78 pixels downward, once the mouse is hovered over each link.

The only thing left to do is to indent the text of the links. This is done in the #subscribe-div ul#subsc li a selector (text-indent:-9999px;).

And that’s it. We have finished creating a subscribe bar from an image in Photoshop, HTML and finally adding some styles with CSS. You can view the demo from this link, or download the source code from here. All I ask is for you leave a comment, subscribe or follow me in Twitter.

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:

<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

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!

A screenshot of the homepage with coda slider is shown below:

Credits

The small icons used are from Fuque icons, the larger buttons are from the amazing WeFunction, social buttons from Aquaticus and the big vector images are from stinky9. Fonts in the graphics are traditional Helvetica Nueu and Myriad Pro. The code for the slider is Niall Doherty.

You can check the live version of Eureka here, and purchase from this link.

The design uses a base of burgundy and splashes of tan for the color scheme. The icons used are from the coquette collection in smashingmagazine, while fonts are Georgia and Helvetica Nueu. The file is of high quality, fully layered and grouped. All I ask in return is for you to leave a comment below or follow me in Twitter. To download – simply click here. Have fun designing!