pages and categories as dropdown menus in header and top navigation

In this post, I showed you how to manually add more links to the top / header navigation.

From version 1.6, my themes include styles for 2 levels deep CSS dropdown menus, which you can either create manually, adding links in nested unordered lists or automatically by including your WP pages or categories. The sub-pages (or sub-categories) and sub-sub-pages (or sub-sub-categories) open in the dropdown menu.

1. activate dropdown menu inside header

Step 1: open the header template (header.php) in the editor and you will find this code:

<div id="headernav">
<ul>
<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<!- - <li><a href="URL">Link2</a></li> - ->
<!- - <li><a href="URL">Link3</a></li> - ->
<?php
// wp_list_pages(’title_li=&depth=3&sort_column=menu_order’);
// wp_list_categories(’title_li=&depth=3′);
?>
</ul>
</div>

Step 2: To display WP pages and sub-pages, simply remove the PHP comment ( // ) from the line:
// wp_list_pages(’title_li=&depth=3&sort_column=menu_order’);

To display the categories and sub-categories, remove the PHP comment from this line:
// wp_list_categories(’title_li=&depth=3′);

Important Caveat: DO NOT activate both (pages and categories) because you will probably get too many links. The main pages or categories should fit into one line! When the main links are broken into two lines, the dropdown links in the first line won´t work.

TIP: If your links don´t fit all into one line inside the header, activate the additional top menu and include the remaining links there.

2. activate dropdown menu inside top navigation

Open the top navigation template (topmenu.php) and proceed in the same way as shown above. Same “caveat” applies here.

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

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

2 Comments »

  1. Comment by:
    Ezinez

    Nice script, it make my blog more beautiful, just copy and paste.
    Thank you.

  2. Comment by:
    wordpress tutorial

    Isn’t there something in your blog mod settings for whether to show recent entries on home only or on all pages or not at all?

    Another suggestion…

    There is a module called “Whats New” that will do exactly what you ask (with one or more mods’ content listed and linked), but I don’t think it will work with anything older than 1.5 (or maybe 1.6).

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.