Home Forums Front-end Issues Display image-field in custom menu


Display image-field in custom menu

  • Hey guys,

    For a client I need to construct a menu that uses a grid-layout to show various custom taxonomy terms. These terms all have an “icon” image field assigned to them, and are able of being sorted by using the WordPress Menu management-page.

    What I need to do is display a menu using wp_nav_menu() or something like it, and I then need to display the icon images that are saved to the custom taxonomy term using an advanced custom field.

    Pretty deep querying, right? Can anyone help me with displaying images like this?

  • Hi @zcdb

    Great question.

    I would stay away from the wp_nav-Menu function as it will be too hard to customize the HTML, but instead go for a more data friendly function like:

    Use this to get you menu (or a similar function you find), and then loop through the items. Each taxonomy item will have a taxonomy and a term_id. You can use these pieces of data to construct the $post_id needed to load data from the term!

    You can load how to load data from the term from this doc:


  • Hey Elliot,

    Thank you so much, I got it working!
    I feel like I did it a bit dirty, but I got it working exactly as I wanted. Code for future reference to anyone who needs it:

    $items = wp_get_nav_menu_items('radiozenders');
    foreach((array) $items as $key => $item) {
    	$taxonomy = $item->object;
    	$term_id = $item->object_id;
    	$url = $item->url;
    	$title = $item->title;
    	echo '<li><a href="'.$url.'" title="'.$title.'"><img src="'.get_field('icoon', $taxonomy._.$term_id).'" /></a></li>';
  • Hi Elliot / ACF Forums,

    I’m having an issue getting a feature to work with ACF on a site I’m currently building. I’m using WP v4.2.4 and ACF v4.4.2.

    Specifically, I’m trying to display images associated with Taxonomy Terms in pages using wp_get_nav_menu_items and the Menus feature in the WP Dashboard, inspired by @zcdb and his provided code. His example which works perfectly with “Image URL” selected in my custom field, but doesn’t work when I select “Image ID”. I want to display images using “Image ID” instead of “Image URL” so I can designate a smaller image size to display instead of the full size image that is currently being output.

    I’ve looked through ACF’s documentation, and have been able to successfully display images using the “Basic display (ID)” technique, but after several hours of testing and scouring the forums I’m at a loss on how to do the same with @zcdb’s example.

    Is there a way to achieve the result I’m after?

    Thanks in advance for any advice you can offer!

  • @bknightly i cant say how to use it with ID,
    but i can show you how to use a size, when you do it with array (3 option beside id and url)

    $items = wp_get_nav_menu_items('menu_name'); //replace menu_name with menu-name, menu-id, menu-slug (menu-location is not valid!)
    foreach((array) $items as $key => $item) {
    	$taxonomy = $item->object;
    	$term_id = $item->object_id;
    	$url = $item->url;
    	$title = $item->title;
    	$image_url= get_field('icoon', $taxonomy._.$term_id); //replace "icoon" with the fieldname you give to the image
    	echo '<li><a href="'.$url.'" title="'.$title.'"><img src="'.$image_url[sizes][large].'" /></a></li>'; //replace large with size you wish

    hope that help nevertheless

    just if someone is interested, i use this for build a taxonomy menu with images:

    // to build a menu with image and name from a Taxonomy i use this (inside my archive-CPT.php):
    //this values you need to adjust: 
    //my_taxonomy => slug of taxonomy (3x)
    //my_taxonomy_image => name of imagefield at taxonomy page (1x)
    //teaser_thumbnail => image size
    $terms = get_terms("my_taxonomy", array(
        'hide_empty' => 0
    $count = count($terms);
    if ( $count > 0 ){
        foreach ( $terms as $term ) {
        $permalink = get_term_link( $term->slug , 'my_taxonomy');
        	$output .=  '<div class="taxonomy_menu_item"><a href='.$permalink.' titel="'.$term->name.'">';
            $my_taxonomy_teaserimage = get_field('my_taxonomy_image', 'my_taxonomy_'.$term->term_id);
            $size_taxonomy_teaserimage = 'teaser_thumbnail';
    	$taxonomy_teaserimage = $my_taxonomy_teaserimage['sizes'][ $size_taxonomy_teaserimage ];
    	$width_taxonomy_teaserimage = $my_taxonomy_teaserimage['sizes'][ $size_taxonomy_teaserimage . '-width' ];
    	$height_taxonomy_teaserimage = $my_taxonomy_teaserimage['sizes'][ $size_taxonomy_teaserimage . '-height' ];
    	$output .=  '<img alt="'. $term->description .'" src="'. $taxonomy_teaserimage .'" width="'.$width_taxonomy_teaserimage.'" height="'.$height_taxonomy_teaserimage.'" />';
    	$output .=   '<h3>'.$term->name.'</h3>';
    	$output .=  '</a></div>';
    echo $output;
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Display image-field in custom menu’ is closed to new replies.