CODEWITHSUNDEEP
phpcsswordpressclassmenu
stephen
stephen

Reputation: 51

Adding custom classes to the anchor tag within the WordPress Nav

I'm trying to add custom classses to the <a> elements instead of the <li>elements in the navigation menu. The users can change the custom classes from the backend (Using appearances > menu > css classes optional).

I have created & added the following to my functions.php to add a class to it...and it half works. Its just not outputting the custom menu css classes.

function add_nav_class($output) {

$class_names = wp_nav_menu(array ('menu_class'      => '',)
);

$output= preg_replace('/<a/', '<a class="'.$class_names.'"', $output, -1);
return $output;

}
add_filter('wp_nav_menu', 'add_nav_class');

how to call the 'css classes optional' bit from WordPress?

Thanks

Upvotes: 3

Views: 1825

Answers (1)

Robin Vinzenz
Robin Vinzenz

Reputation: 1277

I couldn't find an easier way to do it. And it's getting a little complicated if you're relatively new to wordpress.

1.) At first you'll have to create a custom Walker_Nav_Menu. You can do that by extending from it. Edit: Make an extra php file e.g. my-walker-nav.php and include it to your functions.php, that'll be more clean than all code in functions.php

class My_Custom_Walker_Nav extends Walker_Nav_Menu {
    // Code
}

What you wanna do now is to copy the base code (line 17 to 190) out of the standard Walker_Nav_Menu.

2.) The second step is to add additional code to the function start_el to use the current menu item's ID to fetch it's meta information for the key _menu_item_classes.

/* Get the optional css class(es)*/
$optional_css_classes = get_post_meta( $item->ID, '_menu_item_classes', true );

3.) Next we compare the current items menu css classes with our fetched one's from meta data. See Php array function array_diff. If both arrays contain the same value it'll be removed. In our case that would be the optional css class.

/* Remove all optional css from current li element's class*/
$item->classes = array_diff($item->classes, $optional_css_classes);

Now we've removed the optional class from the <li> element.

4.) Step number four requires us to add the optional css classes to the <a> element.

Find following code around line 117 at nav-menu-template.php:

$atts = array();
$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';

And add the next line of code to it:

$atts['class']  = ! empty( $optional_css_classes) ? implode(' ', $optional_css_classes): '';

5.) Don't forget to use your built My_Custom_Walker_Nav. At the template part where you call wp_nav_menuto declare your navigation menu (usually in header.php), you should add the attribute walkerto the array.

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    /*......*/
    'walker' => new My_Custom_Walker_Nav())
);

Now you should be could to go.

Find the complete custom Walker_Nav_Menu here

Upvotes: 2

Related Questions