I'm looking to use the jQuery TreeView script on wp_list_pages to get a nice collapsable-tree effect going.

The script requires that I add some classes to the list elements such as:

<ul id="red" class="treeview-red">

So I tried putting this in my template:

First, load scripts on my template page via wp_enqueue_script()


Where "av_jquery_tree" is defined in a plugin:

function av_jquery_tree() {
wp_register_script('jquery.treeview', get_template_directory_uri() . '/js/jquery.treeview/jquery.treeview.js', array('jquery'), '1.0' );
wp_register_script('jquery.cookie', get_template_directory_uri() . '/js/jquery.treeview/jquery.cookie.js', array('jquery'), '1.0' );
add_action('wp_enqueue_scripts', 'av_jquery_tree');

Second, In order to add the class and id to the first ul element on the page, I just insert this script above the call to wp_list_pages:

    jQuery("ul").first().attr("id", "red").addClass("treeview-red");

Unfortunately, my output is just a bunch of red lines across wp_list_pages. Also keep in mind that I'm using the Suffusion Theme, which preloads jquery.

  • 1st off topic > Close Vote. 2nd: Why are you loading a custom plugin from wp-includes dir? Dont modify core! 3rd: That's a "Tree", not an "Accordion". 4th: You ask that many Qs, that you should know about "The title should tell about the Q." ... and "help!" doesn't add anything to it. – kaiser Jan 19 '12 at 5:11
  • Hi kaiser, I tweaked the question, I apologize for my frustration. I have not found any good resources for working with jQuery (or JavaScript for that matter) in WP. and on your second point, where should I put the script? I figured by putting it in its own folder in the js folder, I would always know where I put my JavaScript functions. – AlxVallejo Jan 19 '12 at 14:06
  • And if core gets reinstalled, then everything's gone. – kaiser Jan 19 '12 at 14:26
  • I downvoted because I think you could have done some more research on your part. There is documentation on both of these at codex.wordpress.org/Function_Reference/wp_enqueue_script and at api.jquery.com/addClass. – Jared Jan 19 '12 at 14:50
  • @Jared. I don't understand. I've clearly demonstrated an effort to include both wp_enqueue_script and addClass. From my understanding, I'm doing this right. That's why I'm asking you guys. There goes my reputation... – AlxVallejo Jan 19 '12 at 14:54

EDIT: After chatting with AlxVallejo, we came to a solution. Here's what we talked about:

You were not properly using the wp_enqueue_scripts hook and the functions that go along with it, as I informed you these hooks and actions need to be done in functions.php. You also discovered yourself that you were not initializing the TreeView script with jQuery.

The chat log is here if anybody else has this problem, we did some troubleshooting and I explained a few things, but basically it is all at the link below:


As kaiser pointed out, you should not add or edit any files in the WP core, so enqueueing a script from wp-includes is a no-no.

Also, your jQuery is not being run properly. As with all jQuery, you should use something like this when the DOM is ready (modified slightly for better functionality):

        jQuery("ul:first-child").attr("id", "red").addClass("treeview-red");

But you could also just make a file called something like jquery.treeview.addclass.js and enqueue it (see below) using WP to do this with best practices.

And for the scripts being enqueue'd, try something like this (assuming you are editing functions.php of the active theme):

function my_enqueue_scripts() {
    wp_enqueue_script( "jquery" );
    wp_enqueue_script( "jquery-treeview", get_bloginfo( "template_url" ) . "/path/to/jquery.treeview.js" );
add_action( "wp_enqueue_scripts", "my_enqueue_scripts" );

This was just a matter of using these languages/methods improperly. If your problem still persists, update your question with more information to why and I will expand my answer (and remove my downvote).

  • thanks for this. I've updated the question. I'm not sure why you would put the jquery tree files in the plugin directory. I placed them in a /js/ folder inside my child theme directory. I'm wondering whether Suffusion requires jQuery to go in the backend of that theme (not sure if you're familiar). Just by examining the source of the wp_list_pages, I can see that neither class nor attribute was applied. – AlxVallejo Jan 19 '12 at 16:05
  • @AlxVallejo I used a plugin directory as an example, but you can switch it with many different functions, like one you used in your updated question. Another one could be get_bloginfo('template_url');. Can you use Google Chrome to view the page then click the little wrench at the top right and go to Tools > Javascript console and see if there are any errors there? – Jared Jan 19 '12 at 16:39
  • I'm getting zero errors: screencast.com/t/DrlYAKzZ5 – AlxVallejo Jan 19 '12 at 17:08
  • @AlxVallejo If you click on the Console tab it should show you if there are any errors. If not, I'm guessing the jQuery is running but not finding any ul's for some reason. Can you verify that the scripts are being enqueue'd in the source code? – Jared Jan 19 '12 at 17:13
  • Still none. Maybe I should place the script right before the wp_list_pages? Can I include the script in the wp_enqueue_script? Or should I put it in the .js file? screencast.com/t/ihoiAWwAp6Z – AlxVallejo Jan 19 '12 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.