Yesterday, I covered the basic code found in the footer of the WordPress Default Theme, and gave you some ideas on how to add some impact and navigation to your WordPress footer. Now, let’s look at some examples on how to customize your WordPress Theme footer.
You will need a text editor and the footer PHP file of your WordPress Theme. Make a backup copy, and copies along the way, just in case you want to take a step back from the changes you made.
Begin the customization process of your WordPress Theme Footer by determining what you want to be in the footer of your blog. Here are some ideas:
- Pages
- Categories
- Feed Links
- Subscription Information (feeds and/or email)
- Designer Credit(s)
- Quotes
- Advertisements
- Your Blog’s Purpose
- Links to Recommended Resources
- Pictures
- Credit and Thanks
- A Personal Note
- Most important or popular articles on your blog
- Links to tutorials or “must read first” articles
- Calendar of Upcoming Events
- Tags List or Tag Cloud
Really, it’s up to your imagination what you can include in your footer. Some of these can be manually created, others may involve use of WordPress template tags, code that generates content specifically for WordPress blogs. Others require WordPress Plugins.
Let’s skip all the “hidden” code and work only with the basic structure of the footer, as used in the Default WordPress Theme:
<hr />
<div id="footer">
<p>
Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a>
<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</p>
</div>
</div>
Which basically looks like:
Powered by WordPress
Entries (RSS) and Comments (RSS)
Changing the Links
For our first version of a WordPress Theme footer, let’s change the links around with some new text and make those feed links have a little more emphasis.
<hr />
<div id="footer">
<p>
<a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> is dedicated to blogging about blogging.</p>
<p>Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a></p>
<p><a href="feed:<?php bloginfo('rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Posts Feed (RSS)</a>
| <a href="feed:<?php bloginfo('comments_rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Comments Feed (RSS)</a>
</p>
</div>
</div>
Why not take things a little further and add some credit to the WordPress Plugins that keep your blog going.
<hr />
<div id="footer">
<p>
<a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?><?php bloginfo('name'); ?></a> is dedicated to blogging about blogging.</p>
<p>Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a></p>
<p><a href="feed:<?php bloginfo('rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Posts Feed (RSS)</a>
| <a href="feed:<?php bloginfo('comments_rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Comments Feed (RSS)</a></p>
<p>Special Thanks to the following WordPress Plugins and their authors:<br />
<a href="http://chip.cuccio.us/projects/contact-form-ii/" title="Contact Form">Contact Form ][</a>,
<a href="http://alexking.org/blog/2005/05/23/popularity-contest" title="Popularity Contest">Alex King's Popularity Contest WordPress Plugin</a>,
<a href="http://www.arnebrachhold.de/2006/01/07/google-sitemap-generator-for-wordpress-3-beta"" title="Google Sitemap">Arne Brachnold's Google Sitemaps Generator</a>,
<a href="http://dev.wp-plugins.org/wiki/SubscribeToComments" title="Subscribe to Comments">Subscribe to Comments</a>,
and the spam fighting trio:
<a href="http://akismet.com/" title="Akismet">Akismet</a>,
<a href="http://www.ioerror.us/software/bad-behavior/" title="Bad Behavior">Bad Behavior</a>,
and <a href="http://unknowngenius.com/blog/wordpress/spam-karma/" title="Spam Karma 2 Comment Spam Fighting Tool">Spam Karma</a>.
</p>
</div>
</div>
You can add all kinds of links, text and graphics to your blog's footer.
Adding Pages and Categories
The two WordPress template tags used for automatically generating Pages and categories are: wp_list_pages and wp_list_categories. Let's add them to the above footer code.
<div id="footer">
<p>
&a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> is dedicated to blogging about blogging.</p>
<ul class="footerlinks">
<?php
wp_list_pages('title_li='); ?>
</ul>
<ul class="footerlinks">
<?php
wp_list_categories('title_li='); ?>
</ul>
Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a><br />
<a href="feed:<?php bloginfo('rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Posts Feed (RSS)</a>
| <a href="feed:<?php bloginfo('comments_rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon" />Blog Comments Feed (RSS)</a>
</p>
</div>
</div>
The usage of 'title_li=' in the two template tags removes the headings for the list of links. If you want to have a heading, such as Categories:, before the list of links, then remove that parameter.
In the WordPress Theme's stylesheet, add a style for footerlinks to make the links appear in a line rather than a list:
.footerlinks ul {text-transform:uppercase;
display: inline;
list-style-type: none;
list-style-image:none;
margin:0; }
.footerlinks li, .footerlinks li li, .footerlinks li li li {
display: inline;
padding: 0px 5px; }
The last bit of style makes the subcategories also moves the list inline in a sentence form rather than a bulleted list. You can also add some spacing and a small border line to the left or right of the link so it looks like the links are divided up by pipe symbols [|]:
.footerlinks a {text-decoration:none;
padding: 0px 3px;
border-right: 1px solid black;}
If you don't want all of your categories or pages showing, you can change the template tag accordingly.
To include specific Pages, based upon the Page ID number, use:
<ul class="footerlinks">
<?php
wp_list_pages('include=2,5,6&title_li=' ); ?>
</ul>
To include specific categories in the list, based upon the category's ID number, excluding the others, and sorting the list alphabetically by name, use:
<ul class="footerlinks">
<?php
wp_list_categories('orderby=name&include=2,14,19&title_li='); ?>
</ul>
To exclude specific categories from the list, use:
<ul class="footerlinks">
<?php
wp_list_categories('exclude=8,14,16,22'); ?>
</ul>
Adding Photographs and Graphics to Your WordPress Theme Footer
Why not add some graphics or pictures to your footer? You can easily add static images or rotating images, or even add a "banner" of images from your flickr account going across the bottom of your blog.
To add a static image, simply place it where you want the image to appear, with the CSS style that sets the image to the left or right of the text so the text will wrap around the images.
<div id="footer">
<p><img src="http://example.com/images/photo.jpg" alt="Picture of Fred Example" class="alignleft" />
<a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> is dedicated to blogging about blogging.</p>
In Random WordPress Plugins: Rotating Banners, Header Art, Images, Quotes, and Content on Your Blog and WordPress Plugins for Images, Photographs, and Graphics, I covered a wide range of WordPress Plugins for generating random images from a variety of sources.
Using the example of the Randomize WordPress Plugin, once installed and activated, you would add the Plugin template tag where you would like the random image to appear, wrapped in a DIV tag with the style that allows the text to wrap around the image:
<div id="footer">
<p><div class="alignleft"><?php randomize(); ?></div>
<a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> is dedicated to blogging about blogging.</p>
Add Random Quotes to Your Blog Footer
I'm a big fan of quotes. I've been collecting sayings since I was a child and enjoy sharing them when I can. On my main site, I use the WP-Quotes WordPress Plugin, which allows managing your quotes from the WordPress Administration Panel. I've also written an article on Importing Quotes Into the WP-Quotes WordPress Plugin Random Quote Generator from a text file.
You can use this Plugin to put random quotes in your footer, quotes that complement your blog content and say a little about who you are and how you think. Or you can put in tips or other information so they change with every page load.
I've wrapped the Plugin tag in a conditional statement, so if you deactivate the WordPress Plugin, it will not show an error on your Theme:
<hr />
<div id="footer">
<?php
if (function_exists('wp_quotes_random')) {
echo ('<div id="quoteinfooter"<h4>Quotes<h4>');
wp_quotes_random();
echo ('</div>');
}
?>
<p>
Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a><br />
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</p>
</div>
</div>
Add some styling to the quoteinfooter division to float the quotes in a block to the right, left, or centered in the footer.
Add a Flickr Banner of Images to Your Blog Footer
To create a banner of photographs from your flickr account, you can use a WordPress Plugin for managing your flickr images, or use the flickr code for creating a dynamic badge of your flickr photos.
In the process of creating the dynamic badge, choose "horizontal" for the style or style it yourself with CSS to make the images sit in a line in your footer. However, I recommend you use the option to style it yourself as fickr puts the images in an HTML table, which is very bad design manners.
Cleaning up the code for a horizontal line of nature images from flicker, and extracting the styles to your WordPress Theme stylesheet, the footer's code looks like:
<div id="footer">
<!-- Start of Flickr Badge -->
<div id="flickr_badge_uber_wrapper">
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=5&display=latest&size=t&layout=x&source=all_tag&tag=nature&user=123456%40N06""">http://www.flickr.com/badge_code_v2.gne?show_name=1&count=5&display=latest&size=t&layout=x&source=all_tag&tag=nature&user=123456%40N06"</script>
<div id="flickr_badge_source">
<span id="flickr_badge_source_txt">More <a href="http://www.flickr.com/photos/tags/nature/">Flickr photos tagged with nature</a>
</span>
<br clear="all" />
</div>
</div>
</div>
<!-- End of Flickr Badge -->
<p><a href="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php bloginfo('name'); ?>
</a> is dedicated to blogging about blogging.</p>
Powered by <a href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a>...
Add the flickr provided CSS to your WordPress Theme style sheet and make sure to add the alignment details to make your images line up horizontally, such as:
.flickr_badge_image img {
float: left;
border: 1px solid black !important;}
What Is In Your Footer?
These are just a few examples of what you can put in your WordPress blog footer. Use your imagination and make the last thing that people see when they scroll to the bottom of your blog posts have meaning again. Help them find their way to more exciting content on your blog.
What's in your blog's footer?
Related Articles
- Celebrating Two Years - A Month of WordPress Tips
- WordPress Themes - The Ignored Footer
- WordPress.com Custom CSS - All The Styles for the Sandbox Theme
- Designing a WordPress Theme - Building a Sandbox
- Designing a WordPress Theme From Scratch
- The Secret of Successful Editing of WordPress Themes
- WordPress Tips and Tricks for Style Sheets
- CSS: Studying Your CSS Styles
- Finding Your CSS Styles in WordPress
Site Search Tags: wordpress tips, wordpress theme, wordpress theme footer, footer, theme footer, blog design, web page design, design blog footer, footer links, random images, random quotes 
Subscribe 
Via Feedburner 
Subscribe by Email
Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.
48 Comments
Great tips! Thanks you.
Hi Lorelle,
Thank you for writing this post! I have been looking for information like this. You must be looking at a list of search queries made on your blog. I was just here yesterday searching for this information.
I was tryng to find a way to widgetize the footer. I had very little luck. Most of what I found was incomplete. But it may just be easier to build out the footer manually as you have outlined here.
Again thanks for writing this post. It really helped me.
Beau
Actually, I wrote this months ago in preparation for this month of WordPress Tips.
I don’t look at my stats very often, and only when someone reminds me or I have to write an article on them. Still, always glad to help, so let’s call it “mind reading”. hee hee
Hasn’t anyone told you? WordPress Widgets are “sidebar accessories”. They haven’t made it to the rest of the template files. There is no reason why they should be limited to only the sidebar, but that’s where they are currently restrained.
For full version WordPress blogs, dig into your WordPress Theme and change it as you will to get what you want, not what others think you need. And be creative!
Thanks.
Maybe widgetize was the wrong description. I was trying to put a widget-ready side bar in the footer. I was able to declare the sidebar and get it to appear on the site just couldn’t seem to get it close to being in the footer. But, when you mentioned that the Hemingway theme’s footer was a sidebar “above” the footer, a light bulb lit up. I had been trying to put it “in” the footer. For now, the project has been shelved until I become more familiar with WordPress and PHP. I’ll just set it up manually.
Beau
What’s in your blog’s footer?
Empty Space
Seriously though, I’ll have the credits placed in the footer in a couple of days.
And thanks for the detailed guide. It cleared a few things up
Thanks Lorelle, this is great. I’ve been looking for a way to add a list of a blog’s pages to the footer.
What’s in your blog’s footer?
Credits
See, I’m such a good blogger, LOL.
this is it
I have been looking for information like this. You must be looking at a list of search queries made on your blog. I was just here yesterday searching for this information.
Thank you for writing this post!
superb tips
thanks
Awesome, thorough post Lorelle. I wish I had seen it before I published at Blog Herald- I would have linked to it. Glad you put a link in the comments.
hey, thanks for the howto, i like the quote idea most.
is there a plugin with custom quotes, lets say you create a db with your own quotes ?
regarding my footer:
personally i use it already, i am displaying the db-queries + webserver-uptime
anyway highly useful information, thx
Peter: An example random quote WordPress Plugin is described within the article, as well as a link to plenty more examples. Also, I highly recommend that you do not display queries and other private and personal information in your footer. It is no business but yours, so why add useless clutter.
thanks lorelle for the heads up, silly i have overlooked the plugin link, sorry for that. the aspect regarding “personal information” is new to me, i didnt think this way before. thanks again for a new aspect. like i said before: highly useful information
Hey Lorelle
Once again your advice is right on the money! It’s a great idea to put the top navigation in the footer of your blog because some time readers over look the top navigation and they miss out on important info.
I added the changes to my blog
I want to know whether giving of credit to a designer who designed WP theme will reduce page ranking.
@Anand:
There will be little or no change for including a link to the designer – but you will make the designer happy, and feel good giving credit where credit is due.
The issue over designer credits deals with designers and Theme and template producers who stick in ads or hidden links, or other nasty things into Themes. A simple link credit doesn’t hurt, and doesn’t have much influence over anything, except kindness, and a little promotion.
Personally, I like to add the most important inner links in the footer to be sure that all my inner pages are linked with each other. To not change shape of the main theme, I like to add them in the footer.
I enjoyed reading your posts.
By the way, I tried adding MyBlogLog and also BlogCatalog to my footer and make them appear side by side but it won’t work. What am I supposed to be doing?
@ elezend:
The issue could be a design element, or a mistake in the code. Check with the WordPress Support Forum for help or the MyBlogLog and BlogCatalog folks. Have you tried the CSS float attribute to each of the sections to float one on the right and one on the left?
My question is kind of advance.
Is there any way to make the “Previous/Next Posts” to display as Page 1, 2, 3… just like how all search engine result pages is displayed.
awesome tips. its made me think a lot more about my footer!
Hi Lorelle,
I am new to wordpress and coding, so thanks for all the tips and lessons you provide.
I used one of your tips above to change my footer and it works great! One problem I have though, I cannot make the CSS style sheet modify the the stuff under the ul tag, basically the menu links in the footer. It appear like the ‘#footer a’ CSS style from the original template is working as the menu links have the right color for both active and hover. However, the ‘#footer p’ doesn’t seem to have any effect, as that is the one that determines the size of the text and its alignment. The menu links remain alligned to the right and larger in size than everything else in the footer. I have tried to add ‘/ to the ul tag, and it doesn’t work. What am I doing wrong?
Thanks for your time!
@ HM:
Hmm, think this through. You want to modify the UL tag. Then why are you messing with anchor and paragraph tags? If you want to modify list tags, then change those in the stylesheet. UL, OL, LI, LI LI (nested lists), UL LI (specific list look for unordered lists), OL LI (specific list look for ordered lists)…and so on.
You can get very specific and change the look of a link within an ordered list such as UL LI A {whatever styles}.
Lists are messy in CSS if you really don’t have a handle on the parent/child container relationships. Give that a try.
Theoretically, I know what you mean. Going in there in there and implementing it is another story. I used the exact CSS codes you have at the top of this page. What should I add to that to achieve the desired result?
Once again, thank you for your time!
Again, there is a parent/child relationship with CSS that must be understood and explored to style a web page. I don’t know what design elements you have that may override the ones you are trying to add. I recommend that you seek out someone in the WordPress Support Forums or in a web design forum that can take the time out to prowl through your stylesheet and dig out the conflicting styles.
The more specific you are with your styles, such as #footer ul li a {styles}, the more you have a chance of overriding previous styles. If that doesn’t work, you have to find out what it styling the section first and remove or edit that.
Good luck.
See that’s the thing…there is nothing that specific under the footer style. I don’t know if I can do this, but I am going to copy/paste the entire CSS code dealing with this issue…they’re only a few lines:
@ HM:
The issue with CSS and the parent/child relationships is that some design element OUTSIDE of the footer styles may be influencing the footer styles.
Here is a trick that I do that might help. Save a copy of one of your web pages to your computer, which will also bring in the stylesheet in the folder attached to the file. Put it all in a single directory and make a backup copy, just in case. With a text editor, edit the stylesheet in a text editor. Make sure the HTML file links directly to that stylesheet in its header.
Starting at the top, using cut and paste, remove part of the styles, a good section of them. Save the file, then look at the web page in your browser. By removing that section, did your footer codes change? If not, paste it back in and remove the next section. Save. Reload the web page. Any difference in the footer? Paste the code back in and keep going. This might help you identify which “parent” is influencing your footer.
Or just copy the footer section into an HTML page along with the footer styles, style it how you want it, then paste it back in and see if it changes. You might not be styling the information right or in the right place.
From here, there is nothing more I can do without setting up a consultancy arrangement. If this fails, then hit the WordPress Support Forums for more free help. Good luck!
Thanks Lorelle! Those tips will come handy one day. For now, I am going to have to live without a footer menu. I really appreciate your help and patience!
But how do you add something to the bottom of every theme? Like google analytics? Without using a plugin?
@ Project Powder:
This article contains a lot of information on how to add anything you want to your WordPress Theme. Just follow the guidelines.
Thank you for this post – I am now using your footer nav recommendations now on a couple of my sites. Trying to customize them to fit with the current theme
Again, Thank you – you have been a great help!!
@ Tigis:
Please try the WordPress Support Forums. I’m on the road and unable to offer free help with such an extensive architectural move. Someone can help you move the information, or check in the WordPress Codex for steps on moving template tags. See Template Tags for specifics.
Oooh thank for the great post. It has helped me understand a few basic things. I can make footers just the way I want them now. Cheers!
It’d be nice if the CSS worked crossbrowser..I need to work on it
@ Fred:
Which CSS? Unfortunately, we still have to design everything with a lot of browsers in mind, but if you could be more specific which which CSS, I might be able to help.
Hiya Lorelle, and thanks for some nice tips on the footer. Do you by any chance know if there is a way to let graphics from the footer ‘climb’ up on either side of the columns? I am trying to achieve a flame/tentacle like effect on a page i am building, but i am really in doubt about how it can be done (problem being that the entire footer with graphics will always be placed beneath the last post of the page and therefore it is now able to access the area above the footer and on either side of columns). Hope you can help, thanks, Esben
@ Esben:
If you want graphics in the sidebar areas, you put them there. You can then add a matching graphic to the footer that will cross the bottom or fill in the center column, depending upon how your footer is placed within the containers. Use a background image in the CSS styles for each container where you want the image to be visible.
Thanks Lorelle, I think i will try that, maybe combined with an idea chaoskaizer gave me about adding background images on bottom left with CSS.
Thanks again, and thank you for a great blog, i keep coming back for solutions and inspiration!
/ Esben
Hi Lorelle,
Thank you for these instructions, I’ve used them to add a couple things to my footer (for now, still tweaking).
Now if I could get my site to look the same in Explorer I’d be doing good.
Still learning,
Denese
You and the rest of the world. Designing for Internet Explorer continues to be a bear, even when they promise to go totally standards and that all browser hacks will be gone in the new version. Hasn’t happened yet. I have hacks for all the various versions of IE in my Themes. Hate it.
I was using wordpress for my site. I added links to the footer and set it all up with adsense, from the theme files. It was all good but when I wanted to change themes, I would of course have to start from scratch. So I’m not using wordpress right now. I would like to, but I’m not good enough to turn my template into a wordpress one.
yes, i know what you mean tim. there are some plugins for word press that you could use.. then don’t matter too much if you change the template, but this is just about working on the footer and you always gotta do that from the template file.
You probably wish you never met me; I wish you never forget me!
Hi Lorelle,
thanks for the tips n tricks, I’m a newbie in this cyberspace space. i have read n try this trick in my web side but why my footer text can’t go to center alignment? i have tried to add text alignment in the stile sheet.css but is still remind the same in the left side.
please help with this
thanks
Have you noticed issues with variables and functions not passing to the footer.php file? I am having difficulty with variables set elsewhere within the page (both global and non-global) being available within the footer.php file. Even certain WP functions such as is_front_page() become empty when used in the footer.php file.
Are you aware of any issues or fixes for this? Using WP 2.7 self hosted.
Thanks!
Ed
I assume you’ve looked through the forums. My recommendation is to validate the code to see if there is something that might break on its way to the footer. I’ve had that happen many times. Make sure the function and tag you are using will work outside of the WordPress Loop.
I’m finding the way to customize footer of wordpress theme and I found your article.
I have been wondering about this topic,so thanks for writing. I’ll certainly be subscribing to your posts.
Hi,
Very useful piece of article.You may want to correct part:
&a href=”<?p
with
<a href="<?php
under Adding Pages and Categories.
Keep it up.
10 Trackbacks/Pingbacks
[...] In tomorrow’s article, I’ll cover Customizing Your WordPress Theme Footer. [...]
[...] Lorelle foglalkozik a témával, érdemes rajta átfutni. Először is, mit tegyünk a blog láblécébe? A [...]
[...] on WordPress wrote “Customizing Your WordPress Theme Footer” back on September 30th. She gave some great examples on how to customize and use the footer [...]
[...] Customizing Your WordPress Theme Footer How to customize your WordPress Theme footer. (tags: wordpress wordpressmods) [...]
[...] you may want to visit Lorelle on WordPress, where you read to follow along in tutorials. Here is an example, “Customizing Your WordPress Theme Footer” of the thoroughness of Lorelle’s [...]
[...] this is what the footer of Lorelle’s post on blog footer looks [...]
[...] on WordPress wrote “Customizing Your WordPress Theme Footer” back on September 30th. She gave some great examples on how to customize and use the footer [...]
[...] three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in relatively [...]
[...] on WordPress wrote “Customizing Your WordPress Theme Footer” back on September 30th. She gave some great examples on how to customize and use the footer [...]
[...] <?php wp_list_pages('title_li='); ?> </ul> Learn more about customizing at: http://lorelle.wordpress.com/2007/09/30/customizing-your-wordpress-theme-footer/ Posted in [...]