Skip navigation

Customizing Your WordPress Theme Footer

WordPress ThemesUPDATE: 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/&#034; 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>


WordPress Theme footer - basic design example

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>


WordPress Theme footer - example with credit to WordPress Plugins

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>


WordPress Theme footer - example using Pages and categories in the footer

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>


WordPress Footer - example of placing a photograph in the footer

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>


WordPress Footer - Example of using a random image in the footer

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>


WordPress Footer - example of using a random quote in the footer

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>...


WordPress Footer - example of using a Flickr bar of images in the footer

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:

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

Member of the 9Rules Blogging Network


Site Search Tags: , , , , , , , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia 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.

167 Comments

  1. Posted September 30, 2007 at 5:51 am | Permalink

    Great tips! Thanks you.

  2. Beau
    Posted September 30, 2007 at 7:43 am | Permalink

    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

  3. Posted September 30, 2007 at 9:31 am | Permalink

    Actually, I wrote this months ago in preparation for this month of WordPress Tips. :D 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.

  4. beau
    Posted September 30, 2007 at 12:06 pm | Permalink

    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

  5. Posted September 30, 2007 at 2:16 pm | Permalink

    What’s in your blog’s footer?

    Empty Space :D

    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 :)

  6. Posted September 30, 2007 at 10:34 pm | Permalink

    Thanks Lorelle, this is great. I’ve been looking for a way to add a list of a blog’s pages to the footer.

  7. Posted October 1, 2007 at 3:28 am | Permalink

    What’s in your blog’s footer?

    Credits :) See, I’m such a good blogger, LOL.

  8. Posted October 1, 2007 at 10:54 am | Permalink

    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!

  9. Posted October 2, 2007 at 3:26 am | Permalink

    superb tips

    thanks

  10. Posted October 3, 2007 at 3:17 pm | Permalink

    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.

  11. Posted October 4, 2007 at 5:57 am | Permalink

    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

  12. Posted October 4, 2007 at 12:01 pm | Permalink

    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.

  13. Posted October 5, 2007 at 1:14 am | Permalink

    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

  14. glenn73
    Posted October 5, 2007 at 11:36 am | Permalink

    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

  15. Posted December 5, 2007 at 5:52 am | Permalink

    I want to know whether giving of credit to a designer who designed WP theme will reduce page ranking.

  16. Posted December 5, 2007 at 10:18 am | Permalink

    @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.

  17. Posted February 7, 2008 at 1:37 am | Permalink

    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.

  18. Posted March 23, 2008 at 8:12 am | Permalink

    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?

  19. Posted March 23, 2008 at 3:34 pm | Permalink

    @ 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?

  20. Posted May 14, 2008 at 12:13 pm | Permalink

    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.

  21. Posted June 10, 2008 at 5:23 am | Permalink

    awesome tips. its made me think a lot more about my footer!

  22. Posted July 15, 2008 at 7:05 am | Permalink

    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!

  23. Posted July 15, 2008 at 9:33 am | Permalink

    @ 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.

  24. Posted July 15, 2008 at 1:07 pm | Permalink

    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!

  25. Posted July 15, 2008 at 2:20 pm | Permalink

    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.

  26. Posted July 15, 2008 at 2:37 pm | Permalink

    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:

    #footer p span
    {
    float:none;
    }
    #footer a:link, #footer a:visited {
    color: #999;
    border:0;
    }
    #footer a:hover, #footer a:active,#footer p strong {
    color: #fff;
    text-decoration:none;
    border:0;
    }
    .footerlinks ul {text-transform:uppercase;
    display: inline;
    list-style-type: none;
    list-style-image:none;
    margin: 10px;
    }
    .footerlinks li, .footerlinks li li, .footerlinks li li li
    {
    display: inline;
    padding: 0px 5px;
    }
    .footerlinks a {
    text-decoration:none;
    padding: 0px 3px;
    border-right: 1px solid black;
    }

  27. Posted July 16, 2008 at 8:53 am | Permalink

    @ 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!

  28. Posted July 16, 2008 at 9:40 am | Permalink

    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!

  29. Posted August 11, 2008 at 9:10 am | Permalink

    But how do you add something to the bottom of every theme? Like google analytics? Without using a plugin?

  30. Posted August 11, 2008 at 10:49 am | Permalink

    @ Project Powder:

    This article contains a lot of information on how to add anything you want to your WordPress Theme. Just follow the guidelines.

  31. Posted September 24, 2008 at 10:59 am | Permalink

    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!!

  32. Posted November 1, 2008 at 12:12 pm | Permalink

    @ 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.

  33. Posted November 4, 2008 at 1:47 pm | Permalink

    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!

  34. Fred
    Posted November 12, 2008 at 2:16 pm | Permalink

    It’d be nice if the CSS worked crossbrowser..I need to work on it

  35. Posted November 13, 2008 at 12:30 am | Permalink

    @ 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.

  36. Posted November 14, 2008 at 3:31 pm | Permalink

    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

  37. Posted November 14, 2008 at 11:29 pm | Permalink

    @ 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.

  38. Posted November 15, 2008 at 3:31 am | Permalink

    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

  39. Posted December 31, 2008 at 1:42 pm | Permalink

    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

    • Posted January 2, 2009 at 6:36 pm | Permalink

      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.

  40. Tim
    Posted January 11, 2009 at 4:02 am | Permalink

    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.

  41. Pete
    Posted January 16, 2009 at 5:38 am | Permalink

    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.

  42. Posted January 19, 2009 at 1:18 pm | Permalink

    You probably wish you never met me; I wish you never forget me!

  43. Posted January 29, 2009 at 10:30 pm | Permalink

    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

  44. Posted March 31, 2009 at 8:16 am | Permalink

    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

    • Posted March 31, 2009 at 8:31 am | Permalink

      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.

  45. Posted May 8, 2009 at 4:29 pm | Permalink

    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.

  46. Posted May 22, 2009 at 2:07 am | Permalink

    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.

  47. fuki
    Posted July 9, 2009 at 7:26 pm | Permalink

    where the hell is thedamn footer.php located!?
    Everybody talks about it but noboyd posts the link.

    • Posted July 15, 2009 at 3:29 pm | Permalink

      Um, maybe because there isn’t a “link” to the footer.php. It’s a file called a template file in your WordPress Theme’s directory. You’ll find it there, in whatever Theme you are using, along with index.php, sidebar.php, and other template files. Together, these work to display a page in a browser in a modular format.

  48. Posted September 13, 2009 at 2:34 pm | Permalink

    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.

  49. muymalestado
    Posted September 28, 2009 at 1:54 am | Permalink

    So useful, Lorelle, to have this resource to consult.

  50. Posted September 29, 2009 at 9:50 pm | Permalink

    I find your posts over and over and they help me build my first blog. Thank you so much for all of your help.

  51. Posted October 17, 2009 at 3:54 am | Permalink

    you are the best wp tutor i have seen so far-u really must must be a genius with some gr8 humor.

  52. Posted December 4, 2009 at 11:39 pm | Permalink

    Thanks Lorelle. It helps me a lot to edit my wordpress footer. Can you give me clue on how to edit the footer of the theme stripey. Can’t find it in style.css..
    thanks dear.

    • Posted December 6, 2009 at 10:04 pm | Permalink

      The footer is not in the stylesheet (style.css), if you are looking for the actual template file. It is in your wp-content/themes/nameoftheme directory. The styles for the footer, however, are in your style.css file.

  53. Posted December 7, 2009 at 11:09 am | Permalink

    I added a couple lines of good old fashioned text (boring copyright message.)

    When I did, the existing copy spilled off the bottom of the default Kubrick footer graphic…no big deal to make the graphic a little taller, but reverse engineering the page layout was ummm–educational.

    It seems that the vast majority of people these days have learned to learn through osmosis rather than by learning through a structured organon. It’s the grand competition between the memorizerers and the constructors—the former are snug as a bug with 6000+ key word flavors of ‘C’, obtuse coagulations OOP reveling in fragmented stylesheets and control blocks, never blinking at the prevalence of operating system level bugs and design failures affectionately labeled as if they were bonus features–memory leaks, viruses, spyware, malware, and numerous other needless vulnerabilities and designed in obsolescence all under the sacred banner of “open desktops”—Ahem and the dying remnants of the latter still cling to the seemingly ancient, and equally forgotten days and ways, when a good programmer didn’t have to have arbitrary structure umm impressed on them by a runaway platform and market driven behemoth, when a mentor was a recognized treasure, when one could do anything with a computer by using a couple dozen keywords in that most shamefull of languages-BASIC, or the forgotten by nearly all esoteric undermagick called assembly or machine language…*shaking my nostalgic head at myself*

    ANYHOW, my point is that given all that and more, your approach and presentation of substance here was MOST enjoyable, imminently digestable and downright helpful–Thank you Lorelle!

  54. Posted December 11, 2009 at 12:32 pm | Permalink

    did you get this problem resolved?

  55. Posted December 12, 2009 at 12:11 pm | Permalink

    @Hernandez Which problem? If you are referring to mine then the answer is “yes”, I tracked down the footer background graphic and replaced it with a taller one..no code changes required.

  56. Lynne
    Posted December 13, 2009 at 5:26 pm | Permalink

    I think I got lost somewhere around the middle there but i will try again to get something meaningful in my footer

  57. Posted January 14, 2010 at 4:05 am | Permalink

    thanks for sharing this, a very helpful post to easily utilize all wordpress functions…Many thanks!

  58. Posted March 8, 2010 at 1:45 am | Permalink

    Lorelle, thanks for the blogpost on wordpress footer customization. I have been struggling with the transfer from HTML to PHP, and this helped clear it up. It’s late, so I’m going to apply it to one of my blogs tomorrow. Thanks, John

  59. Rakesh Solanki
    Posted March 9, 2010 at 10:47 am | Permalink

    cool steps to customization, thanks for sharing.

  60. Posted March 14, 2010 at 4:26 pm | Permalink

    The one thing I hate especially with some wordpress blog templates is when they have navigation in the footer.

    At the end of the day one people are at the bottom of the page they are probably there because they have finished looking at what they wanted, why put naviagtion at the bottom?

    A simple copyright and credit to the design author is all that is needed, plus perhaps a disclaimer / privacy policy etc. if they do not fit into the existing page structure of the blog.

    • Posted March 17, 2010 at 6:22 pm | Permalink

      The footer is just as important as every part of the design. To put the main navigation at the bottom of a page is indeed frustrating for typical navigation, but there is nothing to say it won’t work for some designs and sites. A photoblog for instance, since the image needs the space around it, and navigation at the bottom opens things up…but for most, no, it’s not a good idea.

      However, a footer is a perfect place for a lot of additional navigation, so the reader doesn’t have to scroll UP to find more or valuable information and content.

  61. Posted March 17, 2010 at 12:11 am | Permalink

    Thanks for sharing. Great tutorial.

  62. Posted April 8, 2010 at 2:50 am | Permalink

    Great post, am just getting used to the php code so it’s great to find such simple guides to follow.

  63. Keith Bennett
    Posted April 30, 2010 at 5:11 pm | Permalink

    Good stuff Lorelle, I had coded all morning and was getting a little cross-eyed studying your examples – but I hung in and I am glad I did. Half my sites are with Premium Themes that I’ve mastered the footer issues but many themes still have the footer issues. Thanks! Keith in Southern California

  64. Posted May 2, 2010 at 10:22 am | Permalink

    Thanks for these tips. For non-techies like us, customizing WordPress blogs are quite a challenge especially coming from the Blogger platform which was much easier.

  65. Schalk Joubert
    Posted June 18, 2010 at 3:33 am | Permalink

    I’m having problems to get my icons inline with my text?

    how should i change my css?

    #footer .social {

    color: #727272;
    font-weight: 300;
    padding-bottom: 0px;
    margin-top: 0px;
    font-size: 12px;

    • Posted July 6, 2010 at 9:15 pm | Permalink

      I do not know. I don’t know what you are trying to change nor do. Please check websites specializing in CSS or the WordPress Support Forums.

  66. Gouri
    Posted July 10, 2010 at 4:38 am | Permalink

    Is there a way to change wordpress.com footer? :)

    • Posted July 10, 2010 at 8:36 am | Permalink

      No. If you get the Extra CSS customization feature, you can customize the look and feel but you cannot add things to the footer as that part of the Theme’s code is off limits for WordPress.com members.

  67. Steven Ram
    Posted July 11, 2010 at 8:06 pm | Permalink

    Thanks for sharing this with us WordPress newbies .. sooooo informative and a real post that can be used. Cheers.

  68. Gavin
    Posted August 3, 2010 at 2:50 am | Permalink

    YES, was just looking for this. CSS/PHP has never been my strong point, and everytime I need to edit my footer I need to look around for a good tutorial. This I shall be bookmarking :) Thanks Lorelle

  69. Posted August 6, 2010 at 6:55 am | Permalink

    I would like to add my name, email and contact information to my footer on my website. I am new to wordpress and having difficulty navigating how to add this information using PHP. Can you help? I can copy and paste the current footer PHP info if that is helpful?
    Thank you very much.

    • Posted August 6, 2010 at 11:37 am | Permalink

      Then just add it per the instructions in this article. Open the footer.php file and add the HTML you wish to add. I recommend you wrap it in a DIV with a class or unique ID so you can style it appropriately, if needed, from the stylesheet.

  70. Posted August 11, 2010 at 9:29 am | Permalink

    Thanks so much for these tips. I’ve been looking to customise my footer for a while, but due to my lack of HTML or CSS knowledge it’s been difficult. Thanks once again :)

  71. Jenn Louis
    Posted August 26, 2010 at 6:56 pm | Permalink

    Awesome detailed explanation here guys! I’ve been trying to figure this out for my site, so now it’s time to get to work. Thank you!

  72. Posted September 1, 2010 at 1:25 pm | Permalink

    I used some of your advice in my blog. Thanks.

  73. Posted September 22, 2010 at 6:11 am | Permalink

    Thanks for the tips. My footer is now a little less boring.

  74. Posted September 23, 2010 at 6:20 pm | Permalink

    I’m so glad I came across this article. I’ve been having a fit and a half with my footer. I finally have most things figured out, but my biggest problem is I’m designing (free) a multi-author website, and they want the copyright displayed in the footer to change according to the post author. Could you guide me to a bit of code for that? Thanks!

    • Posted September 26, 2010 at 5:32 pm | Permalink

      Use a conditional tag statement that states “if post is by X author, use X copyright date.” The WordPress Codex has all you need to know on writing conditional statements.

  75. Posted September 26, 2010 at 5:44 pm | Permalink

    Thanks very much! That worked! Sometimes it’s hard to see the forest for the trees.

  76. Louis
    Posted September 29, 2010 at 10:31 am | Permalink

    Hi Lorelle for the sake of looking stupid , I see you are all over wordpress sites and have gained loads of info from lots of your posts, but

    <a href="” title=””> is dedicated to blogging about blogging.

    should be

    <a href="” title=””> is dedicated to blogging about blogging.

    Yes?

    Louis

  77. Louis
    Posted September 29, 2010 at 10:35 am | Permalink

    sorry your site comment wont accept the code script…
    the first
    bloginfo(‘name’)
    should be
    bloginfo(‘url’)
    otherwise you have bloginfo(‘name’);bloginfo(‘name’)
    Louis

  78. Posted September 29, 2010 at 10:43 am | Permalink

    Sorry just read my comment , not you look stupid me pook stupid if I got it wrong!

  79. Louis
    Posted September 30, 2010 at 12:49 am | Permalink

    OK, you didnt understand what I was saying , this part….

    ? php bloginfo(name); title= > < ? php bloginfo(name); ?

    should be

    ? php bloginfo('url') ; title=> < ? php bloginfo( name ); ?

    (dont copy and paste I had to edit the code or it gets rehashed by the site, just replace the first name with url!)

    All these people commented saying they used it, what is that all about, how can the call url be bloginfo name, it is the name! it has to be bloginfo url I think I can explain it better at my own site at least I can write the code there!

    • Posted September 30, 2010 at 10:18 am | Permalink

      Thank you, and again, I have no control over that with WordPress.com. And the code was written out per the instructions I gave you, the code would look like:

      <title><?php bloginfo('name'); ?><?php wp_title(); ?></title />

      It’s really easy to do. I do it every day since I publish a ton of code here and on other blogs and the WordPress Codex.

      I get your point, but I can’t change the Theme. While people say they use the “correct” SEO order (there is no “correct” order, just whatever you wish to use), the default setting for this blog has not hurt my rankings in any way. Google and other search engines are smarter than you give them credit for. They know all the games, often before you ever learn them. This is why I don’t play the games and concentrate on quality content that serves my readers. That policy has served me very well.

  80. Posted October 4, 2010 at 9:44 am | Permalink

    I have another question now, and I’ve obviously been looking all the wrong places for the answer.

    I need to have a series of links in my footer, with most of them justified left, but one, on the same line, justified right. I can’t seem to figure out how to do two justifications in one line!

    • Posted October 4, 2010 at 2:25 pm | Permalink

      This is a CSS issue. Create two divisions (DIV) or spans (SPAN) and float one to the right and one to the left. If they are wrapped into a single parent container, they will float nicely such as:

      <div class="footergroup"><div class="footerfloatright">Right Footer Content</div><div class="footerfloatleft">Left Footer Content</div></div>

      See CSS float property from W3 Schools for information on the CSS float styles.

  81. Posted October 4, 2010 at 4:24 pm | Permalink

    Thanks again! I don’t know why this information is so difficult to find elsewhere. There are a dozen tutorials to tell how to stick a Twitter feed in the footer, but for some reason this is a hard one to Google.

    • Posted October 4, 2010 at 4:47 pm | Permalink

      It’s actually easy to find if you know what to look for, and this isn’t a footer specific issue, but a general web design topic. Check out all the CSS elements and such at W3 Schools as they have the best resources for all web design basics. This is where I turn when I can’t remember or need help.

  82. Posted October 4, 2010 at 4:58 pm | Permalink

    I actually did go there, but because I wasn’t quite sure how to make it work, I didn’t have the right search term. I sometimes wonder if that’s one of the reasons there seems to be a “shelf”, or a high step, between almost no knowledge of design and taking off with it, kind of like the step up to shore at the edge of the ocean, just a couple of feet into the water, when it goes from being ankle-deep to thigh-deep in just a foot or so. You do a great job of helping people over that step!

    • Posted October 4, 2010 at 8:18 pm | Permalink

      Thank you. Please dig into the , the online manual for WordPress Users, for which I’ve written many simple how-to articles on fixing all of these things. Especially Finding Your CSS Styles, New To WordPress – Where to Start and WordPress Lessons. These will help you with a lot of the issues you are having.

      The step between blogging and web design can be a big one. The step from fixing a couple design details and constructing a web design is a huge one, as it should be as it keeps web designers in business as does surgery for doctors. :D They get paid because just anyone can’t do it by themselves.

  83. Ken
    Posted October 20, 2010 at 5:55 am | Permalink

    Hi, thanks for all your kind help. If I add a page in the theme that I am using it appears by default in the horizontal nav. bar. I wanted to add Tos, Privacy and contact pages but I wanted the links to appear in the footer. It is easy enough to do this but what remains are the pages created in the top nav bar. How can I remove these. Or is there a way of stopping the pages from appearing by default in the top nav bar. With thanks for your kind help, Ken.

    • Posted October 20, 2010 at 2:27 pm | Permalink

      You can add those manually in your WordPress footer, as explained in the article, or create a custom menu with the latest version of WordPress and place there wherever your WordPress Theme permits, if it does permit such widgetized functions. Please see Function Reference/wp list pages in the WordPress Codex for more information on changing your Theme’s ability to include or exclude Pages.

  84. Posted December 14, 2010 at 10:44 am | Permalink

    Read about how to add this comment or how to add this line to your posts, or what?

  85. Foredi Gel
    Posted December 24, 2010 at 11:03 pm | Permalink

    It’s great content, but I’m newbie, I use mystics themes and I did not find in footer.php for :
    …..
    Powered by WordPress.
    …..
    what should I do?

    • Posted December 25, 2010 at 12:29 pm | Permalink

      If you do not what “Powered by WordPress,” a simple way of saying thank you to WordPress and spreading the word that you are a proud WordPress user, then remove the link from your footer.

      If you cannot find that in your footer.php, then contact the designer of your Theme or change Themes for instructions.

  86. Mathew
    Posted January 4, 2011 at 7:00 pm | Permalink

    You know, you are the best blogger ever. You really deserve some recognition from WordPress and from other bloggers. I learned from start to end using this site and I love your posts.

    God bless you

    • Posted January 4, 2011 at 10:54 pm | Permalink

      Thank you for your kind words. However, it isn’t my job to get recognition from WordPress or any special favors from anyone or anything. I do what I do because it is my passion to help people learn how to have their say and have their voice in the world. That’s enough for me, though a little money and wishlist requests thrown my way don’t hurt. :D

  87. kay
    Posted February 22, 2011 at 3:17 am | Permalink

    Thanks so much for the info, I’ve been struggling for days to sort this out (:

  88. Posted February 27, 2011 at 12:51 am | Permalink

    Thanks for sharing. Do you know how to remove those bunch of links from the footer? I tried to edit footer.php but then the theme stopped working.

    • Posted February 27, 2011 at 12:02 pm | Permalink

      Honestly, the answer is “carefully.” If you don’t know HTML or PHP, ask a friend to help, or use a different Theme. You clearly removed something you shouldn’t have, or at the worst, it was a malware Theme to begin with and you removed something that triggered an evil response. I doubt it. Did you back it up? Just take care to remove the links only and no code save the link code.

  89. A Potts
    Posted March 28, 2011 at 1:53 pm | Permalink

    Wow, finally someone that I can understand. Thank you for the advice. I am new to this Word Press thing, but I am glad that people like you took the time to help people like me be better!

  90. Sven
    Posted April 2, 2011 at 4:48 am | Permalink

    I have a selfhosted WordPress, it is using UTF-8.

    When I edit my theme og javascript and include letters like Ø and Å it shows all wrong in the browser.

    I have tried to save in UTF-8, but it fails. Also: I have been changing html, java and php files with my FTP program for years with no such issues (ø, å, etc).

    My question is this: in what file format and encoding should I edit and save template files and javascript in when using with WordPress and UTF-8?

    • Posted April 2, 2011 at 3:31 pm | Permalink

      Change the settings in your database to ensure the settings are truly UTF-8. There are different versions of UTF-8, too, so check that you are using the one that best suits your needs.

    • Sven
      Posted April 2, 2011 at 5:18 pm | Permalink

      @ Lorelle VanFossen

      Thanks for your reply.

      My templates, plugins and javascript are not i the database, but I will check the database in the mornig.

      Do you (or anybody else) have any other suggestions?

    • Posted April 3, 2011 at 10:33 pm | Permalink

      Plugins, WordPress Themes, and JavaScript are NOT in the database. They are on the server. I gave you the answer. That is the solution. Nothing else will resolve the issue if WordPress and the database are not set to the right language settings. Those are your only two options. Verify both match and are the right selection.

  91. Bret Sallee
    Posted April 5, 2011 at 11:06 am | Permalink

    Thanks a million. I’m definitely bookmarking this page for future reference. I’ve manually changed my footer on a lot of blogs I’ve done but each time it was pretty much a new learning process. This will speed things up dramatically for me.

  92. Milan Cole
    Posted April 13, 2011 at 2:03 pm | Permalink

    Thanks for the info. It would be cool if you could show a gallery of examples of great WP footers to give us ideas.

    • Posted April 13, 2011 at 9:18 pm | Permalink

      There are no such things as “WP footers.” There are web designs with footer design elements. Any web design element can be used in the footer. Or not. It’s a matter of personal preference, but you can put anything in the footer.

  93. Posted April 15, 2011 at 6:23 pm | Permalink

    What I am looking to do is similar. I am looking to have a static page as well as the blog appear on the main page of my wordpress site. Right now going to the settings section will only allow me to do one or the other. any feedback would be appreciated.

    • Posted April 15, 2011 at 9:29 pm | Permalink

      Similar to what? I’m confused. This article is about customizing your WordPress Theme footer. If you want static information on the front page of your blog, then put it there through the use of conditional tags, includes, or sticky posts. It’s a WordPress Theme issue, not just a click of the Settings buttons. There is no one or the other, there is what you choose to create with the WordPress Theme that is, honestly, infinite in all the possible ways you can group and display content.

  94. Posted April 19, 2011 at 2:39 am | Permalink

    Thanks, Really helped, have now updated my footer.

  95. Bulut yildiz
    Posted April 20, 2011 at 4:18 pm | Permalink

    hey guys ,

    im using wordpress also but its so difficult.
    im trying to do some online marketing its really hard work.
    could anyone pleas take a look at my site and give me some advise?

    btw sorry for my bad english im from the netherlands (and yes thats my real name)

    thnx!

  96. skahmad
    Posted April 28, 2011 at 3:09 am | Permalink

    Thanks for your info on customising the footer. But I am not able to edit the footer for my website which shows the following line
    ” Powered by chppedcode. phplist”
    I am using Suffusion theme.
    Please help me

    • Posted April 28, 2011 at 1:08 pm | Permalink

      Please contact the Theme author for details on customizing their footer template file.

    • skahmad
      Posted May 5, 2011 at 5:56 am | Permalink

      It came only when I activated mailing list by phplist.com
      Please tell me which file should I edit in my wordpress folders

    • Posted May 5, 2011 at 3:03 pm | Permalink

      I don’t understand what file you need to edit for what? If you are editing the footer, as the article states, edit the footer.php if your Theme uses that for your footer. Check with your Theme author for specifics.

  97. John
    Posted April 29, 2011 at 9:14 am | Permalink

    How do I get my footer to expand the entire length of my bottom page?

    • Posted April 29, 2011 at 1:30 pm | Permalink

      Make sure it shows up below the last DIV of the rest of your content. Check with your WordPress Theme author for more help.

  98. Posted May 1, 2011 at 3:50 am | Permalink

    Hello really nice tutorial. It worked for and i have changes by footer with the one you have suggested. Earlier i decided to code my own but later Googled it and found your code instead. Actually i hacked a WordPress theme to insert my own my_footer.php code.

  99. bryant
    Posted May 7, 2011 at 11:59 am | Permalink

    Thanks for this, I design css templates for fun, and have been wanting to jump into WordPress themes for awhile now. I’m good with PHP and everything so the challenge isn’t so much technical, as it is just getting used to how WordPress operates. Anyway, posts like this definitely help me out on going from static templates to CMS based ones, so thanks for taking the time with this.

  100. Posted May 27, 2011 at 11:59 am | Permalink

    I followed your suggestion to add “pages” to the footer. It works but the orientation is not correct. It shows up like
    About
    Comment Policy
    Contact Us
    Copyright

    Actually, I want them to line up horizontally. (About, Comment Policy, Contact Us, Copyright)
    Can you tell me how I can do that? Thanks for your help.

    Mark

    • Posted May 27, 2011 at 2:11 pm | Permalink

      The order is set by the template tag, alphabetical, ID, and a couple other options. If you MUST control the order, you have some alternatives. There are Plugins you can use that will help you structure the order, if your WordPress Theme is widgetized, you can use the custom menu feature to create a menu to add to the footer, or you can hand code it in the Theme’s footer.php, which is explained in the article.

    • Mark
      Posted May 29, 2011 at 1:39 pm | Permalink

      I add the following code to admin.css which seems to contain all formatting related information. But, for some reason, the orientation is not changing. Can you let me know if I need to do anything else?

      Mark

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

    • Posted May 29, 2011 at 8:26 pm | Permalink

      See Creating Horizontal Menus « WordPress Codex for details on creating horizontal menu lists.

  101. Anonymous
    Posted June 8, 2011 at 6:49 am | Permalink

    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!

    • Posted June 8, 2011 at 10:56 am | Permalink

      I don’t understand your question. Does the CSS styles you are using from this article match the ones in your WordPress Theme? Where did you put the CSS? In the Theme’s stylesheet? There are many sites that will help you better understand CSS and how to work with it, which is not part of this article’s purpose. If you could be more specific, I will help you as much as I can, but some rudimentary experience with CSS and HTML, and a basic understanding of WordPress Themes, helps.

  102. Ann
    Posted June 12, 2011 at 8:03 am | Permalink

    This is the 2nd time I’ve used your tips and how-to-guides here to help edit my WP sites. Thanks a million :) Footers used to always give me some trouble, but I am much better at editing the WP code these days. You’ve got a very handy site here!
    Thanks again,
    Ann S.

  103. James
    Posted July 3, 2011 at 9:05 pm | Permalink

    Your posts have always helped me in the past when I was first building my blog. Thank you so much!

  104. Pooja
    Posted July 19, 2011 at 4:21 am | Permalink

    I am new to wordpress. In my design I have a form in all pages above footer bar. So I added it in footer.php.To make it functional I added contact form7 code. But its not working in footer.php file while it works fine in content area. What should I do? I am a designer with hardly any knowledge of php. Can you please help.

    • Posted July 19, 2011 at 11:16 am | Permalink

      You will need to contact the Plugin author as the placement of the form may be wrong. The WordPress Support Forums are also very helpful.

  105. Alex
    Posted July 21, 2011 at 10:03 am | Permalink

    Thanks a lot for the great tips. Page (and site) bookmarked! I have been struggling quite a bit with footers, especially in adding pics. Your tutoring article was just so…what to say… perfect!

  106. vaibhav
    Posted August 18, 2011 at 10:41 am | Permalink

    Hi,
    Dude you are awesome, can you provide me with the code to display only the pages in horizontally in my footer links? Not one below another.

    Thanks!

  107. Karnisze
    Posted September 16, 2011 at 5:56 am | Permalink

    Hello, thank You for this guide but i got just one guestion: is this method still working in new wordpress?
    Please let mi know.

    Thank You.

    • Posted September 16, 2011 at 11:50 am | Permalink

      Yes, though some WordPress Themes now have a widgetized footer making it easier to make changes to the footer through the Administration Panels.

  108. Posted September 18, 2011 at 4:12 am | Permalink

    Thanks Lorelle. Is there a particular contact form plugin you would recommend that works well as a small contact form in the footer?

    • Posted September 18, 2011 at 11:23 am | Permalink

      @Ignite There are a variety of contact form WordPress Plugins, the majority of them are free. They have a variety of features and options as well as control for styling. You’ll need to experiment with these to find one that works best for your needs.

  109. neha
    Posted October 12, 2011 at 5:23 am | Permalink

    Hi

    Can we add social sharing icons with sharing option in footer ?

  110. Posted October 14, 2011 at 12:41 pm | Permalink

    Great post
    I just wonder, how can I leave it so that the list does in fact stay in list form and not go to inline form. And furthermore, how can I make a table of entries (whole footer space, really) similar to the footer here jamaicans.com?

    Currently working on Jamacob.com

    Any help would be tremendously appreciated.

    • Posted October 14, 2011 at 11:11 pm | Permalink

      I’ve included instructions in the article, or you can check with CSS menus and lists elsewhere, for how to turn a list into a line or vice versa. To make a list of pages and sites in the footer, just use a Text Widget if your Theme is widgetized there, or just add the text links as explained in the examples in the article.

      Also, I removed your email address from the post content for your protection. Please do not put your email in a comment box. It is already in the comment form, hidden from public site for your protection.

  111. Posted January 27, 2012 at 6:16 pm | Permalink

    Hello Lori, I followed your instructions and started adding your codes into the end of my footer.php with dreamwaver editor. Then I changed my mind and went back to the editor to erase what I previously have added, and I found Nothing. My website is still displaying your codes. I don’t understand why. Take a look at it please. thank you so much. It is driving me crazy.

    • Posted January 28, 2012 at 10:21 am | Permalink

      You will have to check with Dreamweaver and the settings to see if you have updated them. I don’t support Dreamweaver. If you made the changes there, change them again there and upload the new information. Or use the Theme Editor built into WordPress to do it yourself.

  112. razor
    Posted February 1, 2012 at 10:15 am | Permalink

    awesome! thank you so much!…..really helped me :)

  113. suraj
    Posted February 24, 2012 at 2:52 pm | Permalink

    Gr8 help..code given me such independence to play with my footer…thanks

  114. Mark
    Posted February 28, 2012 at 1:55 pm | Permalink

    I’m am still wondering wether the tag cloud is working. I just implemented it for a client in wordpress. Another client talking about how cool it is. But in my opionon visitors do not use the tag cloud. You mention it as a plugin. What do you think?

    • Posted February 28, 2012 at 2:51 pm | Permalink

      Check the stats. If people are using it, it is working. If they aren’t, it’s not. From there, it’s a matter of perspective. Is it placed properly so people pay attention and they aren’t paying attention, then why. People need to be trained to use tag clouds if they aren’t very web savvy. Just because a client likes it doesn’t mean it’s working. Test it.

  115. Posted March 22, 2012 at 9:49 am | Permalink

    I’m using Weaver theme and I inserted the php and CSS code to add page links to the footer. I have two Gallery pages that are not showing on the footer. I added the code to include the specific pages of the Site. What else can I do to get Gallery1 and Gallery2 to be visible on the footer?

    • Posted March 22, 2012 at 3:44 pm | Permalink

      You will have to contact the Theme author or double check what you are doing. It sounds like you have two links to specific web pages on your site that are not appearing in the footer. Double check the HTML in the footer.php to make sure you have added it correctly. Check whether or not the Theme has a Widgetized footer (permits WordPress Widgets – another way to add information to the footer without touching the template files in the WordPress Theme) or if the Theme has multiple footers, which is possible. There are a dozen reasons why the links aren’t appearing. No PHP should have been required to add specific web pages manually, just HTML. Make sure the code is correct.

  116. Sammy
    Posted March 23, 2012 at 6:44 pm | Permalink

    Hi, Great tips on the topic. However, I have failed to correct a Footer problem on my site. The footer goes out of the frame in the Homepage but when I browse the footer is perfectly in tact. Can you please suggest me how to correct this.

    Thank you,
    Sammy

    • Posted March 25, 2012 at 11:45 am | Permalink

      You must have resolved it as I see no problems with the footer. A footer pushes beyond its boundaries due to an image set too wide or text, meaning something within the container is too wide, or you’ve changed something in the stylesheet that changes the width of a container within the footer, the footer itself, or a container holding or next to the footer.

  117. Shasha
    Posted August 27, 2012 at 3:04 pm | Permalink

    Thank you for the tips..let see if it works with my theme..

  118. Posted December 2, 2012 at 5:23 pm | Permalink

    Thanks for the tutorial, very useful ..

  119. Posted December 13, 2012 at 2:01 am | Permalink

    Harika çok teşekkür ederim çok işime yaradı gerçekten

  120. Karen
    Posted June 1, 2013 at 7:17 pm | Permalink

    Hi. Thanks for this page. The examples worked great. I used your example of generating page links using wp_list_pages with the horizontal border. I copied your code exactly. It worked great but the border is hugging the text on the right side. So I don’t know if it’s the border that needs correcting or the pages that need aligning. Your example showed everything being centered.

    What I got:
    Test1| Test2| Test3| Test4|

    What I’d like to see is (like your example):
    Test1 | Test2 | Test3 | Test 4 |

    Also, do you know of a way to generate the page links from WP’s “menu” option instead of just includes for wp_list_pages. If it was pulled from the menu option it would be dynamic so as I add more pages the footer links would update automatically. With your example I would have to manually update my wp_list_pages list of included pages.

    Thanks again!!

    Karen

    • Posted June 2, 2013 at 6:53 pm | Permalink

      Design elements must be set in the stylesheet. That includes alignment and positioning. Add the styles to your stylesheet to make it look the way you would like.

      If your WordPress Theme features a widgetized footer, you may create a custom menu and add it to the footer. That way it would be dynamic.

      Thanks!

    • Karen
      Posted June 2, 2013 at 8:48 pm | Permalink

      Thanks for your speedy reply.

      I’m quite familiar with CSS styling but have tried everything and am unable to get the menu wording centered like

      Item1 | Item 2 | Item 3| Item 4 |

      I keep getting:
      Item1| Item2| Item3| Item4|

      I inserted your code exactly as the following (and you screenshots showed the menu items centered so assumed this would output the same way. I’ve tried “text-align:center;” but to no avail. Any help you can provide would be greatly appreciated. I thought it would go in the .footerlinks ul class but that didn’t seem to work so tried it in the others as well. Maybe it’s not “center” but “justify”.

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

      .footerlinks a {text-decoration:none;
      padding: 0px 3px;
      border-right: 1px solid black;}

    • Posted June 2, 2013 at 9:28 pm | Permalink

      Since I can’t see what you are trying to accomplish, play with the padding and margins around it with the border on one side of each list item. Check the styles for the parent containers to see if they are influencing the styles. Don’t center things within the link as there is no border area really to align against for this example. You may center a line or an image, but content within a link area…just add appropriate padding and margins to space the border on one side appropriately. I think that is what you are trying to do.

  121. Posted June 10, 2013 at 11:21 pm | Permalink

    Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make your point.
    You definitely know what youre talking about, why throw
    away your intelligence on just posting videos to
    your weblog when you could be giving us something informative to read?

  122. VM
    Posted June 6, 2014 at 9:05 pm | Permalink

    very useful. Thanks :-)


