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.


Version: WP 3.1
Theme: Suffusion 3.7.7

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

    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

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

  • @t3los: if I edit functions.php, will it be overwritten on the next WP upgrade?
    – dnagirl
    Commented Mar 3, 2011 at 14:00
  • Yes of course, you could always move the code into a plugin instead though, i'll update the answer with an example of using it as a plugin.
    – t31os
    Commented Mar 3, 2011 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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