NAVI

How to create a static WordPress navigation menu

article header image

I wanted to create a static navigation menu creating a combination of both static pages (for home, about, contact, etc) and categories (for tutorials and portfolio) for a WordPress 2.9.2 website.
This meant that the regular way of automatic listing (wp_list functions) was not going to do it for me, as this would automatically expand when a new category or page was added. As none of the answers I found covered the whole of my question, I’ll post it here for your convenience!

It’s not difficult. All you have to do is add some pieces of code to header.php. For this example, I’m assuming a website with four pages: Home, Services, About and Contact, and two categories: Portfolio and Tutorials:

1. Add the php code below to the -head- part of the header.php file:

					
<?php 
	if ( is_page('Home') ) { $current = 'menu_one'; } 
		elseif ( is_page('Services') ) { $current = 'menu_two'; } 
		elseif ( is_page('Portfolio') ) { $current = 'menu_three'; } 
		elseif ( is_page('Tutorials') ) { $current = 'menu_four'; } 
		elseif ( is_page('About') ) { $current = 'menu_five'; } 
		elseif ( is_page('Contact') ) { $current = 'menu_six'; } 
?>

2. Add the html code below to the -body- part of header.php:

<div id="navbar">
    <ul id="nav" class="clearfloat">
        <li id="menu_one"><a href="index.php?page_id=15">Home</a></li>
        <li id="menu_two"><a href="index.php?page_id=7">Services</a></li>
        <li id="menu_three"><a href="/yourtheme/archives/category/Portfolio">Portfolio</a></li>
        <li id="menu_four"><a href="/yourtheme/archives/category/tutorials">Tutorials</a></li>
        <li id="menu_five"><a href="index.php?page_id=9">About</a></li>
        <li id="menu_six"><a href="index.php?page_id=13">Contact</a></li>
    </ul>
</div>
3. The paths are key here, and depend on the permalink structure you’re using. In this case, I used the default setting.

4. All you have to do now is fill in the menu-names you want to use yourself, and change /yourtheme/ into the name of the theme you’re using.
Initially, I used index.php?cat=”cat_ID_number” instead of archives/category/portfolio. But for some reason, the posts in that category would then not show up, instead I got a 404. The posts were found when clicking the specific category in the sidebar. I’m not sure what the index.php?cat= function would do then, but the folder path works very well!


foto Boris Hoekmeijer
My name is Boris Hoekmeijer, I'm a webdesigner and graphic designer.
I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
Cheers!

© 2010 ★ Published: July 20, 2010
1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *