I’ve found that the term “sidebar” within WordPress can have multiple meanings. Within your index.php file you will most likely find a call to the php function get_sidebar(). This is referring to the sidebar column, sometimes called the right-hand (or left-hand) navigation column. A sidebar also refers to the location where you add all your Widgets. The Widgets control the content that appears within the sidebar (column) and will usually display lists such as your Recent Posts, Categories, Links or dozens of other items.

Since WordPress is so configurable, it’s possible to have multiple sidebar columns defined such as when you have multiple page templates set up. For example, you may have a specific page template defined for your sites static homepage. As well as defining the body content for that page, you can also define a separate sidebar in case you would like it to appear differently from the rest of the site.

It’s also possible to register multiple sidebars that contain all the widgets. This latter sidebar is what we’ll be discussing here. A typical WordPress theme may only have one sidebar configured although it’s not uncommon to have 2 or 3 or even more. Even though it’s called a “sidebar” it doesn’t need to specifically reside in the sidebar of your website. You can add a “sidebar” to anywhere in your site you want to display your widgets. A common place to include them is the site footer.

Defining your new sidebar

Adding additional sidebars to your site is relatively easy. Within your functions.php file you will most likely have something similar to the code below, for your existing sidebar.

<?php

if ( function_exists('register_sidebar') ) {

register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
));
}?>

To add another sidebar you simply need to register another instance. If you are registering more than one, then you will also need to name them. Change your functions.php file to look like the following. Take care to add in the extra line that specifies the name of your sidebar. Once these are functions are defined, you will notice the extra sidebar appear in the WordPress Dashboard under the Appearance > Widgets option. It’s here that you can drag and drop all your widgets into your various sidebars.

<?php

if ( function_exists('register_sidebar') ) {

register_sidebar(array(
'name' => 'sidebar 1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));

register_sidebar(array(
'name' => 'footer sidebar 1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}?>

You can find more details on the various parameters of the above call on the WordPress Codex.

Adding your new sidebar to your template

Within your sidebar.php file, change the call to your existing sidebar to include its name that you defined within the functions.php file earlier.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ) : ?>
<h2>Articles by month</h2>
<ul>
<?php wp_get_archives('title_li=&amp;type=monthly'); ?>
</ul>
<h2>Categories</h2>
<ul>
<?php wp_list_categories('show_count=0&amp;title_li='); ?>
</ul>
<?php endif; ?>

To add your new sidebar, you can either copy the above code or you can simply copy the following lines. Add these lines to wherever you’d like your new widgets to appear. In this example you can see from the name that I’m placing mine in the footer of my website. As before, don’t forget to specify the correct sidebar name. In the above code, the html that appears between the php statements is what will appear when there are no widgets added to your sidebar. This ‘default’ code can obviously be modified to suit your theme. In the following code, since there is no extra html, nothing will be displayed unless a widget has been added into the sidebar within your WordPress dashboard.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer sidebar 1') ) : ?>
<?php endif; ?>

You will now find that your site has two widgetized sidebars. As mentioned earlier, there’s no reason why you couldn’t include further ones. It’s simply a matter of registering the new sidebar and then including the php to display it, in the relevant part of your site template.

I’ve also published this tutorial on Twitter Study Group. It’s a great place to learn, so check it out.

Thinking of adding more widgets to your Wordpress site? Leave a comment and let me know if you found this useful. Thanks

A Tilt-Shift effect on your image gives it the impression that the subject is actually a scale model. It does this by dramatically simulating a shallow Depth of Field along with an increase in the color saturation.

To get the best effect, it’s advisable to use an image that is looking down on your subject. An image such as a busy street scene viewed from a multi-story building or where the camera is above the horizon line, works perfectly. Alternatively, you can also download the image I’ve used in this tutorial.

Step 1: Increasing the color saturation

We’ll start off by increasing the color saturation. This makes the effect more noticeable.

After opening your image, create a new Vibrance Adjustment Layer. You can do this by selecting the half-filled circle at the bottom of your Layers palette or from the Layer > New Adjustment Layer > Vibrance… menu option. The amount you increase the Vibrance & Saturation will depend on your particular image. For this image though, I’ve increased both to +40 to really exaggerate the colors.

Step 2: Adjusting the curves

Next, add a new Curves adjustment layer. Again, you can select this from the half-filled circle at the bottom of the Layers palette or from the Layer > New Adjustment Layer > Curves… menu option. Increase the highlights and decrease the shadows slightly to provide further contrast between the colors. The amount of adjustment required in the curves dialog may vary depending on the particular image used.

Step 3: Simulate the depth of field

The main effect in a Tilt-Shift image is the shallow depth of field. To simulate this, we first need to blur the image. Select your background layer (or the layer that has your image) and press Ctrl-J (Command-J on Mac) to duplicate this layer. If it’s not already, select this new duplicated layer and then select Filter > Blur > Gaussian blur… menu option. Blur your image with a Radius of 4.5 pixels.

With your blurred layer still selected, add a new Layer Mask by selecting the Add Layer Mask icon at the bottom of the Layers palette or by selecting the Layer > Layer Mask > Reveal All menu option. Make sure your Layer mask (not the image) is selected by clicking on it. Select the Gradient Tool and in the options palette, select Reflected Gradient (4th Gradient icon from the left). Also, ensure that the ‘Reverse’ checkbox is unticked. Next, drag the gradient vertically over a small portion of the image. To make sure it’s perfectly vertical, hold down the Shift key while you drag. What you are doing here is creating a mask on the blurred image so that the original image sitting on the layer below, can be seen. Since we only want to simulate a narrow Depth of Field, the gradient should be quite small. It may take a couple of goes to get the correct effect. Once you’ve added your gradient to the Layer mask, you should find that the area you dragged the cursor over will no longer be blurred.

Step 4: Fine tune your image

To ‘fine tune’ your gradient, click the small “link” icon between the image and the Layer mask (in the Layers palette) to turn it off. Making sure your Layer mask is still selected, select the Move Tool and use the Up & Down arrow keys to fine tune the position of your mask. The subject matter of your image will influence where best to position the mask to get the best effect.

Once you’re happy with the placement of your mask, your image is complete. You can now sit back and contemplate what you’re going to “miniaturise” next

I’ve also published this tutorial on The Web Squeeze.

If you found this tutorial interesting I’d love to hear so please leave a comment. Thanks.

What better way to start off the New Year than with some freebie iPhone Wallpaper.

I love the iTunes Visualiser. I could sit and watch it for hours. It certainly beats the hell out of Windows Media Player’s “Bars & Waves”. These freebie iPhone wallpapers feature the iTunes visualiser in all it’s glory. Just think of it as some New Years fireworks for your iPhone

You can download them individually below or as one complete zip file (936KB).

If you like em, feel free to leave a comment and let me know