Header Navigation - adding more links

Update: This article has become obsolete. Please read the following articles instead:
adding links to the top menu / header navigation


First, there is only the “home” button inside the header navigation. This link points to your blog´s index page. This tutorial shows you how to modify the target of this link and add more links in the same tabbed style to the header navigation.

Open the Header template ( header.php ) of your theme and find the following source code:

<div id="headernav">
<ul>
<li style="border-left: 1px solid #336699"><a href="<?php bloginfo('url'); >">Home </a></li>
<!- - <li><a href="URL">Link2</a></li> - ->
<!- - <li><a href="URL">Link3</a></li> - ->
</ul>
</div>

As you can see, the tabs are list items in an unordered list, with the first list item having an additional border on the left. (the border color may be different in your theme). And there are already two additional list items that are commented out.

Hence, in order to add more links, you only need to remove the comment tags before ( <! - - ) and after ( - - > ) each list item, replace “URL” with the target URL and “Link2″ / “Link3″ with the anchor text for the links.

If your site has a different homepage than your blog´s index page, you probably want to change the first link to point to this homepage. To do so, just replace <?php bloginfo('url'); > with the URL of your site´s homepage. In this case, you should make the second tab a link to your blog´s index page.

If you need more than 3 links / tabs, simply add more list items. The code for a header navigation with 4 links could look like this:

<div id="headernav">
<ul>
<li style="border-left: 1px solid #336699"><a href="http://yoursite.com">Home </a></li>
<li><a href="http://yoursite.com/blog/">Blog</a></li>
<li><a href="http://yoursite.com/contact.html">Contact</a></li>
<li><a href="http://yoursite.com/about.html">About</a></li>
</ul>
</div>

I could have used the “pages” template tag for the header navigation, but it´s easier to manually add more links than excluding certain pages that you don´t want to appear in the header navigation.

Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.