How to use jQuery plugin with WordPress plugin tutorial

I’ve ran several times into the problem of how to use jQuery plugin with WordPress posts and pages. Every time the solution was rather complicated having to modify the theme or to directly modify the HTML source of the post or page.

In this post I will show you how to easily use jQuery plugin with WordPress. For this I will use a WordPress plugin for jQuery plugins and at the end of the post you will find the download link for this free plugin.

What we want to achieve is to create a WordPress plugin that allows to easily integrate a jQuery plugin inside a WordPress post or page.

Here are 2 examples of what you can achieve using the plugin presented in this post (refresh the page to see the shuffle effect):

This text will be shuffled

this uses our WordPress plugin for jQuery in which we call on the shuffleLetters jQuery plugin from Tutorialzine.

The following is achieved by using the Long Shadow jQuery Plugin passed to the same WordPress plugin presented in this post.

+ Long Shadow jQuery Plugin + CodingDude WP jQuery Plugin

=

The code for the 2 examples is at the end of the article.

If you want to create your own, you can read my other post on how to create a jQuery plugin, because I will not go into details about that. I will assume that you already have one jQuery plugins that you want to try to insert into your WordPress posts and pages.

How can I use jQuery plugin in WordPress post and pages?

• Include jQuery for jQuery plugins – the first requirement for any jQuery plugin to work is to have jQuery included in the page where the plugin will run. WordPress already comes with a jQuery version embeded, so that is taken care of.
• Include jQuery plugin definition JavaScript file – the second requirement is that you will have to include the jQuery plugin definition which usually resides in a file called something like jquery.plugin-name.js
• Initialize the jQuery plugin on document ready – once the plugin JS file is included in the page or post it has to be initialized. jQuery plugins are normally initialized by a piece of JavaScript code that runs when the document finishes loading and it takes some parameters. Below we will create a WordPress shortcode that will initialize the jQuery plugin like this:

jQuery(document).ready(
 function($){
  $.plugin-name(options);
 }
);

The ready callback is called when the document finishes loading. The options object contains configuration options specific to the jQuery plugin in question.

All this can be done in WordPress in various ways. The way I propose in this post is via a WordPress plugin that implements a shortcode.

WordPress shortcode plugin for jQuery plugins

Let’s create a WordPress plugin that will allow us to use any jQuery plugin in our posts and pages. For the sake of example we will use the free jquery ShuffleLetters plugin downloadable from Tutorialzine, but of course this works for any jQuery plugin.

Adding the jQuery plugin JS file

As mentioned above, any jQuery plugin requires jQuery. Also, our WordPress plugin needs to embed into the pages the JavaScript file that defines the jQuery plugin. To do this we will use the wp_enqueue_scripts action from WordPress with wp_register_script and wp_enqueue_script in the functions.php file of our WordPress plugin

function script_that_requires_jquery() {
 wp_register_script( 'codingdude-jquery-plugin', '//www.coding-dude.com/wp/wp-content/uploads/2016/08/jquery.shuffleLetters.js', array( 'jquery' ), '1.0.0', true );
 wp_enqueue_script( 'codingdude-jquery-plugin' );
}
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery' );

I have uploaded the JS file of the ShuffleLetters jQuery plugin by going to Media > Add new and then getting the URL from there.

codingdude-jquery-plugin can be any name that uniquely identifies JS files added to the pages and posts of WordPress. It is important to note that in wp_register_script we passed in as one of the arguments the string ‘jquery’ to indicate that our script depends on the existence of jQuery. This is important because WordPress will know to load jQuery before loading our jQuery plugin which is what we want.

Creating the jQuery WordPress shortcode

Now that the jQuery plugin is included on our pages we have to make calls to it. For this we will define a custom shortcode that we can put in our posts and pages. Here’s the PHP code

<?php
function codingdude_jquery($atts, $content = null){
 $a = shortcode_atts( array(
 'selector' => null,
 'name' => null
 ), $atts );

ob_start();
 ?>
 <script type="text/javascript">
 jQuery(document).ready(
 function($){
 $("<?php echo $a['selector']; ?>").<?php echo $a['name']; ?>(
 {
 <?php echo html_entity_decode(strip_tags($content, '<br/>')) ?>
 });
 }
 );
 </script>
 <?php
 return ob_get_clean();
}
add_shortcode('jquery', 'codingdude_jquery');
?>

Let’s take a look at what this code does. The very last line of code add_shortcode adds a definition for our shortcode named jquery. The implementation is a function that returns a piece of HTML that will be placed inside the posts or pages where we will use it.

The jquery shortcode takes in 2 parameters and content. The 2 parameters are selector which will be the element selector we pass to the jQuery plugin, and name which will be the name of the jQuery plugin. The content will be the settings passed to the jQuery plugin. So we will use the shortcode like this

[jquery selector=".element" name="name-of-jquery-plugin"] 
...
jQuery plugin options
...
[/jquery]

That’s all!

Let’s now see the shortcode in action inside this very post. Refresh the page and watch what happens to the following text

This text will be shuffled

For this to work I’ve added the following shortcode to the post:

[jquery selector=".shuffle-element" name="shuffleLetters"]
"text":"This text will be shuffled",
"step" : 100
[/jquery]

+ Long Shadow jQuery Plugin + CodingDude WP jQuery Plugin

=

This works with the following shortcode inserted in the post:

[jquery name="longshadows" selector=".longshadows-wrap"]
imgShadowColor:["#cccccc","#dddddd"],
imgShadowLength:80,
boxShadowLength:0,
textShadowLength:50,
textShadowColor:["#dddddd","#ffffff"]
[/jquery]

You can see other examples of the Long Shadows jQuery plugin here.

Subscribe to our newsletter to download the CodingDude WordPress jQuery plugin