This is natively supported by WordPress. In the menus page, click “Screen Options” (in the upper right corner): Then check “CSS Classes”: You will now have a “CSS Classes” Option for each menu item:
The “Navigation” field is not where you want to place your CSS class. The navigation is what the user will see in the menu, so don’t put any code there. To enter a custom CSS class to your item, you need to do the following: Click the “Screen Options” tab in the top right corner … Read more
Your menu doesn’t appear to have any levels. start_lvl and end_lvl are used for the sub-menu wrappers. The outer wrapper for the menu, the <ul> is defined by the items_wrap argument of wp_nav_menu(): wp_nav_menu( [ ‘walker’ => new My_Walker(), ‘items_wrap’ => ‘<nav id=”%1$s” class=”%2$s”>%3$s</nav>’, ] );
By default the wp_nav_menu() function generates HTML with both a container and UL menu. It will, by default, output some HTML structure that looks like this: <div id=”container_id” class=”container_class”> <ul id=”menu_id” class=”menu_class”> <li>…</li> </ul> </div> Since you have defined the container as a ul, WordPress will try to keep the some valid HTML standards by … Read more
you can register a new sidebar, add it to the menu area and then add a widget to it: you can register a sidebar by adding this function to your functions.php: register_sidebar( array( ‘name’ => __( ‘Site Stat Widget’), ‘id’ => ‘stat-widget’, ‘description’ => __( ‘The Site Stat Widget’), ‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’, … Read more
You could replace the function that is getting the svg image like so: <nav class=”social-navigation” role=”navigation” aria-label=”<?php esc_attr_e( ‘Footer Social Links Menu’, ‘twentyseventeen’ ); ?>”> <?php wp_nav_menu( array( ‘theme_location’ => ‘social’, ‘menu_class’ => ‘social-links-menu’, ‘depth’ => 1, ‘link_before’ => ‘<span class=”screen-reader-text”>’, ‘link_after’ => ‘</span><img src=”‘.get_home_url().’/path/to/image.png”>’, ) ); ?> </nav><!– .social-navigation –>
I would lean very much towards a custom walker for this but I think I’ve managed to make it work using part of that code and some of my own. function add_position_classes_wpse_100781($classes, $item, $args) { static $fl; if (0 == $item->menu_item_parent) { $fl = (empty($fl)) ? ‘first’ : ‘middle’; $classes[] = $fl.’-menu-item’; } return $classes; … Read more
If I understand correctly, you want links with submenus to have an attribute of aria-haspopup. If this is correct, you should be able to do so using the nav_menu_link_attributes filter (WP 3.6 and above). You can also get around the necessity of having to write a custom Walker to check if an item has children … Read more
Solution: Copy paste the below code into your function. and then in template use my_nav_menu($menu_location); //put this in your functions class MY_Menu_Walker_Ext extends Walker { var $tree_type = array(‘post_type’, ‘taxonomy’, ‘custom’); var $db_fields = array(‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’); function start_el(&$output, $object, $depth = 0, $args = array(), $current_object_id = 0) { $output .=”<li><h2 … Read more
There is a body_class filter, if memory serves. That would be the right one to use.