Skip to content

Make A Widget Ready Footer In WordPress

One of my favourite features of both [b] and [wp] has to be the footer. With three columns and being widget ready, it’s pretty awesome!

How do you create something like this? It’s actually pretty simple. First, you need to create the boxes with some CSS. I’m sure I’m doing this really inefficiently, but hey nevermind. Do it this way and it’s easier later on to replace a box with a widened other box.


.footerinside {
	width:292px;
	padding:10px;
	float:left;
	margin:10px 10px 10px 0;
	background:#fff;
	height:460px;
}
.footerinside p {
	font-style:italic;
	color:#555;
	font-size:80%;
}
.footerinside li {
	margin-left:20px;
	padding:5px 0;
	list-style:square;
	}

.footerinsideright {
	width:292px;
	padding:10px;
	float:right;
	margin:10px 0 10px 0;
	background:#fff;
	height:460px;
}

.footerinsideright p {
	font-style:italic;
	color:#555;
	font-size:80%;
}
.footerinsideright li {
	margin-left:20px;
	padding:5px 0;
	list-style:square;
	}

Next, open up your footer.php file and add the following:

 <div class="footerinside">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
		<h3>Widgetised area</h3>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Left widget</p>
		<?php endif; ?>
	</div><!-- end footer left -->

	<div class="footerinside">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Center') ) : ?>
			<h3>Best of <?php bloginfo('name'); ?></h3>
			<p><b>The best of <?php bloginfo('name'); ?></b> - the most commented posts.</p>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Center widget</p>

		<?php endif; ?>
	</div><!-- end footer central -->

	<div class="footerinsideright">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
		<h3>Widgetised area</h3>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Right widget</p>
		<?php endif; ?>
	</div><!-- end footer right -->

What we’ve just added are three widget ready areas to our footer. You’ll need to activate these widget ready areas using the functions.php file, as we discussed last week:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Left',
	    'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));

	if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Center',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));

	if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Right',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));	

And with that, we’re done! You’ve now added to your WordPress [theme] an awesome three column footer which is widget ready! Any questions, feel free to leave a comment. And want a theme with this built in? Check out [b].

Alex Denning

20 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Vessna Storiae
September 22, 2015 2:13 pm

Everything’s ok, but I have one problem. I can’t see Footer Left area in Dashboard – so I can’t add any widgets to this footer. Center and Right work fine. No idea what’s going on.

Can anyone help me, please?

Rodolfo
October 14, 2012 12:15 pm

Alex, this was perfect. Thanks a million

Rohith VR
October 11, 2012 7:06 pm

i got the extra sidebars to work.. thanks.. but have trouble expanding my present website layout.. sigh.. great post and great help!

Pak Sodikin
September 17, 2012 12:49 pm

Thank you for sharing knowledge. Now, I know how to add three widgets in the footer. And my blog to be more beautiful.

Kulwant Nagi
September 22, 2011 11:33 am

Thnx thnx thnx a lot.. u solved my big problem.. This Code is perfect and working Fine on my Blog… Hats Off to your coding…

See u Soon… 🙂

Akshit
May 30, 2011 12:34 pm

It is showing an error in mine :
Fatal error: Call to undefined function get_footer1() in C:\xampp\htdocs\wordpress\wp-content\themes\trial\index.php on line 84.

I couldnt understand the error .My line 84 just has “”. What could be the problem ?

brian
February 18, 2011 9:35 am

I need to add one other thing. In the sidebar on my mylardreams.com site, there is an artifact at the top of the sidebar that I can’t get rid of. That first “Our Sponsors” box that is empty at the top of the page isn’t supposed to be there. On the widgets page the “Pages” widgets is the first box in the sidebar. Any idea how to get rid of that top box?

brian
February 18, 2011 9:29 am

I’ve tried using this to add three widget areas to my blog, mylardreams.com, and I’m having some problems.

First, I was able to have two footer widget sections show up on the widgets page where I could add widgets to those areas, but the third section doesn’t show up.

Second, I can’t seem to get the widgets centered in the bottom of my blog. They’re spaced too far apart.

Any help?

JerrySichting
February 15, 2011 2:21 pm

Awesome tutorial, are there any popular footer widgets we can download and install instead?

Shauna
August 18, 2010 10:55 am

Thanks for the great tutorial. But I can’t seem to get the footer to be an active widget. I can see it on my web site, but it doesn’t show up in my “widgets.” I tried putting the code for my functions.php in between but that failed. Thanks for your help.

kelly
August 12, 2010 7:55 am

Just implemented this on my site…how do you make columns expand as content expands? Will give credits for this tip in awhile. Thank you!

D S
July 20, 2010 8:38 pm

thanks, worked out well, will have a new footer soon 😉

Chad
July 13, 2010 1:47 am

Thanks for the code….everything worked great. The three column layout at the footer really steps up the design of a blog. I started with the Neutra template but have made several revisions to get a look that fits with my company website.

RozaniGhani
February 25, 2010 9:41 am

This tutorial is very good. Its very good for non license template to modify. However, licensed template cannot edit footer intact. I’m going to solve my template using your code.

Si
January 19, 2010 8:20 pm

Managed to get the footer to work – but now it is dragging in the same content as my other three sidebars…

Si
January 19, 2010 7:26 pm

I’m trying to get this to work on my site but having problems.

IS the code above additional to the code already in my footer/css files, or should I just replace current footer code with the above?

Thanks

Simon Wells
October 12, 2009 7:26 pm

Hey great tutorial.
I am trying to get this to work on my Concept theme.
Now, I have managed to get the widget areas to appear with selected test widgets, but no matter what I do, I just can’t get it to appear in the footer, it just places it in the right sidebar.

Next step is to try and get it to be styled like the right sidebar widget area, using the top, side and bottom images.

Will let you know, if I ever get it up and running.

WordPress Tutorials
October 3, 2009 1:26 pm

Add a widgetised footer with columns in WordPress…

One of my favourite features of both Biblioteca and WPShout has to be the footer. With three columns and being widget ready, it’s pretty awesome!
……

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...