The jQuery UI Accordion in WordPress

In a previous tutorial I demonstrated a method for adding jQuery UI tabs into WordPress. If you have read that tutorial, then this tutorial follows a similar method to create a jQuery UI accordion in WordPress. For the purpose of this tutorial we will be using the jQuery version provided by your default WordPress installation. In addition, we will manually add code directly into a post or page. Once you understand the basics, you can get creative with accordions in WordPress.

The WordPress enqueue function

There have been many articles written about how to properly include jQuery into WordPress. It is, however, important that you understand the WordPress enqueue function. My recommendation is to read the articles provided by the WordPress Codex on the wp_enqueue_script and wp_enqueue_style functions. Now let’s get on with the tutorial.

The HTML markup

This demonstration uses the basic HTML markup provided by the jQuery UI website. You can place this markup in a template or anywhere you want to customize your WordPress site. In our example, we paste this code into our post by click the “text” tab next to the “visual” tab in our post editor.

<div id="accordion">
<h3>Section 1</h3>

<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>

<h3>Section 2</h3>

<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
</div>
</div>

Paste the HTML markup in your post or template and now we are ready to move on to the jQuery code.

The jQuery UI accordion code

Using the code provided by the jQuery UI website we must convert it into something that will play nicely in WordPress. Use the WordPress recommended “no-conflict” method to prevent conflicts with plugins or your existing theme. In this example I created a file called accordion.js and saved it in a folder called js within our theme folder.

$(function() {
	$( "#accordion" ).accordion();
});

Using the code above, we have to convert the code as follows:

	jQuery(document).ready(function($) {
		$( "#accordion" ).accordion({
			collapsible: true
		});
	});

We then save this code in our accordion.js file and place it in our js folder.

Enqueue your script through the functions file

Once the script has been created and saved, the next thing we must do is enqueue the script through our functions file. In this example I am using “get_stylesheet_directory_uri()” because I am working with a child theme. If you are working with a parent theme, you will want to replace this with “get_template_directory_uri()”.

function my_scripts_method() {
if ( !is_admin() ) {
	wp_enqueue_script('jquery-ui-accordion');
	wp_enqueue_script(
		'custom-accordion',
		get_stylesheet_directory_uri() . '/js/accordion.js',
		array('jquery')
		);
	}
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

 Add your accordion stylesheet

We are also going to enqueue our stylesheet through our functions file. As stated above, because I am working with a child theme I am using “get_stylesheet_directory_uri”. If you are using a parent theme remember to replace this code with the one mentioned above.

wp_register_style('jquery-custom-style', get_stylesheet_directory_uri().'/css/jquery-ui-1.8.23.custom.css', array(), '1', 'screen'); 
wp_enqueue_style('jquery-custom-style');

For this example we used a custom jQuery UI stylesheet from the jQuery website. Remember to include the background images and icons in your download. I then uploaded the stylesheet and images into my css folder.

Conclusion

Once all the code above has been put together you should have a functioning accordion. Of course, you can style and change the look of your accordion. If you have a method that has worked for you, feel free to share it in the comments below.