4

In order to increase my theme's accessibility, I want to add the aria-current="page" attribute to the menu item that has the class .current_page_item.

As of right now, I am doing this via jQuery using the following:

var currentitem = $( '.current_page_item > a' );
currentitem.attr( 'aria-current', 'page' );

While this does what I want it to do, I would prefer that PHP handles this particular thing.

I know I can do this either with a custom Nav Walker class or with a filter to nav_menu_link_attributes. Unfortunately I have not seen any code even remotely near what I want to do.

function my_menu_filter( $atts, $item, $args, $depth ) {
   // Select the li.current_page_item element
   // Add `aria-current="page"` to child a element
}
add_filet( 'nav_menu_link_attributes', 'my_menu_filter', 10, 3 );

Any help in writing this filter would be appreciated.

  • Have you tried the examples given here? codex.wordpress.org/Plugin_API/Filter_Reference/… – Yoav Kadosh Mar 22 '17 at 4:10
  • I looked at those but didn't see how to get at the classes. Normally I do a var_dump or print_r of the object and look for what I want to target in there but I couldn't get that in this case and the only example I found to do that did not work. – Cedon Mar 22 '17 at 12:13
4

You may target the current_page_item CSS class or you may target the current-menu-item CSS class instead. current_page_item class may not be present for all kinds of menu item. Read the answer here to know why.

Whichever CSS class you choose, you may use the CODE like the following to set the attribute:

add_filter( 'nav_menu_link_attributes', 'wpse260933_menu_atts_filter', 10, 3 );
function wpse260933_menu_atts_filter( $atts, $item, $args ) {
    if( in_array( 'current-menu-item', $item->classes ) ) {
        $atts['aria-current'] = 'page';
    }
    return $atts;
}
  • I tried this code and it didn't work. I double checked the li element and it only had the current_page_item class. I changed your conditional to that class and it still did not work. I even tried to have it switch the href attribute to # as a test and nothing happened. – Cedon Mar 22 '17 at 21:04
  • Also, don't forget, as the nav_menu_link_attributes name suggests, this aria-current="page" attribute will be added within the menu link (i.e. within <a href="_link_" aria-current="page">Menu</a>). Not in li element. Also, an older WP installation may only have current_page_item class. – Fayaz Mar 23 '17 at 1:58
  • WP v4.7.3 and it was both in a file being called by functions.php and I tried it in functions.php itself. And I do want it to affect the <a> element within. The only reason the <li> element comes into play is it is the one getting the class I am using to target. – Cedon Mar 23 '17 at 2:13
  • I copied the code onto a fresh copy of WordPress on a different local server and still had the same results. Is there something I need to enable in wp-config.php or elsewhere? I've messed with priority settings, even changed the filter to replace the href with # and nothing happens. – Cedon Mar 23 '17 at 12:51
  • Is there a way to see if this is even loading? – Cedon Mar 23 '17 at 15:11
0

You can use the filter nav_menu_link_attributes to achieve that:

function add_attribute_to_current_menu_item( $atts, $item, $args ) {
    // check if this item represents the current post
    if ( $item->object_id  == get_the_ID() ) 
    {
        // add the desired attributes:
        $atts['aria-current'] = 'page';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_attribute_to_current_menu_item', 10, 3 );

See nav_menu_link_attributes for more information.

  • +1 but you will probably want to make sure the item is a post/page/etc to make sure the item->object_id is actually something you can compare to the post id – Mark Kaplun Mar 22 '17 at 5:06
  • This check: $item->object_id == get_the_ID() may not work always. – Scott Mar 22 '17 at 5:06
  • I tried this and it did not work – Cedon Mar 22 '17 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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