Few days back, I shared a wordpress trick on How to Add categories to Nav Bar. Today, i wan to share one more WordPress Trick.

If you look at the Header section of this blog, you will see the Nav Bar. It includes pages and also some categories.

You can see from the above, that i have included following 3 pages along with the some categories. Also notice that they are not one after the other in serial order:

• Archives
• Contact me
• Earn Money

How do you do this?

It is pretty simple. You need to have some knowledge in WordPress and you should find out in which theme file your Nav Bar code is residing.

Instructions to Add Pages to Nav Bar

My theme has nav_menu.php file. This file contains the menu code. I have put the following code in this file:

<?php wp_list_pages('include=9&title_li='); ?>
<?php wp_list_categories('orderby=name&include=3,25,42,11,10&title_li='); ?>
<?php wp_list_pages('include=225,23&sort_column=menu_order&title_li='); ?>

You can see from the above code, I have am making two calls to wp_list_pages function and in between wp_list_categories. This is the reason you see the pages and categories are mixed in the Nav Bar.

I have specified the pages that i want to include using “include=225,23″ parameter.

Each Page is assigned with a Page ID. To find the Page ID, just go to Pages -> Edit and hover over the title of any Page. The status bar of your browser will display a URL with a numeric ID at the end. This is the Post ID. You can see from the below url: 23 is the Page ID.

http://www.niharsworld.com/wp-admin/page.php?action=edit&post=23

One important thing to notice about wp_list_pages function is that the Pages are sorted alphabetically by Page title. But, if you want them to be in another order then use sort_column=menu_order parameter.

For each Page, you can assign the Page Order from Write > Page administrative panel.

For ex: If I want Contact me to appear at the end. I will assign a higher number to Contact Me than other two pages I am displaying.

wp_list_pages function generates each page as list <li>..<li/>. It marks the current Page with HTML class current_page_item.

For more instructions on wp_list_pages and Styling of Category List, Please check wp list pages.

Please leave a suggestion or doubts if any by leaving a comment

Technorati Tags: add page, How-To, nav bar, TipsNTricks, WordPress, WordPress Page