WordPress 3.0 menus and Hybrid theme

WordPress 3.0 beta comes with support for a customized menu system that optionally replaces the wp_page_menu with wp_nav_menu. Drag and drop menu management is a cool and useful feature. It’s like widgets only for navigation purposes.

For my WordPress blog I am using a child theme of Hybrid called WP Full Site and I’ve made some minor changes and additions. Among them I have removed the Home link and added a Subscribe link in my menu.

Modifying my functions.php file like so accomplished the deed:

add_filter('wp_page_menu', 'custom_page_nav');

function custom_page_nav( $menu ) {

    // My blog title is already clickable, why have another Home link?
    // Remove the Home link from the home page
    $zaphome = '<li class="current_page_item"><a title="Home" href="' . get_bloginfo('wpurl') . '/">Home</a></li>';
    $menu = str_replace( $zaphome ,'', $menu );

    // Remove the Home link from everywhere else
    $zaphome = '<li><a title="Home" href="' . get_bloginfo('wpurl') . '/">Home</a></li>';
    $menu = str_replace( $zaphome ,'', $menu );

    // Now add a RSS subscribe link with CSS id
    $links .= '<li id="feed"><a href="' . get_bloginfo('rss2_url') . '" title="Subscribe to the feed">Subscribe</a></li>';
    $menu = str_replace( '</ul></div>', $links . '</ul></div>', $menu );

    return $menu;
}

And I added these lines to my style.css (I am pretty sure I appropriated it from another of Patrick Daly’s themes but not sure which one):

#navigation ul li#feed {
    width: 120px;
    float: right;
    background: url(images/feed-icon.png) 100px 13px no-repeat;
 }
#navigation ul li#feed a:hover {
    background: #433B14 url(images/feed-icon.png) 100px 13px no-repeat;
 }

And that took care of that.

The upcoming Hybrid 0.8 theme is in beta and has support for the WordPress 3.0 menu system. Activating it changes the CSS styling and replaces wp_page_menu with wp_nav_menu. I wanted to give the menu system a try while keeping my modifications. It was easier than I thought.

First up, fix the CSS. With the wp_page_menu output, the menus are styled with CSS ID of navigation. This gets switched to a CSS class called menu when you use wp_nav_menu.

/* Menus */
.menu {
        background: url('library/images/nav-bg.gif') repeat-x;
        border-bottom: 1px solid #433B14;
        border-top: 1px solid #0F0F0F;
        height: 38px;
}
.menu li {
        border-left: 1px solid #262001;
        border-right: 1px solid #322a03;
}
.menu li ul li {
        border-bottom: 1px solid #433B14;
        font-style: italic;
        font-weight: normal;
        text-transform: none;
}
.menu a {
        color: #fff;
        display: block;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        padding: 12px 18px;
        text-decoration: none;
}
.menu a:hover {
        background: #433B14;
}
.menu li ul li a {
        background: url('library/images/nav-bg.gif') repeat-x;
        border-bottom: 1px solid #0F0F0F;
}
/* My subscribe button */
.menu ul li#feed {
        width: 120px;
        float: right;
        background: url(images/feed-icon.png) 100px 13px no-repeat;
        }
.menu ul li#feed a:hover {
        background: #433B14 url(images/feed-icon.png) 100px 13px no-repeat;
        }
.menu ul li#feed a {
        }

Tedious, but not really a big deal and I just copied the existing CSS in the child theme. I’m not very CSS savvy so there is probably an easier way to re-use the existing section.

To add my Subscribe link all I had to do was add one more filter like so.

add_filter('wp_nav_menu', 'custom_page_nav');

Now I can switch between using the new or old menu system and maintain the look and feel that I want.

4 Replies to “WordPress 3.0 menus and Hybrid theme”

  1. Hey,

    I am using the hybrid news child theme and I cant get sub categories / drop down menus working, do you know what could be the problem?

    Thanks!

    1. Jack,

      The menus don’t display at all? Before I made my CSS changes, the menus were there just not displaying properly.

      Also are you using Hybrid 0.8?

  2. I’m having the same problem as Jack described above. When I upgrade to Hybrid 1.0 and Hybrid News 0.4 all my drop down menus are not displayed at all.

    I’m currently using Hybrid 0.8 and Hybrid news 0.2 that are working nice.

    Where should I edit and search for .css file?

    1. It’s tough for me to say exactly; I’m not using Hybrid anymore. When I wrote this post my problem was getting them to display correctly. This post was really about the CSS.

      Check your menu settings. If they were wiped out with the upgrade then you just need to recreate them again.

      As to support for Hybrid: it’s a great framework and if you invest the annual admission fee of $25 I think you’ll find that Justin’s support forum is pretty good.

Comments are closed.