[Gelöst] How to add Menu Item Descriptions to your theme?

[Author]

Artikel

[andrewW-8]

I am trying to: Add Menu Item descriptions to my menu items

versteckter Link

This is the tutorial that shows how to do what I want. I was hoping you could help me with Step 3 as it pertains to the starter Theme code. I don't want to mess anything up...

------------------------

Step 3. Enable Walker in wp_nav_menu

WordPress themes use wp_nav_menu() function to display menus. We have also published a tutorial for beginners about how to add custom navigation menus in WordPress Themes. Most WordPress themes add menus in header.php template. However, it is possible that your theme may have used some other template file to display menus.
What we need to do now is find wp_nav_menu() function in your theme (most likely in header.php) and change it like this.

<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

In the first line we set $walker to use walker class we defined earlier in functions.php. In the second line of code, the only extra argument we need to add to our existing wp_nav_menu arguments is 'walker' => $walker.

[Noman]

Hi Andrew,

Thank you for contacting Toolset Support. Yes the Step #3 you have written above is correct and it's the good way to do it. Please note this question is not related to Toolset but it's a general WP question so I am happy to confirm that the step is correct.

I am not sure what the actual problem you are having, are you unable to find wp_nav_menu() function in your theme?

Thank you

[andrewW-8]

Thanks for the reply Noman.
You are correct in that I'm having problems dealing with wp_nav_menu()

I can find this function in header.php (I am using Toolset Starter Theme):

		<?php
		wp_nav_menu(array(
				'theme_location' => 'header-menu',
				'depth'          => 5,
				'menu_class'     => $menu_class,
				'fallback_cb'    => 'wpbootstrap_menu_fallback',
				'walker'         => new Wpbootstrap_Nav_Walker(),
		));
		?><!-- #nav-main -->

I was just wondering if you had a prior case study with this same issue.
It is telling me to add different function names then already specified:
Change menu_class to from $menu_class to 'nav-menu' and walker, from new Wpbootstrap_Nav_Walker() to $walker.

[Noman]

Hello Andrew,

We have not received this request before. But you can enable it in our Toolset Starter theme as follows:

1. Please install & activate Toolset Starter Child theme and add the following code in Child theme’s functions.php file (after line #10):

// Menu Item Description
function nav_menu_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
    	$item_output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
    }
 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'nav_menu_description', 10, 4 );

2. After that please add CSS for menu item description in Child theme’s style.css file, you can modify the CSS style of the description as required:

.menu-item-description {
	display: block !important;
	font-size: 13px !important;
	font-weight: normal !important;
}

This will display descriptions for each menu item, example screenshot is attached for reference.

Thank you

[andrewW-8]

Thank you so much. That worked beautifully. If you care here is the working example:

versteckter Link

Thanks for your excellent service and I hope this can help people in the future.