Add a jQuery UI Accordion Widget Area to a Wordpress Theme

Yahoo describes the accordion as a design pattern “that provides access to a large number of links or other selectable items in a constrained space.” If you are displaying a large amount of information and want to group them into logical sections, the accordion design pattern can be quite useful. This pattern has even more application in mobile web applications.

Today, we’ll look at how to create a jQuery UI-enabled accordion widget area for the popular Wordpress CMS.

Include jQuery and jQuery UI

There are a bunch of articles describing the proper way to include jQuery in a Wordpress theme by using wp_enqueue_script(). By adding a few lines to the theme’s functions.php file, the JavaScript files are referenced and loaded in the wp_head() portion of the Wordpress theme.

If you’d rather load the JavaScript files in the footer for performance reasons, you can also use a parameter in the wp_enqueue_script() function which will load the scripts in the wp_footer() function as described in the codex.

Create the Sidebar Structure

In order to use jQuery UI’s accordion, the structure that the markup needs is very specific.

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

The important thing to note is that Wordpress wraps all widgets in a <div> tag, so you are halfway there already. The <h3> and <a> tags can be added in the functions.php file which will take care of the rest of the structure:

Load the Sidebar and Call it in the Wordpress Theme

Next, we want to load the widget area to a sidebar file such as sidebar.php.

Then load the sidebar in the page template. The accordion is then displayed on the front-end of the WP theme by adding <?php get_sidebar('accordion-widgets'); ?> in the appropriate file(s). Usually, this will be added to page.php and/or index.php.

Final Steps

The last steps are to instantiate the accordion in the theme JavaScript file and then reference the script file and the jQuery UI CSS skin in the theme’s header.php file with <script> and <link> tags respectively. The <script> tag should go after the wp_head() function to make sure all necessary dependencies are loaded before the accordion is invoked. After that, you should have a functional accordion widget area. The only caveat with this technique is that all the widgets need to have a title in the Wordpress backend, otherwise the markup required by jQuery UI’s accordion won’t be met.

Conclusion

With a few minutes of work, this useful feature can be added to any Wordpress theme. To see everything in action, you can download the example Wordpress child theme from Github. The child theme is based on the TwentyEleven theme that ships with WP3.2, so it is probably best to download the file and activate it on a local install for development or testing purposes.