Tutorial: How to convert a Bootstrap site template into a WordPress website – Part 2

OK, so hopefully you’re still with me after Part 1 of this tutorial. Let’s get on with the footer

5. Convert the footer into WordPress widgets

At the moment the footer region of the front.php template looks like this. Note that we’ve also copied in the closing </body> and </html> tags that were opened in the now separate header.php file.

So, there’s some basic HTML that divides the footer into 4 columns, with a another 2 column footer underneath, then it loads all the javascript files, then there’s some lines of jquery that are binding the jquery functions from those separate js files to particular HTML elements on our page. Just looking at them here I can tell that WordPress wouldn’t like them as they are because they’re not explicitly defined as jQuery ones, they’re just using the $ variable (see this tutorial for more on WordPress and jQuery). We’re going to strip out all of the Javascript for now anyway, as that will be handled by our functions.php file later on.

We could just leave the 4 columns in the footer as they are, but it’s much more user friendly to control their content from inside WordPress, and using its widgets seems the best way to go. I don’t want that other 2 column footer beneath the 4 column one so I’m going to remove its code from my template.

The markup for our template is pretty easy as we’ll just be swapping each footer column for an empty WordPress Footer widget numbered 1 – 4. Plus we’ll add the very important wp_footer(); line as well as that’s what will be replaced with all our js files when WordPress creates each page.

Note – although this Flashmint template is using the HTML5 doc type, it isn’t using any HTML5 markup elements. It’s still using the old HTML of <div id=”footer”> for example, when it could/should be using <footer id=”footer”>. I could change this now, but it might mess up some of the CSS. Plus we’d also need to attach a script like modernizr that enables older browsers to interpret these new semantic HTML5 elements. That’s a separate issue though, and for simplicity we’ll just convert the template with its div based markup.

Here’s the new markup

That’s a lot shorter! Go ahead and cut all of that from the front.php template and paste it into a new file called footer.php

Note – the ‘if function exists’ conditional statement is basically saying ‘if there are widgets set up in WordPress, then print them’. If you just tell it to print the sidebars without checking they exist then you’d probably get a White Screen of Death if the widgets were disabled for any reason.

Next up we need to set up those 4 footer widget areas so they’ll appear in our WordPress dashboard. Create a new file in your theme directory called functions.php This is a standard file that most themes have, and we’ll use it to register our widgets, our image sizes, our javascript files and much else along the way.

Paste this in:

//REGISTER WIDGET AREAS
 if ( function_exists('register_sidebars') ) {
 register_sidebar(array(
 'name' => 'Footer Widget 1',
 'id' => 'footer1',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => 
',
 'after_title' => '
',
 ));
 register_sidebar(array(
 'name' => 'Footer Widget 2',
 'id' => 'footer2',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => 
',
 'after_title' => '
',
 ));
 register_sidebar(array(
 'name' => 'Footer Widget 3',
 'id' => 'footer3',
 'before_widget' => '',
 'after_widget' => '',
'before_title' => 
',
'after_title' => '
',
 ));
register_sidebar(array(
 'name' => 'Footer Widget 4',
 'id' => 'footer4',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '
',
 'after_title' => '
',
 ));
 }
 

Note that I have copied the class=”upper2 title3″ from the h2 elements in the original template. Yours will probably be different, but hopefully you can see that here you can choose some HTML wrappers to surround each widget and its title/body. This is useful for when you want to target them later with your CSS or jQuery. It’s probably more normal to wrap footer titles in a h4 tag than a h2 one, but again for simplicity I’ll just leave this as it is in the original template for the time being.

Save that file, and now if you go to your WordPress Dashboard and then Appearance>Widgets you’ll see your 4 new Widget areas on the right hand side. From here you can drag in any of the default blocks (like Latest posts, Search etc) or drag in a text/html block and then paste in the title and code of each of the 4 footer columns in the original template if you want to replicate it exactly.

That’s it for Part 2 – in the next part we’ll see how to load those Javascript files properly using the WordPress enqueue function…

About Ben Blankley

I've worked for and with charities of all sizes for over 20 years.
I build charity websites and help create compelling content to go in them.