Customizing Your WordPress Theme Footer

UPDATE: WordPress now has custom menus. At the bottom of the article, I explain how to customize your WordPress Theme’s footer using Custom Menus.

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;}

Using the Custom Menu Feature in WordPress

In a recent version of WordPress, they added Custom Menus under Appearance for you to create a custom menu for your site. Most people think this is for the header area, but it can be used in the sidebar or footer as well.

In order for these to work, you must have the custom menus enabled in your WordPress Theme. If your WordPress Theme is enabled, a sidebar container will appear in the Widget panel.

If it doesn’t exist, you can add the following to the functions.php:

add_theme_support( 'menus' );

Once the custom menus are enabled, you need to include the code in the theme where you want the feature to appear using the wp_nav_menu() template tag.

wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'footerarea' ) ); ?>

The next step is to register the footerarea in the footer using register_nav_menu() in the functions.php.

Once the Theme is setup, create a custom menu by giving it a name and clicking and dragging from your Post, Page, Category, or other options to form the structure and order of the links in the footer menu. Then switch to the Widget Panel to move the custom menu widget you’ve just created to the appropriate spot on the footer widget container.

For more information on adding custom menus to WordPress:

• Appearance Menus Screen « WordPress Codex
• Function Reference/wp nav menu « WordPress Codex
• Getting Started with WordPress Custom Menus | Think Vitamin
• Adding Custom Menus to Your WordPress 3 Theme
• How to Add Custom Navigation Menus in WordPress 3.0 Themes

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.