General Description:
I am using WordPress, I have created wordpress primary menu at the wordpress backend. In the frontend I’m displaying the dynamic menu using “wp_nav_menu” function.
Issue:
Below code is the menu in raw HTML.
<ul class="n-menu toplinks">
<li class="home"><a href="<?php echo get_option('siteurl'); ?>">
<p>Home</p>
</a></li>
<li class="s-menu"><a>
<p>About Us</p>
</a>
<ul>
<li><a href="an-overview.html"><i class="fa fa-university"></i>An Overview</a></li>
<li><a href="#"><i class="fa fa-eye"></i>Vision & Mission</a></li>
<li><a href="#"><i class="fa fa-history"></i>Goals</a></li>
<li><a href="#"><i class="fa fa-pencil-square"></i>Quality Policies</a></li>
<li><a href="#"><i class="fa fa-users"></i>Management Team</a></li>
<li><a href="#"><i class="fa fa-check"></i>Approvals - Accreditation</a></li>
<li><a href="#"><i class="fa fa-download" aria-hidden="true"></i>Downloads </a></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/assets/images/inner-images/nav1.jpg" alt="Image"></li>
</ul>
</li>
<li class="s-menu"><a>
<p>Admission</p>
</a>
<ul>
<li><a href="#"><i class="fa fa-info"></i>Overview</a></li>
<li><a href="#"><i class="fa fa-calendar"></i>Programme Offered</a></li>
<li><a href="#"><i class="fa fa-address-card"></i>Admission Guidelines</a></li>
<li><a href="#"><i class="fa fa-list"></i>Registration Guidelines</a></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/assets/images/inner-images/nav2.jpg" alt="Image"></li>
</ul>
</li>
<li><a href="contact-us.html">
<p>Contact Us</p>
</a></li>
</ul>
When I am using “wp_nav_menu” function to dynamically display the above menu(html raw code), then I am unable to show the end <li><img src="nav2.jpg" alt="Image"></li> tag at the end of every submenu.
Below I’m showing the “wp_nav_menu” function:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 3,
'container' => 'div',
'menu_class' => 'n-menu toplinks',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
Below is my “WP_Bootstrap_Navwalker” class, that I am using:
<?php
if ( ! class_exists( 'WP_Bootstrap_Navwalker' ) ) {
class WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "t", $depth );
$output .= "n$indent<ul>n";
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
if ( 0 === strcasecmp( $item->attr_title, 'divider' ) && 1 === $depth ) {
$output .= $indent . '<li role="presentation" class="divider">';
} elseif ( 0 === strcasecmp( $item->title, 'divider' ) && 1 === $depth ) {
$output .= $indent . '<li role="presentation" class="divider">';
} elseif ( 0 === strcasecmp( $item->attr_title, 'dropdown-header' ) && 1 === $depth ) {
$output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
} elseif ( 0 === strcasecmp( $item->attr_title, 'disabled' ) ) {
$output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
} else {
$value = '';
$class_names = $value;
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 's-menu nav-item menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 's-menu home nav_menu_css_class', array_filter( $classes ), $item, $args ) );
if ( $args->has_children ) {
$class_names .= ' dropdown';
}
if ( in_array( 'current-menu-item', $classes, true ) && 0 === $depth ) {
$class_names .= ' active acttl';
}
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $class_names . '>';
$atts = array();
if ( empty( $item->attr_title ) ) {
$atts['title'] = ! empty( $item->title ) ? strip_tags( $item->title ) : '';
} else {
$atts['title'] = $item->attr_title;
}
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
// If item has_children add atts to a.
if ( $args->has_children && 0 === $depth ) {
$atts['href'] = '#';
// $atts['data-toggle'] = 'dropdown';
// $atts['class'] = 'dropdown-toggle';
// $atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
if ( ! empty( $item->attr_title ) ) {
$pos = strpos( esc_attr( $item->attr_title ), 'glyphicon' );
if ( false !== $pos ) {
$item_output .= '<a' . $attributes . ' class="nav-link"><span class="glyphicon ' . esc_attr( $item->attr_title ) . '" aria-hidden="true"></span> ';
} else {
$item_output .= '<a' . $attributes . ' class="nav-link dropdown-toggle" id="navbarDropdown3"><i class="fa ' . esc_attr( $item->attr_title ) . '" aria-hidden="true"></i> ';
}
} else {
$item_output .= '<a' . $attributes . '><p>';
}
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ( $args->has_children && 0 === $depth ) ? ' </p></a>' : '</p></a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element ) {
return; }
$id_field = $this->db_fields['id'];
// Display this element.
if ( is_object( $args[0] ) ) {
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] ); }
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
public static function fallback( $args ) {
if ( current_user_can( 'edit_theme_options' ) ) {
/* Get Arguments. */
$container = $args['container'];
$container_id = $args['container_id'];
$container_class = $args['container_class'];
$menu_class = $args['menu_class'];
$menu_id = $args['menu_id'];
if ( $container ) {
echo '<' . esc_attr( $container );
if ( $container_id ) {
echo ' id="' . esc_attr( $container_id ) . '"';
}
if ( $container_class ) {
echo ' class="' . sanitize_html_class( $container_class ) . '"'; }
echo '>';
}
echo '<ul';
if ( $menu_id ) {
echo ' id="' . esc_attr( $menu_id ) . '"'; }
if ( $menu_class ) {
echo ' class="' . esc_attr( $menu_class ) . '"'; }
echo '>';
echo '<li><a href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '" title="">' . esc_attr( 'Add a menu', '' ) . '</a></li>';
echo '</ul>';
if ( $container ) {
echo '</' . esc_attr( $container ) . '>'; }
}
}
}
}
Please help me to solve this issue. How do I add dynamic “li” tag at the every end of submenu !!!