Add page menu to footer

The bellow tutorial will allow you to add page menu to wordpress theme.

Pointed by one of my reader, it was impossible for some of the themes to show the list of all pages, say if your pages list is quite huge.

The remedy for this would be either make the top page menu small enough to accommodate some extend of pages or rather have all your pages listed at the bottom of your blog in the footer.

I will show how to list the pages at the footer.

1. You will have to add this code in your stylesheet.css (Add it at the bottom or your stylesheet)

#footer-menu ul {
 clear:both;
 display:block;
 border-top:1px solid #dedad9;
 padding:15px 2px 10px 2px;
}

#footer-menu li {
 display: inline-block;
 margin: 2px 10px 2px 2px;
 color:#1575A9;

#footer-menu li.current_page_item a { color:#e3b44d; text-decoration: underline; }
}

Change the color of the class li to match your theme. Also You may change the border-top color.

Next you need to add this code to your footer.php


The position you add this code is important. It will be totally your call, whether you want to add the code to the bottom of your wrapper or inside the wrapper but just outside the post/page container.

Since Michel wanted it to be specific for the iBusiness theme of Topwpthemes I positioned the bellow code in the wrapper but outside the page container.

This is the code that you need to add in your themes footer.php

For iBusiness Theme this is where I’ve positioned the code as shown in the image

footer-page-menu-code

This is how the result would be.

footer-page-menu

That it is all. Enjoy.

If you have any doubts in applying the code to your theme please give me a knock. Also if you have problems regarding wordpress themes, or implementing your ideas in any theme, don’t hesitate to contact me.



Wordpress

  • jcwynford

    hi, i want to ask how could i add a menu divider on that footer page menu?
    it’s like:

    Home | Page 1 | Page 2 |…….

  • Eddie

    horrible script that doesn’t work!