在当前单页wordpress的li中添加active类

Question

Looking for your help and advices. I have a list of links to single in Wordpress. I need to place class active only to li of active page.

Should be like on this image

But it is:

My wp-code:

<ul class="inline-list medium-6 large-4 skill-items">
<?php 
    $id = get_the_ID();
    // echo $id;
    $class;
    $skills = new WP_Query( array(
        'post_type' => 'skills',
        'order' => 'ASC'
        ));
    if ($skills->have_posts()) : while ($skills->have_posts()) : $skills->the_post();   
    // echo $post->ID;
    if( $id == $post->ID) {$class = 'active';} else {$class = '';}
    ?>
    <li class="<?php echo $class; ?>"><a href="<?php echo esc_url(get_permalink()); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; endif; wp_reset_query();
?>  
</ul>

Answer 1

That's not the proper way to do a menu in Wordpress. You should use wp_nav_menu instead of doing a custom WP_Query .

First, in functions.php add the following to register a new menu :

add_action('after_setup_theme', 'register_my_menu');
function register_my_menu() {
  register_nav_menu('skills_menu', __( 'Skills menu', 'your-theme-name' ));
}

Then log in your administration, you will see that new menu placement under Appearance > Menu. Create a new menu for that placement - you have the possibility to automatically add top level new pages to this menu.

Then in your template add the following in order to display the menu:

<?php wp_nav_menu(array('theme_location' => 'skills_menu')); ?>

Wordpress will automatically handle the active class by adding current-menu-item to the appropriate li . No need for any filter for that.

Answer 2

Found an answer for my question using Javascript/jQuery

jQuery(document).ready(function($){
var pgurl = window.location.href;
$("ul.skill-items li").each(function(){
  if($(this).find('a').attr("href") == pgurl || $(this).find('a').attr("href") == '' )
    $(this).addClass("active");
})
});

pgurl contains your current url. After that for each item we are looking for anchor and its link. Then we are comapring those links, and if their are equal, we add class active to li

Answer 3

You may try this:

function my_alter_classes_on_li( $classes, $item ){
    global $post;
    if( in_array( $post->post_type, $classes ) ) $classes[] = 'current-menu-item';
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_alter_classes_on_li', 10, 2 );