Urban Giraffe

Step 4 - Footer

The footer element, while not as important as the header, visually closes the web page. It also serves as an appropriate place to locate copyrights and other information that are needed on every page.

Let’s look at the code for footer.php:

There’s not a lot here really. Everything is wrapped up inside the footer element (line 1), and we have an additional terminating div (line 14) for the page element started in header.php. Following the footer element is a PHP function call:

<?php do_action('wp_footer'); ?>

This just ensures that any relevant plugins can insert their own data.

You will also notice inside the footer element (line 10):

<!-- <?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?>
seconds. -->

Anything enclosed within <!-- and --> is an HTML comment and will not get interpreted by the browser. The PHP code is still executed, and if you look in the HTML for your website you should see some statistics embedded right at the very end:

<!-- 17 queries. 0.187 seconds. -->

This is just related to WordPress database activity. If you want this information to appear to the user then remove the comment tags.

Changing the footer

The footer currently displays something like:

UrbanGiraffe is proudly powered by WordPress
Entries (RSS) and Comments (RSS).

You can insert whatever you want here. I will modify it to display some copyright information.

Now let's look at matching some footer styles to the previous header styles.

Option 1 – Full width footer
Here we match the footer to the first header option.

#footer
{
  background-color: #F6C760;
  clear: both;
  padding: 20px 20px 20px 7.5%;
  margin-top: 2em;
  height: 3em;
  color: #804A0F;
}

No explanation is necessary as no new techniques are introduced. A full width footer matches the full width header.

Option 2 – Content width footer
Here we match the footer to the second header option.

#footer
{
  margin: 2em auto;
  clear: both;
  text-align: center;
  width: 85%;
  height: 3em;
  color: #804A0F;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #F6C760;
}

Again no details are necessary. The footer matches the width of the header, with the text centred.

Option 3 – Fancy footer
Here we match the footer to the third header option

#footer
{
  clear: both;
  margin: 50px 200px 20px 0;
  color: #804A0F;
  background-color: #F6E4CA;
  border: 1px solid #F2D5AC;
  padding: 15px;
  text-align: right;
}

This is a little more interesting, and I’ve made the footer a lighter shade than the title so it doesn’t cause a distraction. It’s also offset in the opposite direction to the header, with text being right-aligned.