Adding descriptions to main menu items in JumpStart 2.0

[cfunkyk]

Hey Jason (or community),

I would like to add the menu descriptions into a site using JumpStart 2.0. I have added text into the menu description fields in wp-admin but it does not show on the frontend.

I see some mention of the Walker in your theme in menu.php
ThemeBlvd_Main_Menu_Walker()

So how do I utilize the Menu Description? I don’t want to interfere with the icons or mega menu setup by trying to hack it myself.

Thanks!

Topic

[Jason Bobich]

Hi,

I wouldn’t mess with the walker child class I wrote. — To get the ultimate control of the markup of the menu, you could technically write a child class of my child class, and then filter the theme’s main menu args to use your new child of my child class… but that’s already too confusing to even put in a sentence. 😉

Try messing with the basic “walker_nav_menu_start_el” filter. WordPress wraps this filter around the final output of every individual menu item. It pretty much gives you everything I think you’d need. Here’s an example:

function my_nav_menu_start_el( $item_output, $item, $depth, $args ) {

	// You probably want to check 1st level only
	if ( $depth == 0 ) {

		// description will be at $item->post_content,
		// append or add to $item_output in some way.

		// Example of appending it to the end, after the link

		$item_output .= sprintf('<span class="desc">%s</span>', $item->post_content);

	}

	return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'my_nav_menu_start_el', 10, 4 );

[cfunkyk]

Thanks! It works, now time to style 🙂

[Jason Bobich]

A random thought on this: It might make more sense (and be easier to style) if your description were inside your main menu item buttons (i.e. links).

You could do that by getting creative with how you finagle it in there. For example, you could use str_replace() to replace the closing </a> like this:

$desc = sprintf('<span class="desc">%s</span>', $item->post_content)
$item_output = str_replace( '</a>' , $desc.'</a>', $item_output);

[cfunkyk]

The walker class or menu descriptions do not allow for the children to show on mobile with your first option.

The finagling option does allow the children to show on the mobile menu. Thought you should know or we could note this for future requests here, etc.

Thanks so much!

[Author]

Replies