| Log in

Add page menu to footer

Posted by Yogi On 15 November 2009 3 Commented | Under: Blogging

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

<div id="footer-menu">
	<ul>
		<li class="page_item <?php if(is_home()): ?>current_page_item<?php endif ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
		<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
	</ul>
</div>

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.


You may also be interested in :

  1. Magazine Themes – Making justified mini post
  2. Footer code for topwpthemes – 1
  3. Customize your Magazine themes
  4. Magazine themes improvement
  5. Natmag Theme – More bugs, Solved



I am a human being. Writing such a post consumes my energy. Coffee keeps me energized. Buy me a coffee

Tags:


RSS feed for this post (comments)

3 Responses to “Add page menu to footer”

  1. Michel says:

    I tried the code, and it does an awesome job! Thank you for sharing!
    Something that I found is that if people would like to exclude from the footer the pages that already appears at the top of the main navigation menu can change the wp_list_pages to (so this exclude page with IDs, so page id 27,17,43 etc..):

    Thanks!

  2. Michel says:

    Oh, I think the php code does not print in the submit comment.
    I’ll try again:

    wp_list_pages(‘exclude=27,17,43,2,19,42&title_li=’);

Leave a Reply