Dynamic menu with custom post types

Question

I'd like to create a dynamic menu with a mix of static pages and custom post type archives that applies a class of "current" to the current tab. The example below uses 1) Static page set as Home 2) Static page 3) Custom post type archive 4) Static page for blog content.

Tried to edit the code from my previous menu, but it's not working. I'd appreciate any assistance!

Thanks.

<ul>
<li<?php if ( is_front_page() ) { echo ' class="current"'; } ?>><a href="/">Home</a></li>
<li<?php if ( is_page('my-page') { echo ' class="current"'; } ?>><a href="/my-page/">My Page</a></li>
<li<?php if ( is_post_type_archive('my-custom') && is_single()) { echo ' class="current"'; } ?>><a href="/my-custom/">My Custom Posts</a></li>
<li<?php if ( is_page('blog') { echo ' class="current"'; } ?>><a href="/blog/">Blog</a></li>
</ul>

Answer 1

So I think you are asking how to dynamically highlight the tab of the page you are currently on. I did something like this on my recent website project because I needed to highlight a certain tab when I was on a custom post type.

Here is some code you could use for your website:

function custom_tab_highlighting() { 
    global $post;
    ?>
    <ul>
    <?php if( is_front_page() || is_page('my-page') || is_post_type_archive('my-custom') || is_page('blog') ) { ?>
        <li class="current_page_item">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php } else { ?>
        <li class="tab">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php } ?>
    </ul>
<?php
}

This is really a much cleaner way to create a menu by using the "||" symbol. Although I'm guessing you are going to want to list all your pages out whether or not you are on that page... I'll leave you to code that functionality. Try using a for or foreach loop to list all the pages.

Hope this helps.

If you were using WordPress's wp_list_pages function then you could use something like this to highlight a tab when you were on a certain post_type:

// this highlights the "Sermons" tab when I'm on a post type of "sermon_post"
// just set the get_post_type and $page->ID values accordingly
function my_page_css_class( $css_class, $page ) {
    global $post;
    if ( get_post_type() == 'sermon_post' && $page->ID == '11' ) {
        $css_class[] = 'current_page_item';
    }
    return $css_class;
}
add_filter( 'page_css_class', 'my_page_css_class', 10, 2 );

Answer 2

If you use the WordPress Menu system it will add an "active" CSS class to the active menu item. And if you want to extend what wp_nav_menu outputs you can easily customize it via arguments or custom Walker class.