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.