jQuery Tree View and wp_list_pages

2 Views

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:

Read More
<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() 

wp_enqueue_script("av_jquery_tree");
get_header();

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' );
wp_enqueue_script('jquery.treeview');
wp_enqueue_script('jquery.cookie');
}
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: 

<script>
    jQuery(document).ready(function(){
    jQuery("ul").first().attr("id", "red").addClass("treeview-red");
    });
</script>

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.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. 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:

    http://chat.stackexchange.com/rooms/2258/discussion-between-alxvallejo-and-jared

    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):

    <script>
    jQuery(document).ready(function(){
        jQuery("ul:first-child").attr("id", "red").addClass("treeview-red");
    });
</script>

    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).