CODEWITHSUNDEEP
wordpresshtmlmenuinsert
Carlo Ravelli
Carlo Ravelli

Reputation: 87

Inserting a div into wp_nav_menu

I'm trying to add a div to my navigation menu in wordpress. wp_nav_menu loads all menu items but I have no idea how to add a div into the structure. My goal is to have a submenu pop up on menu-item hover, and to have an arrow image on top of the submenu block to make it look like a square text-balloon. I know how to get it where I want it and everything, but not how to get the div in there.

Right now, looks something like this

<ul class="menu">
 <li>
  <a>
   <ul class="submenu">
    <li>
     <a>

And I want it to look like this

<ul class="menu">
 <li>
  <a>
   <ul class="submenu">
    <div class="pointer">
     <li>
      <a>

How can I achieve this?

Upvotes: 0

Views: 6119

Answers (1)

maiorano84
maiorano84

Reputation: 11951

Your best bet would be to use a Walker Class. Add this in your functions.php file:

class Walker_Nav_Pointers extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() )
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
        $output .= "\n<div class=\"pointer\">\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() )
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n".($depth ? "$indent</div>\n" : "");
    }
}

And then wherever you're calling your nav menu, add this to the existing arguments:

<?php
$navArgs = array('walker' => new Walker_Nav_Pointers());
wp_nav_menu($navArgs);
?>

The above example is untested and I can't guarantee it will work straight out of the gate, but it should get you started.

More information on WP Nav Menus Here and some information on Adding Custom Walkers Here.

Upvotes: 4

Related Questions