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: http://nettuts.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:
<ul> <li><h3>Subscribe</h3> <ul> <li><a href="#">Subscribe via RSS</a></li> <li><a href="#">Subscribe via Email</a></li> <li><a href="#">Subscribe via FeedBurner</a></li> </ul> </li> <li id="ads"><h3>Ads</h3> <ul> <li>Advertise Here</li> <li>Advertise Here</li> <li>Advertise Here</li> <li>Advertise Here</li> </ul> </li> </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:
<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(Sidebar)) : ?>
<?php endif; ?>
And replace everything between the #footer div with:
<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar(Footer)) : ?>
<?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!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Mark November 4th
Footers are sooo valuable to every website. Its great when you see them being used not only for contact us and legal information! Great TUT BTW!
( )Shane November 4th
Thanks for posting.
( )James November 4th
I know it’s really popular but I never really liked the idea of stuffing tonnes of info in the footer. I can understand the reason behind it… I guess I’m just lazy.
( )Mayur Somani November 4th
Good Article. Although I don’t like the idea of putting too much information in the footer.
( )Chukki November 4th
I think there is a difference between a Wordpress as CMS or just as blog.
For some companies which use wordpress as cms it’s dubious to have such a big footer with all the news.
But for private blogs or something like that it’s a very good help to navigate the user.
( )Jammin November 4th
Nice article but afraid your site looks like a messy version of Facebook
( )Faryl November 4th
Thank! I’m getting to the point of trying to polish up my site’s layout – the wordpress tutorials have been super helpful!
( )John November 4th
very cool.
( )chris simpson November 4th
@james: i totally agree..
that said, i love the new nettuts footer!
( )John November 4th
You’re not that familiar with usability are you?
( )Sasa Bogdanovic November 4th
More important, I am of the opinion that footer should actually be FEETer and should have two feet, not one.
( )Don’t you think that web pages on two feet, with feeter instead of footer, travel to readers much better?
Chris Loftus November 4th
Sasa I agree it should be called a feeter……………….. haha
( )xQlusive November 4th
Feeter
good one. Good article Harley.
( )Scott November 4th
you could do with some padding on those H3’s, the tails of the letters are poking out.
( )Jhay November 4th
Awesome tut! I’m trying it out now. TFS!
( )Dan November 4th
This is a great topic, good stuff
( )Bryan November 4th
Excellent tutorial…thanks for sharing.
( )Ben Griffiths November 4th
Cool thanks
( )Chris November 4th
why are you putting the code for the sidebar and footer directly into index.php instead of using includes?
this tut is really sub par, and is promoting bad practices IMO and I know this isn’t tut on design but cmon’ guys
( )Harley November 4th
@jammin: facebook was t the short term inspiration for it, so no surprises there.
@chris that’s anal to push importance on that… This tutorial is about footers not includes. I did a tutorial on them a while ago. Chill buddy
@everyone else thanks for the awesome feedback! It’s a great feeling having warm reception to a new. Tut I’ve posted
( )Chris November 4th
@ Harley: anal? lol…just because a tut is on footers doesn’t mean you have to sacrifice using the default WP structure and templating system
but thats just my opinion
( )Taylor Satula November 4th
It still says that they are called eden. WRONG.. But good tut though
( )VertigoSFX November 4th
I do agree that footers are very important are are becoming more of a stylish addition to a website as opposed to the past in which they were basically a simple copyright with the text navigation. Unfortunately some footers are becoming way too over the top and are just unnecessarily large. Take for example this WP theme…I love the them for the envato tuts websites but I think the footer is just way too large…there is so much spacing it could be cut down to half that size and still have the same effect…but that is just my personal preference.
Good tut regardless….definitely worth sharing.
( )kabarmadura November 4th
great .. amazing concept
( )bob November 4th
amazing post! I must rewrite footer.
( )Web Buckets November 4th
Now I’m enlighten.. hehehe nice post… thanks a lot.. keep posting fresh ideas please…
( )Lee November 5th
Nice article. I have been a fan of the larger footer.
Chris is being a hator.. typical newb stuff
( )Ben Schulz November 5th
Inspiring Post
I redesigned my Site and i’m glad that i saw your article while i was actually working on the footer, heh.
( )swishman November 5th
cool.thank you
( )AdrianMG November 5th
Nice tut and bad presentation! Keep up the work!
( )Rachel November 5th
Since most of my sites still say copyright 1998 – I think I should get my butt in gear and work on my footers.
( )M.A.Yoosuf November 6th
sdsd
( )M.A.Yoosuf November 6th
sasds
( )S Das November 8th
In my recent WordPress theme development I have added three widgetized footer section. The theme is Fecund and implemented it in my blog.
( )Steve November 10th
Sure the presentation is a bit weak, but it’s just for demonstration purposes, so give the guy a break, eh?
Nice tutorial!
( )RocyHua November 12th
It is really a valuable plugin.
Now I can richen my Footer~
( )MMF November 23rd
Thanks
( )Ricks December 1st
Good article!! Need to use this advice on my website now!
( )John Roberts January 17th
Thanks
( )RJ February 7th
I already have a dynamic RSidebar and a static footer
( )I want to update my blog with this code but don’t
want to break my existing code – Damn…
zimmi February 15th
I am having a tough time trying to center the footer like you have here. How did you make it work? I mean with floating all the blocks to left, it doesn’t work for me.
( )zimmi February 15th
Problem solved
( )saurabh shah February 26th
wow nice .. m looking for something like this … and got it…
( )Will April 19th
Falls to pieces in IE 6.
( )Michael Clements June 25th
nice work. thanks for sharing.
( )Mohamed El-Metwaly August 13th
very nice work
( )thank you for lesson
kuld33p August 15th
Thanks a lot. I have been looking for it for a long time. Finally found one elaborated tutorial on footer widgetization. I will try it on my theme. I have been fidelling around my Vigilence theme for a long time now.
I have an idea I don’t know whether its going to get implemented soon or whether it has already been implemented.
So here is the idea, what about widgets for posts. I mean like we have widgets for sidebar and footer, can we not have widgets for posts. Some defined places in post, like post footer, post header, post left side and post right side. At these defined places we can add any widget we want. That way it will be easier for us to use any image, code or anything. It will become really dynamic. And everybody will enjoy it. If someone has already worked upon it then please let me know the source. It is even possible. Please let me know as I am not that techie.
Thanks,
( )Kuld33p
Harsh Agrawal September 13th
From the day one when I started searching for Wordpress theme, I searched for something with a footer. That is my first and minimum requirement.
( )I landed with thesis theme,but it was lacking Footer and glad I added footer on it with coding. I believe Wordpress footer has lots of advantages on terms of SEo and lowering down Bounce rate.
Joe October 11th
Footers are important.
( )Adrian October 14th
I wished I had the guts to go fool around in the CSS.
( )Bilal Ahmad November 14th
Footer is now every important for every blog. Your post is one of the best and helpful post for me to add a footer in my thesis theme.
( )Thank you s much for your help.