Adding a Dynamic Widget Footer to WordPress Using a Sidebar

So I’m now at the point where I’d like to be able to start putting in some advertising slots on this blog for affiliate links and for google adsense ads. That means I need a bit more control over the theme and a bit more “room” to put things. I’m also finding that a lot of widgets in the sidebar need more horizontal space than the two narrow sidebar columns allow.

Fortunately, there’s plenty of unused space in the footer of the blog — so I’m going to move some of the more wordy widgets down there — which should clear space for some 120×600 ads in the sidebars as well as other types of advertising. Also, it will make the Recent Posts and Recent Comments widgets more readable by putting them where they can spread out horizontally.

However, the theme I’m currently using doesn’t have any support for widgets in the footer!

I’m going to have to add those myself. Fortunately, it is very easy to add additional components in WordPress.

Adding Widgets to the Footer of the Blog

This post helped a lot:
https://www.wp-fun.co.uk/2009/01/06/how-to-add-sidebars-to-a-theme/

I’ll follow along the instructions from the site above and then show you where I got stuck and the workaround I found.

Step 1

In the functions.php file (one of the files that is part of every theme — and which you should create if the theme does not have one) there was already stuff set up to register sidebars for the theme. These are editable in right in the WordPress Themes Editor (if the file permissions are set to make them editable).

This is what was in my functions.php (I searched in the file for “register_sidebars” to locate it):

// Loads, checks that Widgets are loaded and working
function plaintxtblog_widgets_init() {
	if ( !function_exists('register_sidebars') )
		return;

	$p = array(
		'before_title' => "<h3 class='widgettitle'>",
		'after_title' => "</h3>\n",
	);
	register_sidebars(2, $p);

So there’s the setup for 2 sidebars. I changed the 2 to a 3 in the line above, making it:

	register_sidebars(3, $p);

Now my Widgets admin page shows 3 sidebars available!

Nothing is currently in the 3rd sidebar.

I decided to make the admin page work more clearly, by naming the 3rd sidebar footbar, so the code became:

	register_sidebars(2, $p);
	$sidebar_array['name'] = 'footbar';
	register_sidebar($sidebar_array);

So it had the same effect, except now in the Widgets admin page I had sidebar1, sidebar2, and footbar.

For more info on the register_sidebar and register_sidebars, see here:
https://codex.wordpress.org/WordPress_Widgets_Api/register_sidebar
https://codex.wordpress.org/WordPress_Widgets_Api/register_sidebars

Step 2

Now the new sidebar needs to be called in the footer.php of the theme in order to make it appear.

right under where it starts the footer:

<div id="footer">

I added this code — which defaults to displaying “This Content is Dynamic Sidebar 3” until you add a widget to the sidebar (or rather footbar in this case).

	<?php if ( !dynamic_sidebar(3) ) { ?>
	<p>This Content is Dynamic Sidebar 3</p>
	<?php } ?>
	<p class="clear">&nbsp;</p>

I can now go to wigdets menu and add widgets – but they appear all stacked vertically one on top of another (like they would be if they were along the side).

Step 3

The instructions then explain how to add to the css to make the widgets appear next to each other. While I understand the concept, adding the code below to style.css didn’t make it work.#footer div.widget

#footer div.widget
{
float:left;
margin-right:30px;
margin-left:30px;
}
#footer p.clear
{
line-height:0.001;
font-size:0.001em;
clear:both;
}

I don’t know css well enough to understand what is wrong there. I think the idea is within the div named footer (which was where this was displaying) that each widget should have 30 pixels of space to the left and right of it. That would work and be simple and self-adjusting.

However, for me, all I got was various kinds of mess.

I played around with various combinations for a while, but could not get it to do what I wanted. So it was time to do some additional searching to see what other options there are.

https://www.sueblimely.com/add-widget-ready-sidebars-to-wordpress-footers/

This is a slightly different way of handling the task. It isn’t as versatile, but it gets the job done.

Revised Step 1

I changed the functions.php to add 5 footbar widgets which I would use as 5 columns. After the initial registering of 2 sidebars, I called for 5 more named footbar1 through footbar5.

	register_sidebars(2, $p);
	$sidebar_array['name'] = 'footbar1';
	register_sidebar($sidebar_array);
	$sidebar_array['name'] = 'footbar2';
	$register_sidebar($sidebar_array);
	$sidebar_array['name'] = 'footbar3';
	$register_sidebar($sidebar_array);
	$sidebar_array['name'] = 'footbar4';
	$register_sidebar($sidebar_array);
	$sidebar_array['name'] = 'footbar5';
	$register_sidebar($sidebar_array);

Revised Step 2

I then just added calls for each footbar in Footer.php right after it starts the footer div. I put all the footbar# divs within a footbar div. Note that the text “Dynamic footbar1” etc. is commented out. Once I knew it worked (because I had all 5 of them properly arranged horizontally), I commented it out so that I’m not obligated to fill each vertical column.

<div id="footer">

<div id="footbar" >

<div id="footbar1">
<?php if ( !dynamic_sidebar('footbar1') ) { ?>
<p> <!-- Dynamic footbar1 --> </p>
<?php } ?>
</div>

<div id="footbar2">
<?php if ( !dynamic_sidebar('footbar2') ) { ?>
<p> <!-- Dynamic footbar2 --></p>
<?php } ?>
</div>

<div id="footbar3">
<?php if ( !dynamic_sidebar('footbar3') ) { ?>
<p> <!-- Dynamic footbar3 --> </p>
<?php } ?>
</div>

<div id="footbar4">
<?php if ( !dynamic_sidebar('footbar4') ) { ?>
<p> <!-- Dynamic footbar4 --> </p>
<?php } ?>
</div>

<div id="footbar5">
<?php if ( !dynamic_sidebar('footbar5') ) { ?>
<p> <!-- Dynamic footbar5 --> </p>
<?php } ?>
</div>

</div>
<div style="clear-both"></div>

Revised Step 3

I then added to the style.css formatting to make the footbar1 through footbar5 sit next to each other with a 20 pixel margin between each of them. There’s still some bugs to work out in terms of getting the text to display the fonts and colors I want, but for now at least it is showing up properly enough that I can move on to other things. The widths of each widget are fixed in the css which I don’t love, but I need to learn css better to make them more flexible.

#footbar {display:block;height:260px;background:#fff;color:#059;padding:1px 2px;text-decoration:none;}
#footbar1 {float:left;width:300px;margin-right:20px;}
#footbar2 {float:left;width:300px;margin-right:20px;}
#footbar3 {float:left;width:60px;margin-right:20px;}
#footbar4 {float:left;width:10px;margin-right:20px;}
#footbar5 {float:left;width:100px}

BONUS THOUGHTS – Using Duplicate Widgets on Multiple Sidebars

Now that there’s several sidebars set up, a new problem crops up — each widget can only be dragged to one sidebar. I found the solution for reusing widgets on multiple sidebars here. The solution is to call regist_sidebar_widget multiple times for each widget.

The same page also details how to associate different sidebars with different pages – useful if you want different ads associated with different content.

—

*** UPDATE October 9, 2014 ***
There used to be an affiliate link to Affiliate Theme here, but apparently they feel an affiliate link to them is “against Google’s Web-master Guidelines”. Which makes me wonder what they think affiliate links are, considering they are SELLING a theme called Affiliate Theme.  If you think affiliate links are harmful, then you shouldn’t be selling a product that specializes in them. Duh. What does that say about your product?

– Eric