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].


24 Responses

Comments

  • Ashfame says:

    Yes its pretty easy to widgetise any area you want.
    .-= Ashfame´s last blog ..Fix bb_attachments plugin of bbPress =-.

  • 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.

  • Just an update, with a bit of tweaking to my css, I have now got my 3 widget areas in the footer.
    Thanks for such a useful tutorial.
    .-= Simon Wells´s last blog ..New Site Launch =-.

  • Si says:

    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

  • Si says:

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

  • 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.

  • Chad says:

    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.

  • D S says:

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

  • kelly says:

    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!

  • Shauna says:

    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.

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

  • brian says:

    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?

  • brian says:

    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?

  • Akshit says:

    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 ?

  • 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… 🙂

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

  • Rohith VR says:

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

  • Rodolfo says:

    Alex, this was perfect. Thanks a million

  • Olivia Halvorsen says:

    Hello, I have used this and my widgets are appearing in my footer, but the spacing is hugely uneven, as is the size of the widgets. Can anyone help? Id also love to change the background later, but the spacing is the most important thing! Any help would be approached! http://dnhcraftcocktails.co.uk

    • fredclaymeyer says:

      Hi Olivia,

      You’ll need to style your widgets with CSS for them to appear as you’d like. From briefly playing with your site, this will probably help:

      div#footer-sidebar>div {
      width: 33%;
      display: inline-block;
      margin: 0;
      padding: 0;
      vertical-align: top;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      }

      You’ll want a CSS expert on the team in general, or you’ll run into a lot of frustration.

      Good luck!

      Fred

  • 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?

  • ? Mel?dy ? says:

    I’ve used this and most of it went well….except for one thing…
    The left footer-widget-area does not show up in my widgetspage

    What did i do wrong?
    http://melodymusic.nl