Customizing Your WordPress Theme Footer

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/" mce_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><p mce_keep="true"> </p> </div>

Which basically looks like:

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 mce_keep="true"> </p> <p>Powered by <a href="http://wordpress.org/" mce_href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" mce_href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a> <p mce_keep="true"> </p> <p><a href="feed:<?php bloginfo('rss2_url'); ?>"> <img src="http://example.com/images/feedicon.gif" mce_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" mce_src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon"> Blog Comments Feed (RSS)</a> <p mce_keep="true"> </p> </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>WordPress</a> and designed by <a href="http://fredexample.com/" mce_href="http://fredexample.com/" title="Fred Example Web Design">Fred Example Web Design</a><p mce_keep="true"> </p> <p><a href="feed:<?php bloginfo('rss2_url'); ?>"><img src="http://example.com/images/feedicon.gif" mce_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" mce_src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon">Blog Comments Feed (RSS)</a><p mce_keep="true"> </p> <p>Special Thanks to the following WordPress Plugins and their authors:<br> <a href="http://chip.cuccio.us/projects/contact-form-ii/" mce_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" mce_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" mce_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" mce_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/" mce_href="http://akismet.com/" title="Akismet">Akismet</a>, <a href="http://www.ioerror.us/software/bad-behavior/" mce_href="http://www.ioerror.us/software/bad-behavior/" title="Bad Behavior">Bad Behavior</a>, and <a href="http://unknowngenius.com/blog/wordpress/spam-karma/" mce_href="http://unknowngenius.com/blog/wordpress/spam-karma/" title="Spam Karma 2 Comment Spam Fighting Tool">Spam Karma</a>. <p mce_keep="true"> </p> </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'); ?> is dedicated to blogging about blogging.<p mce_keep="true"> </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/" mce_href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" mce_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" mce_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" mce_src="http://example.com/images/feedicon.gif" alt="RSS Feed Icon">Blog Comments Feed (RSS)</a> <p mce_keep="true"> </p> </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:

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:

To exclude specific categories from the list, use:

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" mce_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 mce_keep="true"> </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 mce_keep="true"> </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/" mce_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 mce_keep="true"> </p> </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" mce_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/" mce_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 mce_keep="true"> </p> Powered by <a href="http://wordpress.org/" mce_href="http://wordpress.org/" title="WordPress">WordPress</a> and designed by <a href="http://fredexample.com/" mce_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?

AbuAiman