Don't Ignore Your WordPress Footer

Footers are often an overlooked aspect of designing a site - when they can actually be kinda handy and informative. In this tutorial we'll go through some options you can have for your WordPress site.

Preface

As per usual, with these tutorials, you'll need a WordPress directory. By now, if you've been doing them you should already have one setup! If not, there are tutorials on running Wordpress locally here for Windows, and here for OS X.

We'll be going through how to create a static footer with all the information you need, then we'll make it dynamic so you can edit it all via WordPress Backend!

Download these images, and place them in a new folder in the wp-content/themes. Name the folder 'WPFooter'.

Step 1 - The WordPress code

Quickly, place this code in a new file 'style.css' within the new WPFooter folder:

/*  
Theme Name: WPFooter
Theme URI: https://code.tutsplus.com
Description: A handy WordPress footer.
Version: 1.0
Author: Harley Alexander
Author URI: http://www.baffleinc.com/
*/

If you open up your WordPress directory in a browser, navigate to wp-admin/themes.php, and select the new theme!

We'll only show a short header and a simple loop for this. Later on in the tutorial, we'll go through having multiple Sidebars (one for the sidebar, one for the footer). We'll start off with an easy base:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body>
	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<div id="wrapper">
		<div id="content">
			<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
				<div class="entry">
					<h2><?php the_title(); ?></h2>
					<?php the_content(); ?>
				</div>
			<?php endwhile; endif; ?>
		</div>
		<div id="sidebar">
			
			<!-- sidebar here -->
			
		</div>
		<div id="footer">
			
			<!-- footer here -->
			
		</div>
		<div class="clearfix"></div>
	</div>
</body>
</html>

I know that's a lot, but it's all pretty basic stuff, and really besides the point of what the tutorial is about, so it's not a huge deal. Basically some header info for a WordPress blog, a short header (that'll become a nice header picture), and a short loop to display the content.

Next up, we'll stick in a static Sidebar. Replace the 'sidebar here' comment with:

1	<ul>
2	<li><h3>Subscribe</h3>
3	<ul>
4	<li><a href="#">Subscribe via RSS</a></li>
5	<li><a href="#">Subscribe via Email</a></li>
6	<li><a href="#">Subscribe via FeedBurner</a></li>
7	</ul>
8	</li>
9	<li id="ads"><h3>Ads</h3>
10	<ul>
11	<li>Advertise Here</li>
12	<li>Advertise Here</li>
13	<li>Advertise Here</li>
14	<li>Advertise Here</li>
15	</ul>
16	</li>
17	</ul>

This is just, once again your regular sidebar. The ads we'll make pretty later on in CSS code... Now we need the interesting part: the footer.

Like I said above, it's becoming more and more prominent for Websites to have more informative and useful footers, rather than just a dumb Copyright name bar. So instead, we're gonna fill it with content to direct readers to other pages. After all, content is king, right? This is the footer:

<div><h3>Archives</h3>
	<ul><?php wp_get_archives('type=monthly'); ?></ul>
</div>					
<div><h3>Recent Posts</h3>
    <ul><?php wp_get_archives('type=postbypost&limit=10'); ?></ul>
</div>					
<div><h3>About</h3>		
    <p>Hello, this blog is about a whole lot of junk. In fact, the description is pretty self explanitory: <?php bloginfo('description'); ?>. Enjoy your stay and we hope to see you back!</p>
</div>					
<div><h3>Links</h3>		
    <ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>					
<div class="clearfix"></div>

Finally something interesting!

Already we've got a footer that's interesting. It doesn't look much like a footer right now though, so let's jump into the CSS!

Step 2 - CSS

Let's get some prettiness going. Open style.css, and let's get coding!

*{
	margin: 0;
	padding: 0;
	outline: 0;
}

body{
	background-color: #e3e3e3;
	padding: 30px 0;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
}

.clearfix{
	display: block;
	clear: both;
	width: 1px;
}

#wrapper{
	width: 960px;
	margin: 0 auto;
	background: #fff;
	padding: 30px 0;
}

We start off with some basic 'reset' info, that aligns everything, makes the text normal, and defines a class that is our 'clearfix'.

Now we'll fix up the header. Remember the images folder you unzipped at the start? There's an image in there called 'mywebsite.png'. I was lazy, and made an image with some effects for this part.

It wont display the name of your blog, but it'll display 'My Website'. This technique shows how image replacement is done via CSS safely...

h1{
	margin: 40px auto 0;
	width: 930px;
	position: relative;
	top: -30px;
}

h1 a{
	color: #b3b7ba;
	text-decoration: none;
	display: block;
	width: 203px;
	height: 38px;
	text-indent: -999em;
	background: url(images/mywebsite.png) no-repeat right top;
	float: right;
}

