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>';
    }
}
5
  • Are you included your walker as parameter in wp_nav_menu() function? Feb 7, 2018 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 Feb 7, 2018 at 7:56
  • Class on menu means in ul? You set static class. Or I’m miss understanding issue)) Feb 7, 2018 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() )); ?> Feb 7, 2018 at 8:14
  • You could also try the Menu Icons plugin. it.wordpress.org/plugins/menu-icons Feb 8, 2018 at 7:48

2 Answers 2

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.

6
  • 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> Feb 7, 2018 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. Feb 7, 2018 at 9:20
  • $font_awesome = the_field('font_awesome') the_field() return nothing. Use get_field() Feb 7, 2018 at 9:22
  • Somthing like this? . "<i class='" . $font_awesome = get_field('font_awesome') ."'></i>" Feb 7, 2018 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>" Feb 7, 2018 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.

1
  • 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> Feb 7, 2018 at 9:20

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.