6

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>
  • 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 Dec 4 '13 at 19:39
  • @Chittaranjan sure, added some more info :) – Tom Oakley Dec 4 '13 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 Dec 4 '13 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 Dec 4 '13 at 20:36
0

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

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.