WordPress Web Design – Custom Widget Area

Back in 2006, WordPress introduced the use of widgets for your sidebar. But what many people do not realise is that widgets can be used anywhere, and can prove to be very useful! In the following tutorial I will go through with you how to add custom widget areas, activate them, and assign some widgets.

Easily display a custom widget area in your WordPress theme

You can use widget areas for almost anything, and they are very easy to manage. Some ideas for use of a widget area include:

• Latest posts area
• Mini contact form
• Latest products (for an e-commerce store)
• Any custom HTML (this could even just be a random greeting)

These are some fairly basic ideas; widget areas can be used for much more advanced stuff – as long as you have the devotion to put it to the test!

Placing your Widget Where you Want it

I am going to assume that you are web designers who already know your way around WordPress themes. So first of all, you will need to place your widget wherever you want it to appear – say for example, in the footer.

You would open up the footer.php file in your theme folder and add the following code:

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('your_widget_name')) : else : ?><?php endif; ?>

This code basically says “if widgets are activate, show my widget (your_widget_name). If they aren’t, do not do anything”.

So now that you’ve placed your widget where you want it to be, you will need to activate it.

Activating your Custom Widget Area

To activate your widget you will need to open the functions.php file from your themes folder (you should only ever be editing files within wp-content; if you ever upgrade the files will remain how you left them).

In the functions.php file, you will need to add the following code (add it before the closing ?> tag):

if (function_exists('register_sidebar')) {

 register_sidebar(array(
 'name' => 'Your Widget Name',
 'id'   => 'your_widget_name',
 'description'   => 'This is your custom widget area',
 'before_widget' => '<div id="your_widget">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));

 }

You can go ahead and change most of the variables within this, except of course the ID of “your_widget_name”; this tells wordpress what widget it needs to activate.

Conclusion

Fairly easy right? That is it all done.

All you would need to do now, is log in to your back end and go to Appearance -> Widgets. You will now see a new area titled “Your Widget Name”. Here you can drag any variety of widgets and they will appear wherever you placed the first bit of code in this tutorial.

I hope this will help some of you guys, why not let me know how you used your widget area?