Custom Walker Menu and Menu Icon

1 Views

Currently I’m building a custom menu for my WordPress theme but I’m having a bit of a hard time on one thing. I’m using a walkerclass so I can add some more details to my different menu elements. Besides that I’m using custom icons which I display with a plugin called menu-icons (https://github.com/kucrut/wp-menu-icons)

But I’m having not enough control over my elements right now. I get the following HTML export with the current code:

Read More
<div class="menuwrapper">
     <ul class="menu">
          <li class="menuitem>
               <a class="page" href="#">
                    <div class="menu-title">
                         <h3>
                         <span>Menu Title here</span>
                         <img src="homeicon.svg" />
                         </h3>
                    </div>
               </a>
          </li>
     </ul>
</div>

What I actually want is the following export: 

<div class="menuwrapper">
     <ul class="menu">
          <li class="menuitem>
               <a class="page" href="#">
                    <div class="menu-title">
                         <h3>Menu Title here</h3>
                    </div>
                    <div class="menu-icon">
                         <img src="homeicon.svg" />
                    </div>
               </a>
          </li>
     </ul>
</div>

To accomplish the first result I’m using the following walker class: 

<?php
    class Description_Walker extends Walker_Nav_Menu{
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $indent = str_repeat("t", $depth);
            $attributes  = '';

            ! empty ( $item->attr_title )
            and $item->attr_title !== $item->title
            and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';

            ! empty ( $item->url )
            and $attributes .= ' href="' . esc_attr( $item->url ) .'"';

            $attributes  = trim( $attributes );
            $title       = apply_filters( 'the_title', $item->title, $item->ID );
            $item_output = "$args->before<a class="page" $attributes><div><h3>$args->link_before$title</h3></div></a>"
                         . "$args->link_after$args->after";

            $output .= $indent . "<li class="menuitem">";

            $output .= apply_filters(
                    'walker_nav_menu_start_el',
                    $item_output,
                    $item,
                    $depth,
                    $args
            );
        }
    }
?>

What I’m thinking right now is that the plugin is adding the icons within the $title of the menu. That’s why I can’t separate them. I’m already browsing through the plugin files to see if I can override something. But I haven’t been to able to find a solution yet. If anyone can point me in the right direction that would be really nice. Maybe someone already had some experience with the plugin!

Kind regards,

Wouter

Post Views: 1

Related posts

1 comment

  1. I already solved the problem. I found the code which combined the title with the icon. I made some custom classes in that function.

    It’s in the type-image.php file of the menu-icon plugin.

    Old code:

    $title = sprintf(
        '%s%s%s',
        'before' === $values['position'] ? '' : $title,
        $this->get_icon_markup( $icon->ID, $values, $i_attrs ),
        'after' === $values['position'] ? '' : $title
    );

    New code:

    $title = sprintf(
        '%s%s%s',
        'before' === $values['position'] ? '' : "<div><h3>" . $title . "</h3></div>",
        "<span class="icon-wrap">" . $this->get_icon_markup( $icon->ID, $values, $i_attrs ) . "</span>",
        'after' === $values['position'] ? '' : "<div><h3>" . $title . "</h3></div>"
    );

    Just make some function override of it. I know it’s not best and the most clean way to do it but it works.

Comments are closed.