Creating a widgetized footer for your HeadwayTheme is quite straightfoward – although it can be achieved in more than one way:

1. Editing the files – hard coding the changes – not recommended, as this won’t carry across when you upgrade. Also, an error can break Headway, or cause problems which may not be obvious.
2. Within the Visual Editor – adding a ‘Widgetized Sidebar’  leaf. This is perhaps the easiest, although styling the elements can be a little confusing, requiring some overriding of styles to get the right look and feel.
3. Using easy hooks, a little custom function code and custom css. This is my preferred way, for a couple of reasons:
   • You don’t need to use linking to apply to all your site pages – with easy hooks, the changes are applied to all pages in your site.
   • You can sit the new div, within the footer area, thereby inheriting the formatting style of the existing footer – which looks smoother.
   • You can easily control the id of the div, no confusing leaf-id numbers to figure out.

The effect I wanted for the footer, was to drop the copyright elements all down to one line. And then include three widgets, which span the width of the footer equally, which I could manage from within the wordpress admin backend – no need to go into the visual editor.

Here’s what the finished footer looks like:

Because we’re going to use some wordpress code in the custom_functions.php file – here’s a quick overview of how wordpress implements widgets:

Widgets can only be added to a defined widgetized area – such as a sidebar, header or footer. Widgets are added, configured and removed in the wordpress admin backend.

So to use widgets, you first have to create or define the widgetized area. Normally Headway does this when we add a widgetized sidebar in the visual editor, but this can only create a sidebar area – or a full width horizontal area. Neither of these can be fully integrated into the footer or header.

Once the widget area has been created, we can add widgets using the wordpress widget admin.

To create the widget area as part of the footer, we need to use two sections of code:

1. We first need to create the actual area where we want to add widgets – so we use an easy hook to add this code to the section at the top of the footer.
2. We then need to register this widget area – to tell wordpress that it is an area where we want to place widgets.

Adding this code, to the footer opening easyhook, will create the widget area:

<div id="footer-widgets" class="clearfix">
<?php
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer-Widgets') ) echo '<p align="center">You can put a bunch of widgets here</p>';
?>
<div style="clear:both;"></div>
</div>

What this code does, is add a div, called ‘footer-block’. Then, if the dynamic_sidebar function doesn’t exist, or the widget area (also called “footer-block”) is empty of widgets, it displays some default text. It then adds another div, to stop the widget area overlapping the footer contents. Finally, we close the “footer-block” div.

Now we need to tell wordpress that the widget area called “footer-block” exists. Add the following code to the custom_functions.php file. This is done through the wordpress backend, under the Appearance -> Editor menu.

if (function_exists('register_sidebar'))
register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

This code first checks for the register_sidebar function, and then registers the sidebar (which is simply the widget area), called “footer-block”. It also adds some default div tags before the widget items, and the widget titles.

So now we have created the widget area with the easy hook, and we’ve told wordpress that it exists – which is known as registerting the widget area.

Now when we go into the wordpress widget admin area, we’ll see a widget area called “footer-block”. And we can drag widgets across and into it.

Finally, we need to format the widget area, so it looks right.

Add this code to the custom.css file. This is done through the wordpress backend, under the Appearance -> Editor menu.

/* footer widgets */
body.custom div#footer-widgets {width:100%;}
body.custom div#footer-widgets div.footer-item {float:left; width:30%; margin:15px;}
body.custom div#footer-widgets h2 {font-weight:bold;font-size:13px;line-height:20px;border-bottom: 1px solid #ddd; margin-bottom:4px;padding-bottom:4px;}
body.custom div#footer-widgets ul {padding:0px; margin:10px 0 0px;}
body.custom div#footer-widgets ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
body.custom div#footer-widgets ul li a {text-decoration:none;}
body.custom div#footer-widgets ul li a:hover {text-decoration:underline;}
body.custom div#footer {padding-bottom:25px;margin: 0 auto;}
body.custom #footer ul {}
/* end footer widgets */

I’ve added some extra stlying elements, so you can try different things and see the effect.

Now – simply drag some widgets (in the wordpress widget admin area) to the new widget area, try the Links widget, the Recent Posts widget, and a Text widget.

I also dropped the footer font size to 11px, and I also changed the background color of the footer, to add the darker shade. This is done in the visual editor – try the color #f5f5f5

We’re almost there.

The last part, is to compress the whole footer into a single line. First of all, in the visual editor, turn off the admin link, the top link and the headway link.

To create the single line footer, make the following change to the custom_functions.php file. Add this code:

function change_copyright(){
return '<p class="copyright">Powered by Wordpress and <a href="http://headwaythemes.com/">Headway</a> - Copyright &copy; '.date('Y').' '.get_bloginfo('name').' | <a href="'.get_bloginfo('url').'/contact-us/">Contact Us</a> | <a href="'.get_bloginfo('url').'/privacy-policy/">Privacy Policy</a> | <a href="'.get_bloginfo('url').'/terms-and-conditions/">Terms & Conditions</a> | <a href="'.get_bloginfo('url').'/sitemap/">Sitemap</a> </p>';
}
add_filter('headway_copyright', 'change_copyright');

You should be able to see how the footer is put together – change the links to the correct ones for your site.

I hope this has been useful.

all the best,

Paul.