CODEWITHSUNDEEP
phpwordpressmenu
Ray
Ray

Reputation: 147

Need to add selector to child UL in WordPress menu

In order to make use of a particular jQuery menu in WordPress, I need the child UL (dropdown part of the menu) to have a selector added to it (third line, below):

<ul class="dropdown">
    <li>the first list item
        <ul class="sub_nav">
            <li>child list item</li>
        </ul>
    </li>
</ul>

Note: I left out the link code for greater clarity.

I'm not a coder. My PHP and javascript skills are of the copy-paste-tinker variety. Other forums have yielded lots of vague suggestions, but no solutions. I'm open to other solutions, but I'd like to solve it in one of two places:

  1. Modify <#?php wp_list_pages('title_li=&depth=2'); ?> in the theme header.php file
    [had to add # to code bit to make it show up]

  2. Add a function in the theme functions.php file

Upvotes: 0

Views: 1267

Answers (2)

Ray
Ray

Reputation: 147

Mike Little of zed1.com furnished a solution on a LinkedIn forum:

In the theme functions file:

class My_Walker_Page extends Walker_Page {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
if (0 == $depth)
$output .= "\n$indent<ul class=\"sub_menu\">\n";
else
$output .= "\n$indent<ul>\n";
}
}

In the header file where menu is to appear:

<ul class="dropdown"><?php $walker = new My_Walker_Page;
wp_list_pages(array('title_li'=>'', 'depth' => 2, 'walker' => $walker)); ?></ul>

Mucho gracias to Mike Little, who was a founding member of the WordPress team.

Upvotes: 1

Pragati Sureka
Pragati Sureka

Reputation: 1422

To add a class to the <ul> you can use jQuery, but i think you can do it without adding a class to the second ul.

To add class jQuery('ul.dropdown li ul').addClass('sub_nav');

now you can use jQuery('ul.sub_nav') for whatever you need for, but its same as jQuery('ul.dropdown li ul') so it won't make any difference either you add class or not.

Upvotes: 0

Related Questions