Blog

After finally getting round to redesigning this website using WordPress as a CMS, I found out how useful Widgets were in WordPress. I didn’t fully widgetise my own theme but on recent projects I have used them everywhere, really makes swapping content and changing the look of your site quick and easy, which is great for clients as they can easily swap components around without having to wait for the designer to get round to swapping them.

You will often see these widgets set up for use in the sidebars of blogs, but why stop there? You can place widgets absolutely anywhere in your site. It comes in real handy for big multi column footers which have become extremely popular today. On this site I have used widgets in the hidden header of my site to control latest posts, my dribbble uploads and my flickr images.

Stop with all the dull stuff lets get your WordPress site widgetised…

Creating a new dynamic sidebar

We will start by creating a the dynamic sidebar. Really easy we are going to place 2 new bits of code in the theme files to create a widget.

To create the dynamic sidebar, put the following code into your Theme Functions (functions.php) file. If you already have a dynamic sidebar in your theme, you should see some code that looks similar to this. Paste this section right after the existing register_sidebar block.

To create a dynamic sidebar you need to add a little code into your functions.php file.

1
2
3
4
5
6
7
8
9

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

Creating your widgets

Now we have that in place lets make a few more widgets to help maintain your site.

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

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Header-left',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Header-middle',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Header-right',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>

Take note of the names I have called my widgets, Header-left, Header-middle and Header-right, keep these descriptive so when you come back to them you know exactly where it is positioned on your page. This will now be displayed in your appearance > widgets section of your WordPress admin panel.

Positioning your widgets

Okay so that’s looking all good, next up is to place the widgets where you want them in your template. So hopefully you have divs ready and positioned in your theme where you want your widgets to be displayed. Place this code inside that div. Replacing “Header-left” with what ever you have called your widget.

1
2

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Header-left") ) : ?>
<?php endif; ?>

You can make as many widgets as you wish and place them around your theme, but please use well thought names so when you come back to them you know where they are.

All there is to do know is to populate the widgets. Go have fun!