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://net.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:
<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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Harley
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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!
Thanks for posting.
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.
Good Article. Although I don’t like the idea of putting too much information in the footer.
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.
Nice article but afraid your site looks like a messy version of Facebook :(
Thank! I’m getting to the point of trying to polish up my site’s layout – the wordpress tutorials have been super helpful!
very cool.
@james: i totally agree..
that said, i love the new nettuts footer!
You’re not that familiar with usability are you?
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?
Sasa I agree it should be called a feeter……………….. haha
Feeter :) good one. Good article Harley.
you could do with some padding on those H3′s, the tails of the letters are poking out.
Awesome tut! I’m trying it out now. TFS!
This is a great topic, good stuff
Excellent tutorial…thanks for sharing.
Cool thanks :)
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
@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 :)
@ 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
It still says that they are called eden. WRONG.. But good tut though
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.
great .. amazing concept
amazing post! I must rewrite footer.
Now I’m enlighten.. hehehe nice post… thanks a lot.. keep posting fresh ideas please…
Nice article. I have been a fan of the larger footer.
Chris is being a hator.. typical newb stuff :P
Inspiring Post ;) I redesigned my Site and i’m glad that i saw your article while i was actually working on the footer, heh.
cool.thank you :D
Nice tut and bad presentation! Keep up the work!
Since most of my sites still say copyright 1998 – I think I should get my butt in gear and work on my footers.
sdsd
sasds
In my recent WordPress theme development I have added three widgetized footer section. The theme is Fecund and implemented it in my blog.
Sure the presentation is a bit weak, but it’s just for demonstration purposes, so give the guy a break, eh?
Nice tutorial!
It is really a valuable plugin.
Now I can richen my Footer~
Thanks
Good article!! Need to use this advice on my website now!
Thanks
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…
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.
Problem solved :)
wow nice .. m looking for something like this … and got it…
Falls to pieces in IE 6.
nice work. thanks for sharing.
very nice work
thank you for lesson
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
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.
Footers are important.
I wished I had the guts to go fool around in the CSS.