Wordpress add a class to menu link

Question

I need your help. I need to add a specific class on the link that wordpress generates in the menu. What should I edit? The HTML output in my case is:

<nav class="nav" role="navigation">
<ul>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="example.com">Sample Page</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://example.com">Prova sample</a></li>
</ul></nav

the code in the header file that generate the menu is:

    <!-- nav -->
    <nav class="nav" role="navigation">
    <?php html5blank_nav(); ?>
    </nav>
   <!-- /nav -->

score 31 · Accepted Answer · answered Dec 23 '13 at 22:56

31

You can do it through admin panel also

In Appearance > Menus, click the Screen Options tab
Under Show advanced menu properties, check CSS Classes
Now expand any menu item to reveal the CSS Classes (optional) text
input.
Enter your class name and save your menu to apply the class to the
menu item

http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

answered Dec 23 '13 at 22:56

Raunak Kathuria

3,185
1
18
27

1

thanks!! It seems to work!! but it add the class on the
element and so I cannot style the element as i want

Dec 23 '13 at 23:11

No problem, please accept the answer if it has solved your issue. It will help others if they come to view the question – Raunak Kathuria Dec 23 '13 at 23:22

6

The problem is that it hasnt solve my problem. I need to add a class to the element and with your tip it add the class to the

element.

– Dec 24 '13 at 09:25

score 30 · Answer 2 · edited Dec 18 '20 at 11:18

Adds a class <a class=> https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

function add_specific_menu_location_atts( $atts, $item, $args ) {
    // check if the item is in the primary menu
    if( $args->menu == 'primary' ) {
      // add the desired attributes:
      $atts['class'] = 'menu-link-class';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

score 1 · Answer 3 · answered Nov 19 '15 at 23:40

After creating some WordPress sites based on the Bootstrap framework, i've come up with a solution of easily manipulating the WordPress navigation output by initializing the classes you want. This will make sure your enduser will not be needed to add all the custom classes when the client add's a new menu item.

Maybe it could help someone;

https://github.com/nickkuijpers/WordPress-Extended-Bootstrap-Nav-Walker

score -5 · Answer 4 · answered Dec 23 '13 at 22:55

-5

Try edit html5blank_nav() function, in functions.php file

// HTML5 Blank navigation
function html5blank_nav()
{
wp_nav_menu(
array(
    'theme_location'  => 'header-menu',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => 'menu-{menu slug}-container',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul>%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
    )
);
}

answered Dec 23 '13 at 22:55

@Giova.panasiti I never change that. But try add something to 'link_before' – Dec 23 '13 at 23:06
it doesnt work. If I add something in link_before or just before it add what I type just as a simple plain text before the link. – Dec 23 '13 at 23:10
@Giova.panasiti So maybe the above solution is simple and effective. – Dec 23 '13 at 23:12
yes but with the above solution it adds a class to the
element so I cannot style the element inside the navigation menu as I would like to

Dec 23 '13 at 23:14

2

@Giova.panasiti You can't use li.class a{} ? – Dec 23 '13 at 23:15

Wordpress add a class to menu link

4 Answers4