Site icon StartFunction

Folding menu for WordPress pages using jQuery

jQuery folding menu for WordPress

Let’s talk about a simple technique to create folding or collapsible menus for the WordPress Pages widget. A while ago I was doing some coding for a IT Solutions site and they had a large ‘Services’ page with an introduction and 6 sections. They needed a parent page for the intro and 6 child pages and they didn’t wanted to show all the pages and subpages at once. I thought this would be an excellent job for jQuery and a collapsible or folding menu.

We’ll be creating here a folding menu using only jQuery, no CSS no special markup, and enqueueing the script with the recommended technique for WordPress.  Keep reading to see the solution…
This is what is going to happen after we enable our folding menu when someone clicks on a page that has subpages:

Let’s start by looking at the structure and see which selectors we could use. WordPress assigns a current_page_item class to the current page and a page_item class to any other page. When a page has children, the nesting is ‘.page_item ul‘ and ‘.current_page_item ul‘. We can start writing this:

[code=’js’]
jQuery(document).ready(function(){

jQuery(“.page_item ul”).hide();

jQuery(“.current_page_item ul”).slideDown();

});
[/code]

After the document is ready we hide every instance of children pages, and then, if the current page has children, we slideDown the list. That’s it, but wait, what happens if we click in one of the children? now we’re in trouble, we’re inside the ‘.current_page_item ul‘ nesting so jQuery won’t find it and therefore it won’t slide down the menu. Luckily, WordPress adds another class, which is current_page_ancestor, so we nest it with ul, the list that holds the current page, and now we can trigger the slide down effect.

[code=’js’]
jQuery(document).ready(function(){

jQuery(“.page_item ul”).hide();

jQuery(“.current_page_item ul, .current_page_ancestor ul”).slideDown();

});
[/code]

Enough for the jQuery code. Let’s enqueue it using the proper technique. WordPress has a function named wp_enqueue_script that will enqueue our script and it will test if it is already enqueued. If it depends on a library, like jQuery in this case, it will check to see if it’s already enqueued too.

<

pre>

function ilc_addFolding_init(){
wp_enqueue_script('jquery_folding', '/wp-content/themes/default/js/folding.js', array('jquery'));
}
add_action('init', 'ilc_addFolding_init');

[/code]

The first parameter is a handle name and the second is the path to the script. The third parameter is an array of handles that this script depends on. In this case, we only need jQuery, but for example, your script could depend on jQuery and jQuery UI. So, when do we ask WP to call the enqueue? you should call it from an 'init' action. A wp_head hook is too late to enqueue. A template_redirect could work too but I'd rather stick to the action hook recommended in the reference. That's all, you can now test it. You will see the parent pages visible with their children pages hidden. As soon as you click on the parent pages and the page loads, the children pages list will be shown.

Now, one more thing before we end. In the third caption there's a Page 4 > Page 4.2 title, the parent page and the child page. We can easily display the parent using this code within the loop instead of the typical the_title:

<

pre>

post_parent ) {
$page = get_page($post->post_parent);
echo get_the_title($page->ID);
echo ' > ';
} else {
// This is not a subpage
}
the_title(); ?>

[/code]

If this is a page, we grab the post_parent. Then we get the page, and from that page, we retrieve the_title. We render it, add a separator '>' or '' could work, and we end the conditional. Now we can display the current page title using the_title as usual.

Final thoughts

This collapsible menu is in no way perfect. Both jQuery script and parent page title display will only work for one level of nesting. Most of the times this will be enough but you can always extend the script and the php code to display more levels of nesting, to animate the children pages when they are displayed, for example, with fadeIn, or move them from right to left. jQuery always delivers a bit more.

UPDATE: March 11, 2009

Thanks to Kretzschmar bug reports I've modified the script so it will work on all levels of a Pages widget hierarchy. Download the WordPress plugin in the ILC Folding Menu page.

Exit mobile version