Tag: additional widget container

(This is actually an article that should have been published right after I implemented the blog facelift. I somehow forgot about it and I found it yesterday in one of my folders).

I just sort of got bored with the way my sidebar looked and I wondered if I could add some other elements below the space that contains the left-and-right (split) sidebar. Previously, anything I add there has to be placed either in the left or right side container. I cannot add anything there that would occupy the whole sidebar width. Thus, I began searching and experimenting on how to create an additional widget container in my sidebar.

So, thanks to some generous folks out there, I learned how to do it in a manner that looks clean and professional. Of course, one could just add whatever content one wants on the sidebar by directly coding it in the sidebar.php file. But this would turn out to be messy and prone to accidental errors everytime you want to change the content. The best way then is to make an additional widget container so that any editting will need only happen at the wordpress dashboard, not on the php files.

Note that I titled this article “How I Created An Additional Widget Container in My Sidebar”, not “How to Create An Additional Widget Container”. This is because I can’t claim and even pretend to be a wordpress expert, although I plan and am working my way towards it. I learned from a lot of sources after a considerable amount of googling. The codes I present here are the codes that worked for my blog. It might not work on others. I can just probably list the sources here so you could go to them yourselves, but that would mean additional time of work relocating or re-googling them as I didn’t save my list.

Creating the Additional Widget Container On the Sidebar

1. Open the functions.php file. Locate the following code blocks:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar_top',
'before_widget' => '
<div>',
'after_widget' =&gt; '</div>
',
'before_title' =&gt; '
<div>
<h2>',
'after_title' =&gt; '</h2>
</div>
',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' =&gt; 'Sidebar_left',
'before_widget' =&gt; '',
'after_widget' =&gt; '',
'before_title' =&gt; '
<h2>',
'after_title' =&gt; '</h2>
',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' =&gt; 'Sidebar_right',
'before_widget' =&gt; '',
'after_widget' =&gt; '',
'before_title' =&gt; '
<h2>',
'after_title' =&gt; '</h2>
',
));

(Forgive me, the ‘code markup’ plugin doesn’t seem to work as perfectly as it did before. Or, I probably forgot some tweak to it to make it display code as I want it displayed.)

Some wordpress themes may present different details on this but most, if not all, have these same lines:

if ( function_exists('register_sidebar') )
	register_sidebar(array(

I wanted to add another widget container on the bottom part of the sidebar (under the split (right-left) sidebar part) that would look like the full-width container on the top portion of the sidebar.

So below the ‘register_sidebar’ code blocks, I added this code block:

if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'name' => 'Sidebar_bottom',
		'before_widget' => '

<div class="widget">',
		'after_widget' =&gt; '</div>
',
		'before_title' =&gt; '
<div class="toptitle">
<h2>',
		'after_title' =&gt; '</h2>
</div>
',
	));

As only the name ‘Sidebar_bottom’ has changed, this widget container would essentially look and function the same as the existing ‘Sidebar-top’ widget container.

2. Open the sidebar.php file. Inasmuch as this additional widget container is a bottom container, the additional code naturally would be inserted somewhere in the bottom. So, since the whole sidebar (enclosing, in my case, 2 existing widget containers) is wrapped in a div, I place the following code just before the closing <‘/’div> tag.

  <div id="sidebar-bottom">
  <?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('Sidebar_bottom') ) { ?>
   <?php } ?>
   </div>

If you want to display some message to allow you to know of any error regarding your widget container, you may change the block into:

 <div id="sidebar-bottom">
  <?php if ( !function_exists('dynamic_sidebar') ||
           !dynamic_sidebar('Sidebar_bottom') ) { ?>
    Ooopssss.....Somethings wrong yada yaddah!
   <?php } ?>
   </div>

3. Open the CSS file. Since I wanted my added widget container to look exactly like the existing top widget container, I just copied all the blocks of code in the css file that references the top widget container, changed all ‘Sidebar_top’ text into ‘Sideb_bottom’, and pasted it back somewhere in the css file . Of course, I got a feeling that there must be a shorter and more elegant way of doing it, but I was in a hurry and I was sure this will work anyway.

Additional Widget Containers Other than on the Sidebar

I found on experimentation that I could add other additional widget containers anywhere on my blog, besides the sidebars. All I need to do is follow the same basic procedure laid out above and just insert the proper codes on the proper locations.