WordPress widgets panel, is simple and easy to use with a sexy ajax interface.
However, the widget screen might not be enough to customize your sidebar like you really want to.

Even though you can add text widgets that contains HTML from the widget screen, I would not recommend it for three reasons:

  1. Unlike the post editor, the widgets screen doesn’t have a WYSIWYG interface, so it’s not so easy to control the layout, such as the way text wraps around an image, for example.
  2. You cannot enter javascript and php to widgets.
  3. Widgets are like plugins. The more you have, the more system resources are consumed and your blog becomes slow.

Now, before you say “you can turn the widget screen to be WYSIWYG with a plugin” or “you can add javascript and PHP to widgets after installing a plugin” – read my third reason again :-)

smart wordpress sidebar

Cutomizing your sidebar

For the case of example, let’s say you want to have a side bar that contains (top to bottom):

  1. A block of social media buttons.
  2. A banner presenting your new ebook.
  3. 4 Affiliate ad images.
  4. Tag cloud.
  5. Most popular posts.
  6. Recent Comments.

The tag cloud should have a rounded rectangle background like the following:

tag cloud

Add a fixed size image background will not be wise, because the rectangle height should expand every time tags are added.
The solution is very simple though:

This is the HTML:

//this div will have the upper background (the area at the top of the rounded box that contains 2 rounded corners)
<div id="topDiv"></div>

    <div id="main">
    //the tag cloud goes here and will have the main background (straight vertical lines in both sides of the content)
    </div>

//this div will have the bottom background (the area at the bottom of the rounded box that contains 2 rounded corners)
<div id="botDiv"></div>

And this is the CSS:

<style type="text/css">
    #topDiv{background:url(bgTop.gif) no-repeat}
    #botDiv{background:url(bgBot.gif) no-repeat}
    #main{url(bgMain.gif) repeat-y}
</style>

Where exactly should you type the above code?
Before I show you, let’s first see how WordPress grabs widgets for your dynamic sidebar.
If your WordPress theme supports dynamic sidebars, it should include 2 function calls:

  1. Inside your themes functions.php file – register_sidebar().
  2. Inside your themes sidebar.php file – dynamic_sidebar().
    This function is what actually displays the widgets you have added.

Since the tag cloud is your 4th widget, you cannot type it above or below the dynamic_sidebar() function because if you do, the tag cloud will be the first or the last widget (correspondingly).

The solution is to register 2 sidebars.

Using multiple sidebars (and some code)

To add another sidebar, replace the register_sidebar() call in your functions.php file with
register_sidebar('sidebar1');
register_sidebar('sidebar2');
Then, your code in sidebar.php should be similar to the following:

<div id="sidebar">

//the first three widgets
    <ul>
        <?php dynamic_sidebar('Sidebar 1');?>
    </ul>

//the tag cloud
    <div id="topDiv"></div>
        <div id="main">
        <?php wp_tag_cloud( $args );?>
        </div>
    <div id="botDiv"></div>

//the remaining two widgets
    <ul>
        <?php dynamic_sidebar('Sidebar 2');?>
    </ul>

</div>

Note: for more info about wp_tag_cloud() click here.

After customizing that tag cloud, let’s say you now decide to add a short bio and your image to the sidebar.
Only this time, it should be the first widget at the top so your sidebar.php should be similar to this:

<div id="sidebar">

//short bio and image
    <div id="aboutMe">
        <img src="myPic.jpg" alt="" />
            I'm Omer Greenwald.
            A web developer and a blogger.
        <a title="about me" href="http://www.webtechwise.com/about-me/">(read some more about me)</a>.</div>
    </div>

//the first three widgets
    <ul>
        <?php dynamic_sidebar('Sidebar 1');?>
    </ul>

//the tag cloud
    <div id="topDiv"></div>
        <div id="main">
        <?php wp_tag_cloud( $args );?>
        </div>
    <div id="botDiv"></div>

//the remaining two widgets
    <ul>
        <?php dynamic_sidebar('Sidebar 2');?>
    </ul>

</div>

Finally, we get a useful combination of 2 dynamic sidebars, and some manual HTML and PHP. Was it worth it? definitely!

WordPress widgets screen should be used in 4 cases in my opinion:

  1. If you don’t want to deal with code at all whatsoever.
  2. If you can’t find a simple code replacement for the widget.
  3. If you tend to change your widgets very often (like once a week or once a month. and I’m sure you don’t).
    In this case the comfort of a graphic interface is worth it.
  4. When you develop a blog for someone who is not a developer and would like to be able to customize the widgets.

How do you control your sidebar widgets? Do you combine dynamic sidebar with manual PHP code?

Topics:   | | | |