Site icon Hip-Hop Website Design and Development

Including markup to sub menu based mostly on class

I wish to add a div on the after a sub menu. I wish to apply this modification provided that the guardian menu merchandise has a category identify of product-menu (comes from CSS class subject underneath menus part in WP Admin).

That is the markup I would like.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Classes</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Autos</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Automobiles and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Rent</a></li>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Magnificence</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
        </ul>
      </li>
    </ul>
    <div>SHOW ONCE</div>
  </div>
</li>

That is what I’ve up to now.

class WP_Walker extends Walker_Nav_Menu {

    operate start_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = ( $depth > 0  ? str_repeat( "t", $depth ) : '' ); // code indent
            $display_depth = ( $depth + 1); // as a result of it counts the primary submenu as 0
            $lessons = array(
                    'sub-menu',
                    'sub-menu-level-' . $display_depth
            );
            $class_names = implode( ' ', $lessons );

            if ($display_depth == 1) {
                    $output .= "n" . $indent . '<div class="sub-menu__wrapper"><ul class="' . $class_names . '">' . "n";
            } else {
                    $output .= "n" . $indent . '<ul class="' . $class_names . '">' . "n";
            }
    }

    operate end_lvl(&$output, $depth = 0, $args = array()) {
      if ($depth = 2){
        $output .= '<div>SHOW ONCE</div></ul>';
      } else {
        $output .= '</ul>';
      }
  }    
}

And what’s at present being returned.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Classes</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Autos</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Automobiles and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Rent</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Magnificence</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <div>SHOW ONCE</div>
    </ul>
  </div>
</li>

As you may see the div I am making an attempt so as to add is getting added a number of occasions. How can I get the div to solely seem as soon as straight after the sub-menu-level-1 listing?

Additionally how can I apply this modification so it solely applies for this explicit menu with the category identify of product-menu? Different sub menus do not require this extra div therefore why I am making an attempt to do it by class identify.