Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
    
Is there a reason you're not using a custom walker? –  m0r7if3r Feb 2 '12 at 2:27
1  
maybe he does not know what a walker is : codex.wordpress.org/Function_Reference/Walker_Class is . but I have a different question - why not use the normal custom menu ? –  krembo99 Feb 2 '12 at 2:51
    
Honestly, I've always coded my own menus and always been able to get the php help I need through such great resources as stackexchange. That's what I'm looking for here. –  user5486 Feb 2 '12 at 4:10

2 Answers 2

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 );
share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.