modifying a template and adding jQuery to it

Question

There is a page template called "All Bookmarks" for displaying all links grouped by category. I want to modify it 2 ways:

• each category of links should be collapsible/expandable by clicking on the category header
• the template should accept a list of categories to either include or exclude

For the collapsible part, assumably I need only add a class to each category header so that my jQuery code can affect them. For the category limiting, assumably I need a way to pass parametres to the template. However, I'm a complete noob to WP and I don't know

• where to put the jQuery code
• whether to add the class to the template, or to create a new template
• where to store a new template so that it will be available to Pages
• if templates can take parametres or if a template needs to refer to a custom PHP function
• where to store custom PHP functions

I've been wandering around WordPress.org for a while becoming more and more frustrated. I'd appreciate it if someone could address the above questions and perhaps point me to a good explanation of WP code structure.

Thanks!

Version: WP 3.1
Theme: Suffusion 3.7.7

Answer 1

Rather than modifying the template, since you're going to need jQuery anyway, you can do this..

Add to the functions.php

add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', get_bloginfo( 'stylesheet_directory' ) . '/blogroll-toggle.js', array( 'jquery' ) );
}

Or create a new folder in the wp-content/plugins/ folder, create a file inside the new folder, eg. blogroll-plugin.php, and add the following.

<?php
/*
    Plugin Name: Suffusion Blogroll Toggles
*/
add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', plugins_url( '/blogroll-toggle.js', __FILE__ ), array( 'jquery' ) );
}

The function will basically enqueue in the script whenever a page is loaded with the bookmarks template attached to it. jQuery is set as a dependancy for the script, so there's no need to load that seperately.

Create a file in the theme(or plugin) folder and call it blogroll-toggle.js, then place the following code into that file.

jQuery(document).ready( function($) {
    // Hide the blogroll lists
    $('div.entry ul.blogroll').hide();
    // Attach a click function to the headings
    $('div.entry h4').click( function() {
            // Make sure we're targeting the blogroll heading, if not, stop here(do nothing)
        if( !$(this).next('ul.blogroll') )
            return false;
            // Toggle the blogroll list that follows the heading
        $(this).next('ul.blogroll').toggle();
    });
});

The jQuery is untested, but it should work(i've done toggles dozens of times).

NOTE: If using as a plugin, remember to activate it like you would any other plugin.

Any problems with the code, let me know. :)