As you can see, the 'a' has been expanded and blocked to fit the background image of the 'My Website' image. This is a quick and dirty way to do it - also cross browser I believe!

Moving on, we now style the content section:

#content{
	padding: 30px;
	float: left;
	width: 650px;
}

h2{
	letter-spacing: -2px;
	text-transform: uppercase;
	font-size: 16px;
	margin-bottom: 10px;
}

.entry{
	margin-bottom: 20px;
}

.entry a{
	color: #164774;
	text-decoration: none;
}

Already the layout starts to form, but the Sidebar and Footer still need some work, and de-squashifying!

We can do some of the styling to the Sidebar, but not all of it. Seeing as we're aiming for universal widgets, most of the styling for the Sidebar Widgets can be done along with the Footer's.

#sidebar{
	float: left;
	width: 220px;
	margin: 0 10px;
	padding-top: 30px;
}

#sidebar>ul>li{
	margin-bottom: 10px !IMPORTANT;
}

#ads li{
	display: inline-block;
	width: 100%;
	background: #f7f7f7;
	height: 50px;
	text-align: center;
	margin-bottom: 10px;
	color: gray;
	line-height: 50px;
	border: 1px solid;
}

If you refresh, you'll notice it's still a bit squashy. Let's fix that up with some styling for the Footer and Sidebar

#footer{
	clear: both;
}

#footer div, #sidebar>ul>li{
	float: left;
	width: 220px;
	margin: 0 10px;
	background: url(images/modalBox.png) repeat-y center top;
	color: #fff;
}

#footer p{
	padding: 10px;
}

#footer a, #sidebar a{
	color: #fff;
	text-decoration: none;
}

#footer h3, #sidebar h3{
	margin-bottom: 10px;
	background: url(images/modalBoxHeader.png) no-repeat center top;
	height: 14px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	font-weight: normal;
	text-shadow: #000 1px 1px 3px;
}

#footer ul, #sidebar ul>li>ul{
	list-style: none;
	padding: 10px;
	background: url(images/modalBoxFooter.png) no-repeat center bottom;
}

#footer ul li{
	padding-bottom: 5px;
}

That's a heck of a block! But now your WordPress blog should look a lot more interesting! That also splits the 4 footer sections into 4 columns - for nice, neat UI!

All done! That's the manual part of the site done. Now that that's done though, we're going to take this one step further and make it 100% manageable through WordPress Admin.

Step 3 - Making it Dynamic

Dynamic Sidebars are a fantastic built-in function of WordPress. They're easy to use, and basically provides a way to manage more of your content through a Web Interface. Let's make our index.php sidebar-compatible.

Firstly, we'll replace the huge chunks of code that made up our Sidebar and Footer with dynamic code. Replace everything within the #sidebar div>ul with:

1	<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(Sidebar)) : ?>
2	<?php endif; ?>

And replace everything between the #footer div with:

1	<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(Footer)) : ?>
2	<?php endif; ?>

If you refresh your page, everything'll disappear. Create a new file in the directory called functions.php, and let's get coding!

We need to create two functions - both 'register_sidebar()'. Register one for the actual Sidebar, and one for the Footer.

<?php
	if(function_exists('register_sidebar')){
		register_sidebar(array('name' => 'Sidebar',
			'before_widget' => '<li>',
			'after_widget' => '</li>',
			'before_title' => '<h3>',
			'after_title' => '</h3>',
		));
		register_sidebar(array('name' => 'Footer',
			'before_widget' => '<div>',
			'after_widget' => '</div>',
			'before_title' => '<h3>',
			'after_title' => '</h3>',
		));
	} 
?>

Those arrays are the series of information to attach to each sidebar. The name (so we can select the different ones in WordPress Admin), and the information to put before/after(container) each widget, and before/after each header. Because our code is specific to h3s, we need to tell it to wrap in h3s. Our footer sections are divs, so we need to wrap them in divs instead of the default lis. Simple! If you refresh, you may or may not find content waiting for you. If not, we'll fix that in the next step.

Step 4 - The Sidebar Contents

As I said, there may or may not be content waiting. This is how you edit it. Go the WP Dashboard, and visit the widgets page via design (For WP 2.3+) (Dashboard>Design>Widgets). In the right hand column, there should be your sidebar!

You can now skip between them, save changes, revisit your page and have the content edited easily via a Web Interface instead of trawling through code! Just make sure your 'Footer' Sidebar only has 4 widgets max, as otherwise it'll start bleeding onto the next line.

Wrap up

So here takes up your last excuse not to have an interesting footer - you now know how to do it easily. It's essentially an extra sidebar. This also saves a whole lot of precious space in your sidebar that you can fill with much more important stuff such as feeds, notices, etc. If you have an interesting footer yourself, let us know about it!