I am designing a new theme for WordPress and within this theme I wanted to use the accordion effect that comes with the jQuery library. By default WordPress comes packaged with a jQuery function but because the jQuery libraries are updated constantly I decided to call my own jQuery libraries from a CDN. CDN stands for content delivery network, large enterprises have their own CDN’s where they host copies of popular script. In the following example I’m using the CDN of Google. What I’m going to do is make a function for functions.php that unloads the default libraries, registers the new and updated ones and makes them available for use.

Copy the following function to your functions.php within your theme directory. Make sure this function is pasted within the php tags.

function my_jquery() {
if ( !is_admin() ) { // This makes sure the updated libraries are not used within the admin area to avoid conflicts
		wp_deregister_script('jquery'); 																			// using wp_deregister_script() to disable the version that comes packaged with WordPress
		wp_deregister_script('jquery-ui-core');
		wp_deregister_script('jquery-ui-tabs');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 			// using wp_register_script() to register updated libraries (this example uses the CDN from Google but you can use any other CDN or host the scripts yourself)
		wp_register_script('jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js');
		wp_enqueue_script('jquery');																				// using wp_enqueue_script() to load the updated libraries
		wp_enqueue_script('jquery-ui-core');
		wp_enqueue_script('jquery-ui-tabs');
		wp_enqueue_script('jquery-ui-accordion');
    }
}
add_action('init', 'my_jquery'); // load the function

Now with the updated libraries in place they can be used within your theme. Here is a small explanation how to do this. WordPress loads jQuery in “no conflict mode” to avoid conflicts with other scripts and therefor requires a special way of calling the jQuery functions. jQuery functions can be called anywhere in you theme using javascript. Add the following before the <⁄head> tag within header.php in your theme directory.

<script type="text/javascript">
	jQuery(document).ready(function($){ $("#accordion").accordion(); });
</script>

The code above creates a accordion function that looks for a div with the id accordion to create the accordion effect. Now you can use the correct CSS and HTML markup to create your own accordion menu. To get a quick idea on how it works, do the following. First add the jQuery stylesheet hosted by Google which includes all basic styles for all the jQuery effects. Eventually you will have to use your own CSS styles but this is a quick way to check if everything works and this stylesheet can be used as a basis for your own styles. Add the following within your &lthead> tags.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Use the following HTML markup anywhere in your theme to create the accordion effect.

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
			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.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
			<a href="http://bloggingabout.com/howto-updated-jquery-version-accordion-wordpress.html">Using updated jQuery libraries in WordPress</a>
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

Your accordion menu is now in place!