Styling Menus in WP 3.0
-
So, I’ve looked and looked and looked a little more, but I haven’t found a good example of how to style menus using wp_nav_menu.
In earlier releases of WP (2.9.2 and earlier) I did something like this, where the categories are 2nd level and given their own style:
<div id="topnav"> <ul id="menu_top"> <li><a href="<?php echo get_option('home'); ?>/">Home</a></li> <li><a href="#">Categories</a> <ul class="subnav"> <?php wp_list_categories('orderby=name&title_li='); $this_category = get_category($cat); if (get_category_children($this_category->cat_ID) != "") ?> </ul> </li> <?php wp_list_pages('exclude=14,20&title_li='); ?> </ul> </div>
In 3.0 I’ve used the theme that the above example is from as my testing theme, if you will. Therefore, in functions.php I added:
add_action( 'init', 'register_my_menus' ); register_nav_menus( array( 'top-menu' => __( 'Top Menu', 'top_nav' ), 'side-menu' => __( 'Sidebar Menu', 'side_nav' ), 'footer-menu' => __( 'Footer Menu', 'bottom_nav' ) ) );
I then added the menu items I wanted for each menu using the menu editor found in the Appearance module, changed ul id to ul class for the top level menu in the style sheet and in the header.php file, and added
<?php wp_nav_menu( array( 'menu_class' => 'menu_top','theme_location' => 'top-menu' ) ); ?>
to the header.php file.Here’s what the code looks like now:
<div id="topnav"> <?php wp_nav_menu( array( 'menu_class' => 'menu_top','theme_location' => 'top-menu' ) ); ?> </div>
When previewing the theme with the new and improved(?) menu, the top level menu displays fine for the most part, but the 2nd level is horizontal and always visible and is styled exactly like the top level… it shouldn’t be, but I can’t find the solution to apply a style to the 2nd level menu.
Any advice/help would be great!
- The topic ‘Styling Menus in WP 3.0’ is closed to new replies.