7

I need to add a data-icon="" input to my Wordpress Custom Menu input box thing. This is so I can use an icon font and type the code in for a specific icon and in the CSS use pseudo elements to match it up and display the icon.

I've found loads of tutorials which show how to extend the Walker_Nav_Menu class so I can add an attribute, but none of them extend this into adding a new input box on the Wordpress Custom Menu screen (http://cl.ly/Sn0C) and then having the value of this displayed in the HTML.

I've used this code to add a data-icon input box on the Custom Menu admin screen (http://cl.ly/SmqM) but I'm not good enough at PHP to link it up to the Walker_Nav_Menu extension class to show the data-icon value in the HTML. Can anyone help me out? Thanks :)

I would prefer if this could be done in functions.php and/or without the use of a plugin. Thanks!

Btw, here is my Walker_Nav_Menu extension class code:

class data_type_walker extends Walker_Nav_Menu {
      function start_el(&$output, $item, $depth, $args) {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

           $attributes  = ! empty( $item->attr_title ) ? ' title="'     . esc_attr( $item->attr_title       ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="'    . esc_attr( $item->target           ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'       . esc_attr( $item->xfn              ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'      . esc_attr( $item->url              ) .'"' : '';
           $attributes .= ! empty( $item->data_icon )  ? ' data-icon="' . esc_attr( $item->data_icon        ) .'"' : '';

           $prepend = '';
           $append = '';

           if($depth != 0) {
                 $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .' aria-hidden="true">';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

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

EDIT: Chittaranjan asked me for some more info so here goes:

I'm calling this new extension (data_type_walker) on the class Walker_Nav_Menu in my header.php file where my nav menu is located. Calling it as follows:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class'=> 'nav-menu', 'walker' => new data_type_walker() ) ); ?>

The output should be something like this:

<li class="all the various wordpress menu classes"><a href="url" data-icon="whatever input I choose in the Custom Menu Admin section" aria-hidden="true">navigation text link</a></li>
Improve this question
4
  • Can you add some more code like how you are calling this custom menu and how the output will be as per your expectation?
    – Chittaranjan
    Commented Dec 4, 2013 at 19:39
  • @Chittaranjan sure, added some more info :)
    – Tom Oakley
    Commented Dec 4, 2013 at 19:45
  • I added the above class to my functions.php file but do not see any effect/extra field on the admin menu screen. Am I missing anything?
    – Chittaranjan
    Commented Dec 4, 2013 at 20:25
  • 1
    yeah so you need to add this: gist.github.com/westonruter/3802459 to your functions.php as well, sorry I didn't make that very clear in my post. I then edited this code so it shows data-icon instead of color, but I can't link it up so that the value of data-icon input is displayed in the HTML :/
    – Tom Oakley
    Commented Dec 4, 2013 at 20:36

1 Answer 1

Reset to default
1

Another option is to toggle the CSS Classes checkbox under screen option, WP Admin > Appearance > Menus, and attach the icon to a CSS class.

And add your icons using psuedo selectors to the CSS class.

enter image description here

enter image description here

Improve this answer
1
  • 1
    Sometimes a simpler solution is a better one, I genuinely think, from what was explained in the question, that @Lawless answer here is probably the sensible route. You just add classes in here and in your style.css you add in the individual icons with pseudo-selectors as stated in the question. Considering that you're essentially just trying to be able to target specific menu items, adding a class more efficient than writing a full function to add a data-icon attribute.
    – Tony Djukic
    Commented Apr 15, 2020 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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