1

I have conntected T5_Nav_Menu_Walker to my WP website. https://gist.github.com/thefuxia/1053467

And I want customize my WP menu to be able to add icons from wp-admin via FontAwesome classes. Screenshot: Show

But when I add CSS class in menu nothing outputting in HTML code, because I use t5_nav_walker. How I can add icons in this wordpress walker? Php code of this walker:

<?php # -*- coding: utf-8 -*-
/**
 * Create a nav menu with very basic markup.
 *
 * @author Thomas Scholz http://toscho.de
 * @version 1.0
 */
class menu_walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        $output     .= '<li>';
        // $output .= '<li'.($item->current ? ' class="current"':'').'>';
        $attributes  = 'class="app-menu__item"';

        ! empty ( $item->attr_title )
            // Avoid redundant titles
            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 $attributes>$args->link_before$title</a>"
                        . "$args->link_after$args->after";

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }

    /**
     * @see Walker::start_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function start_lvl( &$output )
    {
        $output .= '<ul class="treeview-menu">';
    }

    /**
     * @see Walker::end_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function end_lvl( &$output )
    {
        $output .= '</ul>';
    }

    /**
     * @see Walker::end_el()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    function end_el( &$output )
    {
        $output .= '</li>';
    }
}
  • Are you included your walker as parameter in wp_nav_menu() function? – Maxim Sarandi Feb 7 '18 at 7:25
  • Of course. And the walker works well. But this walker clears all default WP mynu styles and output only styles which is in this php code. And I can't output menu icons – Orkhan Hasanli Feb 7 '18 at 7:56
  • Class on menu means in ul? You set static class. Or I’m miss understanding issue)) – Maxim Sarandi Feb 7 '18 at 8:02
  • I have included this walker in functions & added it into menu area <ul class="app-menu">...</ul> <?php wp_nav_menu(array( 'theme_location' => 'main_menu', 'menu_class' => 'app-menu', 'link_before' => '<span class="app-menu__label">', 'link_after' => '</span>', 'walker' => new menu_walker() )); ?> – Orkhan Hasanli Feb 7 '18 at 8:14
  • You could also try the Menu Icons plugin. it.wordpress.org/plugins/menu-icons – Stefano Tombolini Feb 8 '18 at 7:48
1

You need create additional field for menu item. Because if you will use class field - you will block adding additional class to links. But if it's ok - create <i class="$your_class"></i> before link title. And @Dilip Gupta gave solution to you.

  • I have added additional field via ACF and added Font Awesome classes in it. But! nothing outputting into <i class='" . $font_awesome = the_field('font_awesome') ."'></i> – Orkhan Hasanli Feb 7 '18 at 9:17
  • $item_output = "$args->before<a $attributes>$args->link_before$title</a>" . "$args->link_after$args->after"; add your field value beetwen $args->link_before and $title. – Maxim Sarandi Feb 7 '18 at 9:20
  • $font_awesome = the_field('font_awesome') the_field() return nothing. Use get_field() – Maxim Sarandi Feb 7 '18 at 9:22
  • Somthing like this? . "<i class='" . $font_awesome = get_field('font_awesome') ."'></i>" – Orkhan Hasanli Feb 7 '18 at 9:24
  • "<i class='" . get_field('font_awesome') ."'></i>" like this. Or assign $font_awesome = get_field('font_awesome'); some earlier and use this: $font_awesome = get_field('font_awesome'); "<i class='" . $font_awesome ."'></i>" – Maxim Sarandi Feb 7 '18 at 9:24
1

See, you need to update you $item_output variable. fontawesome outputs the icons in this format <i class="fa fa-angle-right"></i>.

you need to add this <i> within your <a> like this.

$item_output = "$args->before"
    . "<a $attributes>"
        . "$args->link_before"
        . "<i class='$variable_which_stores_fontawesomme_value'></i>"
        . "$title"
    . "</a>"
    . "$args->link_after"
    . "$args->after";

$variable_which_stores_fontawesomme_value should be equal to fa fa-angle-right.

  • I have added additional field via ACF and added Font Awesome classes in it. But! nothing outputting into <i class='" . $font_awesome = the_field('font_awesome') ."'></i> – Orkhan Hasanli Feb 7 '18 at 9:20

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.