25 Trackbacks/Pingbacks

  1. [...] In tomorrow’s article, I’ll cover Customizing Your WordPress Theme Footer. [...]

  2. [...] Lorelle foglalkozik a témával, érdemes rajta átfutni. Először is, mit tegyünk a blog láblécébe? A [...]

  3. [...] 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 [...]

  4. [...] Customizing Your WordPress Theme Footer How to customize your WordPress Theme footer. (tags: wordpress wordpressmods) [...]

  5. [...] 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 [...]

  6. [...] this is what the footer of Lorelle’s post on blog footer looks [...]

  7. [...] 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 [...]

  8. [...] 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 [...]

  9. [...] 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 [...]

  10. [...] <?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 [...]

  11. [...] Adding pages to the footer There is a good guide here: Customizing Your WordPress Theme Footer Lorelle on WordPress BTW im not affiliated with that [...]

  12. [...] in the footer, which isn’t as easy as you would think. Finally I found a helpful blog Lorelle on WordPress. This is what I got out of the [...]

  13. [...] 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 [...]

  14. [...] Customizing Your WordPress Theme Footer [...]

  15. [...] Customizing Your WordPress Theme Footer个性化你的博客主题页脚 [...]

  16. [...] torto! Se hai un blog WordPress e non sai dove mettere le mani ti consiglio di dare uno sguardo a questa ottima guida! Fonte [...]

  17. [...] comment on customizing your wordpress theme footer by lorelle …  [...]

  18. [...] for … 25 Outstanding Magazine Style Website Designs Vandelay Design Blog WordPress MU 2.7 comment on customizing your wordpress theme footer by lorelle … Watch Videos Online? I Download Later When the Tubes are Clear | A …comment on wordpress [...]

  19. [...] comment on customizing your wordpress theme footer by lorelle … – 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 … [...]

  20. [...] comment on customizing your wordpress theme footer by lorelle … – 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 … [...]

  21. [...] apua löysin täältä, mistä sain peruskoodin footeriin. Mistä pääsin lisäämään koodin? Ulkoasu -> Muokkain [...]

  22. […] Customizing Your WordPress Theme Footer: In part two of my support of the WordPress footer and its design possibilities, I offer tips on how to put a variety of navigation, images, Plugins, and other information into your blog’s footer. […]

  23. […] Customizing Your WordPress Theme Footer […]

  24. […] Customizing Your WordPress Theme Footer: Almost everything you ever wanted to know about customizing, tweaking, and adding value to your WordPress Theme footer. […]

  25. […] Customizing Your WordPress Theme Footer […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,672 other followers

%d bloggers like this: