[Resolved] Add Parent’s featured Image to sub-menu

[darren]

I have a request to add an image to each child menu. I understand I can use the Custom Links feature in the WP Menu builder and style appropriately, however I need this to be the featured image (or possibly a custom field) of the parent of the sub-menu. Non technical users need to be able to edit the parent page, change the featured image/custom field, and have the menu change without them editing a custom link. I’d prefer to do this using the GP Elements module if possible.

The first step is to get an image in the correct location – looks like I can do this with a custom hook (see https://generatepress.com/forums/topic/hook-inside-idmobile-menu/) but I am unable to find a filter for ‘wp_sub_menu’ or ‘wp_child_menu’ or whatnot.

Second step is setting the image’s dynamic data source, currently I’ve just got the source post and image source manually selected.

I’m using GB Pro 1.4.0 and GP Premium 2.2.2. Please advise if this is possible using GP Elements or if this needs to be accomplished some other way (code snippet, theme functions.php file, etc)

Many thanks!

[Leo]

Hi there,

I don’t think it’s possible to achieve this with the GP’s element module as there are no existing hooks inside the WP core menu system.

but I am unable to find a filter for ‘wp_sub_menu’ or ‘wp_child_menu’ or whatnot.

I don’t believe those actually exist – you will need to check with WP support team on this.

A request like this will definitely require a customized solution which is out of the scope of this forum.

You can try posting in a WP general forum like Slack to see if anyone has any suggestions:
https://wordpress.stackexchange.com/

Or contact a developer using a service like Codeable suggested at the bottom of this page:
https://generatepress.com/what-support-includes/

Hope this provides some insights 🙂

[darren]

Thanks Leo, will keep digging for a solution.

[Leo]

No problem 🙂

[darren]

I think I’ve got a usable solution that includes jQuery, in case someone else needs this in the future. (this is a quick proof-of-concept anyway, it could be improved)

Step 1, add a data attribute using Code Snippets:

add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args ) {
	$this_thumb='';
	$this_thumb = get_the_post_thumbnail_url( $item->object_id, ( isset( $args->thumbnail_size ) ) ? $args->thumbnail_size : 'thumbnail', $attr );
    $atts['data-thumb'] = $this_thumb;
    return $atts;
}, 10, 3 );

Step 2, add a hook that includes:

		
jQuery('#site-navigation .sub-menu').each(function(){
		var theSibling = jQuery(this).siblings('a');
		var dataThumb = jQuery(theSibling).data('thumb');
			if(dataThumb!==undefined && dataThumb!==''){
				var markup="<li class='nav-image'><img src='"+dataThumb+"' /></li>";
				jQuery(this).addClass('with-featured-image').prepend(markup);			
			}
		
	});

Step 3, style away.

[Leo]

Thanks for sharing!

[Author]

Posts