Summary

In this short tutorial we are going to create a plugin to use the bundled jQuery UI library on the front end of your WordPress site.

It’s best to use the WordPress bundled scripts because they are loaded in noConflict mode. The purpose of noConflict mode is to help ensure there are not compatibility problems between jQuery and other javascript libraries loaded into WordPress. Want to know more about the topic? Read about “Why Loading your own jQuery is Irresponsible” by Pippin Williamson

Using jQuery UI we’re going to add an accordion style interface to a specific sample-page. This creates interactivity to your content. We will create a plugin to use the jQuery UI library which is bundled with WordPress.

An Accordion Example.

Getting Started

In your WordPress developer environment create a folder in wp-content/plugins directory named bundled-jquery-ui-test and create a PHP file with the same name bundled-jquery-ui-test.php.

In bundled-jquery-ui-test.php add the standard WordPress plugin header.

<?php
/*
Plugin Name: Bundled jQuery UI Test
Plugin URI: https://mydigitalsauce.com
Description: Loading bundled jQuery UI script on a specific sample-page
Version: 1.0
Author: MyDigitalSauce
Author URI: https://mydigitalsauce.com
License: GPLv2 or later
*/

Now lets create a function to enqueue our script, then create a folder called js and create a file called plugin-scripts.js.

function about_page_enqueue_script() {
	if ( is_page( 'sample-page' ) ) {
		wp_enqueue_script (
			'bundled-jquery-ui-test',
			plugins_url( 'js/plugin-scripts.js', __FILE__ ),
			array ( 'jquery', 'jquery-ui-core', 'jquery-ui-accordion' ),
			1,
			true
		);		
	}
}
add_action( 'wp_enqueue_scripts', 'about_page_enqueue_script' );

Change the is_page( ‘sample-page’ ) string to the page slug of your choice. *Note the third parameter of the wp_enqueue_script() function. It is an array of the dependencies we need for the jQuery UI library.

Open your plugin-scripts.js file and we will add some jQuery code to create the accordion.

jQuery(document).ready(function($) {
	$('#accordion').accordion();
});

Open up your sample-page within the WordPress Admin area and place the following HTML into the WordPress Content WYSIWYG Editor.

<div id="accordion">
	<h3>Section 1</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>Section 2</h3>
	<div>
		<p>
		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.
		</p>
	</div>
	<h3>Section 3</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>
</div>

This is the HyperText Markup demonstration lorem ipsum that will get turned into a jQuery accordion.

Now go to your WordPress Plugins Area and activate the Bundled jQuery UI Test plugin. You will now have a jQuery accordion on your sample-page, add CSS to style the accordion the way you’d like.

You can download the entire plugin here.

Thank you for reading this short tutorial, please leavea a comment below if this has helped you, thanks!