0

I am using Advanced Custom Fields to add images to individual menu items. These images are being appended to the $item->title with the following code:

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {
      $item->title .= '<span class="inline-img' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span>';
    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);

Instead of appending the images, I am needing to have the <span> and replaced images display before the $item->title text.

The images are being replaced using the SVG Support plugin with the style-svg class.

For example:

<a href="#">
  <span class="inline-img">
    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
      <!-- SVG image -->
    </svg>
  </span>
  Menu Item Title
</a>

The wp_nav_menu code for rendering the menu:

$args = array(
  'theme_location' => 'global-footer-navigation',
  'menu_id' => 'global-footer-navigation',
  'container' => false,
  'echo' => false,
  'items_wrap' => '%3$s',
  'depth' => 0,
);
// Strip all remaining menu HTML except for <a>, <span>, and <img> tags
echo strip_tags(wp_nav_menu( $args ), '<a><span><img>' );

How can I filter the menu item title text and have the <span> display before it?

0

You are almost there, see comments in code below...

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {

      // Your original code which appends html string to current $item->title
      //$item->title .= '<span class="inline-img' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span>';

      // To prepend your html to title simply override $item->title with new value
      // and include $item->title at the end of your html string value...
      $item->title = '<span class="inline-img ' . $item->class . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span> ' . $item->title;

    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);

Though you should also note there is no $item->class property.

There is a $item->classes property which is an array. You will need to implode() array into a string, see example and comments in code below...

function wp3456789_wp_nav_menu_objects( $items, $args ) {
  foreach( $items as &$item ) {
    $image = get_field('icon', $item);
    if( $image ) {
      
      // if $item->classes is array then implode array values into string
      $classes = is_array($item->classes) ? implode(" ", $item->classes) : '';

      // prepend span and image to $item->title
      $item->title = '<span class="inline-img ' . $classes . '"><img class="style-svg" src="' . $image['url'] . '" width="" height="" alt="' . $image['alt'] . '" /></span> ' . $item->title;

    }
  }
  return $items; 
}
add_filter('wp_nav_menu_objects', 'wp3456789_wp_nav_menu_objects', 10, 2);
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.