Adding Multiple Widgets In Your WordPress Theme

I was playing around with my WordPress theme. At the moment, I have three portions in my main page, which have the same div class;  i.e div class = “box”. All of them are referring to About Me, My Service and Blog Updates. Suddenly I realize that I wanted to have something more dynamic! A theme with  maximum flexibility to be exact! Then I was thinking, I should have a sidebar widget instead of a raw html hardcoded footer. Let’s see how a widget can help to solve the problem.

The WordPress theme that I have right now supports only one sidebar widget. Let me show you how you can add in more sidebar widgets into your current theme.

<div id=&quot;sidebar_widget&quot;>
    <div class=&quot;box&quot;>
        <h2>About Me</h2>
        <p>About me description here...</p>
    </div>
    <div class=&quot;box&quot;>
        <h2>My Services</h2>
        <ul>
            <li>Custom Web Design</li>
            <li>Wordpress Theme</li>
            <li>Technical Support</li>
        </ul>
    </div>
    <div class=&quot;box&quot;>
        <h2>Blog Updates</h2>
        <ul>
            <li>Writing Functions In PHP - Return Values</li>
            <li>Writing Functions In PHP - Flexibility</li>
            <li>Writing Functions In PHP - Introduction</li>
            <li>Install WordPress In Windows</li>
        </ul>
    </div>
</div>

Registering The Sidebars

I am assuming that you are familiar with the WordPress platform; otherwise you won’t end up reading this tutorial.

To begin this tutorial, firstly you need to tell WordPress how many widget(s) that you need. Navigate to your functions.php page, the one that is in your theme folder. Without much difficulty, you will see these few lines of code.  If it’s difficult to find, search for the string called register_sidebars.

<?php
    if ( function_exists('register_sidebars') )
    register_sidebars(2);
?>

Once you have found them, all you need to do is change the number according to your requirement and then save the file. You can increase this number if you want to have more sidebars as long as your theme layout can accommodate it.

Now, go to your WordPress Admin section and browse to the widgets under the menu item called Appearance. You can see there are three sidebars listed there. You can drag your widget items into any of the sidebars to start using it.

Building The Sidebars

Here comes the part where we actually build the sidebars. If your theme has only one sidebar, locate the file called sidebar.php in your theme folder. If for some reason your theme has two sidebars, you should have the files called sidebar.php, sidebar1.php and sidebar2.php. So if you want to add another sidebar widget into your theme, you should duplicate either sidebar1.php or sidebar2.php and rename it as sidebar3.php.

In this tutorial, we will modify the theme by adding two more sidebars and let’s rename sidebar.php to sidebar1.php and duplicate this file and rename it as sidebar2.php. Add the code below into the widget template, sidebar2.php and save the file:

<div class=&quot;box&quot;>
    <ul>
        <?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar(2) ) : else : ?>
        <?php endif; ?>
    </ul>
</div>

Remember that this code, dynamic_sidebar(2) is referring to your widget template which is sidebar2.php. So for your sidebar1.php, you would call this as dynamic_sidebar(1) instead.

Just to add more flexibility to your theme, the page won’t display an empty sidebar widget if you didn’t add any widgets into your theme. Add in this default value for your widget, replacing the code above.

<div class=&quot;box&quot;>
<ul>
<?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar(2) ) : else : ?>

<h2>Sidebar 2</h2>
<p>This is your sidebar 2. You can drag your widget here from your WordPress admin section and browse to the widgets under the menu item called Appearance.</p>
<?php endif; ?>
</ul>
</div>

Calling The Sidebar

Now, we have the two sidebars ready but how do we call it? How do we place them in the area that we want in our page? You can call them from anywhere in your theme with this line of code;

<?php include (TEMPLATEPATH . '#topofpage'); ?>

or for the second sidebar,

<?php include (TEMPLATEPATH . '#topofpage'); ?>

Let’s go back to our index.php page with the current sidebar being hardcoded. Let’s update them and call this widget.

<div id=&quot;sidebar_widget&quot;>
    <?php include (TEMPLATEPATH . '#topofpage'); ?>
    <?php include (TEMPLATEPATH . '#topofpage'); ?>
    <?php include (TEMPLATEPATH . '#topofpage'); ?>
</div>

Preview your theme. You will see your new widgets appearing on your website just the way you want it. There may be some minor issues on the div alignment and positioning. I’m sure you can easily fix that with your CSS. If you have not placed any widgets yet, you will still see the default value that we’ve created earlier. You can add more sidebars in a similar way to your WordPress theme.

I hope this tutorial is helpful and enjoy blogging.