WordPress.org

1. StuFu2
   Member
   Posted 11 months ago #

   Hi,

   I am working with the standard wp_nav_menu and wanted to know if it is possible to insert a classed div into the HTML markup to surround the first sub menu. So the markup would look like:

   <div class="menu-header">
       <ul class="menu">
           <li class="menu-item"><a href="#">Page</a>
               <div class="subContainer">
                   <ul class="sub-menu">
                      <li>...</li>
                   </ul>
               </div>
           </li>
       </ul>
   </div>

   I would like to add the "subContainer" div in.

   Do I need to edit this line, or is there a different solution?

   <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

   Thanks in advance!

2. santosh.sahoo
   Member
   Posted 11 months ago #

   you can use a filter to add different class to differen menu items.

   Try this , it may help u.

   add_filter('nav_menu_css_class', 'auto_custom_type_class', 10, 2 );
   function auto_custom_type_class($classes, $item) {
   
       if ($item->type_label == "CUSTOM_TYPE_NAME"){
           $classes[] = "New_Class";
       }
   
       return $classes;
   }

   just change CUSTOM_TYPE_NAME to the name of your custom post type and New_Class with the name of your class and paste this snippet in your theme's functions.php file.

   You can also use the filter named "wp_nav_menu"

   check this out,
   

   Hope this helps

3. StuFu2
   Member
   Posted 11 months ago #

   Thanks santosh!

   I had a hard time deciphering that code and couldn't get it to work. Mostly because I am unsure of what you mean by "the name of your custom post type". Sorry, I'm still new to PHP and WordPress.

   That link you provided was really intriguing though and I'll be holding on to that for other modifications I may make to my navigation.

   For this I decided to avoid the PHP route and use jQuery instead by inserting the div with the before and after methods:

   http://api.jquery.com/before/
   http://api.jquery.com/after/

   Thanks again for the response!

Reply

You must log in to post.