Creating a WordPress Theme From Static HTML: The Footer File

In this series, you've been learning how to create a WordPress theme form static HTML.
Up to this point, you have:

• prepared your markup for WordPress
• converted your HTML to PHP and split your file into template files
• edited the stylesheet and uploaded your theme to WordPress
• added a loop to your index file
• added meta tags, the wp_head hook and the site title and description to your header file
• added a navigation menu
• added widget areas to the header and sidebar.

In this tutorial, you'll finish off the footer.php file by adding the following areas to it:

• widget areas
• a colophon
• the wp_footer hook.

When you've done this. you will have a fully functioning theme. Then, in the remaining parts of the series, I'll show you how to make your theme even better by adding extra template files and featured images functionality.

What You'll Need

• your code editor of choice
• a browser for testing your work
• a WordPress installation, either local or remote
• If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
• If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.

1. Registering Widget Areas for the Footer

Registering widget areas for your footer is very similar to registering them for the header and sidebar which we did in the previous article in this series.
The different is that, in this article, we're going to register four widget area rather than just one. This means that the theme can have four widgetized areas displayed side-by-side in what's traditionally called a "fat footer."
Start by opening your functions.php file. Find the wptutsplus_widgets_init() function and add the following code inside it, below the code for the three sidebars you've already registered:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

// First footer widget area, located in the footer. Empty by default. register_sidebar(     array(         'name' => __( 'First Footer Widget Area', 'compass' ),         'id' => 'first-footer-widget-area',         'description' => __( 'The first footer widget area', 'compass' ),         'before_widget' => ' ' ,                 'after_widget' => ' '

,

        'before_title' => '

'

,

                'after_title' => '

'

    )

);

 

// Second Footer Widget Area, located in the footer. Empty by default.

register_sidebar(

    array(

        'name' => 'Second Footer Widget Area',

        'id' => 'second-footer-widget-area',

        'description' => 'The second footer widget area',

        'before_widget' => '

'

,

                'after_widget' => '

',

        'before_title' => '

'

,

                'after_title' => '

',

    )

);

 

// Third Footer Widget Area, located in the footer. Empty by default.

register_sidebar(

    array(

        'name' => 'Third Footer Widget Area',

        'id' => 'third-footer-widget-area',

        'description' => 'The third footer widget area',

        'before_widget' => '

'

,

                'after_widget' => '

',

        'before_title' => '

'

,

                'after_title' => '

',

    )

);

 

// Fourth Footer Widget Area, located in the footer. Empty by default.

register_sidebar(

    array(

        'name' => 'Fourth Footer Widget Area',

        'id' => 'fourth-footer-widget-area',

        'description' => 'The fourth footer widget area',

        'before_widget' => '

'

,

                'after_widget' => '

',

        'before_title' => '

'

,

                'after_title' => '

',

    )

);

This registers four new widget areas, each of which has a unique ID and description.
If you open the "Widgets" admin screen now, you'll see the four empty widget areas ready for you to populate:

But you still need to add the widget areas to your footer.php file to make them work properly.

2. Adding Widget Areas to the Footer File

Open your theme's footer.php file and find this code:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

class="fatfooter" role="complementary">    class="first quarter left widget-area">      class="widget-container">        class="widget-title">First footer widget area       A widget area in the footer - use plugins and widgets to populate this.            class="second quarter widget-area">      class="widget-container">        class="widget-title">Second footer widget area       A widget area in the footer - use plugins and widgets to populate this.                class="third quarter widget-area">      class="widget-container">        class="widget-title">Third footer widget area       A widget area in the footer - use plugins and widgets to populate this.            class="fourth quarter right widget-area">      class="widget-container">        class="widget-title">Fourth footer widget area         A widget area in the footer - use plugins and widgets to populate this.

Replace it with the code below:

1 2 3 4 5 6 7

class="fatfooter" role="complementary">    class="first quarter left widget-area">    class="second quarter widget-area">    class="third quarter widget-area">    class="fourth quarter right widget-area">

Now save your footer template.
You can now add widgets to your widget areas via the "Widgets" admin screen. I won't cover this here as we've already reviewed you how to do that in the previous tutorial.

3. Adding a Colophon to Your Footer

A colophon is a note at the bottom of the page with small print. It may include copyright information, or company details if your site is for a company, or other similar information. For many WordPress-based sites, many of them include a link that reads "Proudly Powered by WordPress."
In my colophon, I'm going to add a copyright notice with the date - I'll use the bloginfo() function to retrieve information about the site.
In your footer.php file, immediately after the closing
tag, add the following code:

1 2 3 4 5 6 7 8 9

class="colophon" role="contentinfo">

  class="copyright half left">

    © 2013

  

  class="credits half right">

     Proudly powered by "http://wordpress.org/">WordPress.

  

Now if you save your footer file and visit your site, you will see the colophon displayed (as well as the footer widgets):

4. Adding the wp_footer Hook

The final step is to add the wp_footer hook. You may remember that in Part 5 of this series you added the wp_head hook to the header.php file. Both of these hooks are used by plugins and both are essential for any site using your theme to work.
In your footer.php template, before the closing
tag, add the following line:

1

Finally, save your file.