How to Load a jQuery Plugin in WordPress

So you found a nifty jQuery plugin and you can’t wait to use it on your WordPress-powered site. But now you face the beginner’s challenge: how to install it without losing your sanity in the process. It’s not as difficult as it might seem if you know how to navigate the terrain. In the tutorial below I will show you how to prepare, load, and call a jQuery plugin on a WordPress website.

The Plugin

For this example we are going to load a very nice (and free!) responsive jQuery slider called PgwSlideshow:

pgwSlideshow Plugin  

Our plugin contains a full-length jQuery file and a minified version. It also contains both a full-length and min CSS style sheet. A “minified” file is one that has been stripped of all extra space. They’re virtually impossible to read but also smaller in size, which means they load more quickly on your page. The min versions are the ones we will load: pgwslideshow.min.js and pgwslideshow.min.css.

The Prep

This tutorial makes a few important assumptions. The first is that you’re using a child theme, which is strongly recommended because it protects your changes from being overwritten by future theme upgrades.

The second is that you have a functions.php file in your child theme. If you don’t, you’ll need to learn a little about this file and create one before proceeding.

The final assumption is that you’ve created folders in your theme directory called js, css, and images. If you like to organize your files differently, just be sure to adjust the file paths in this tutorial accordingly.

Okay, ready to make this happen? Let’s roll.

1. Make the Code Compatible with WordPress

First we need to tweak our jQuery file so it will work in the WordPress environment. WordPress comes loaded with the latest jQuery library, which is set to ‘No Conflict’ mode to prevent clashes with other Javascript libraries you may be using. Consequently, jQuery scripts using the “$” symbol won’t work in WordPress.

To fix the problem we’ll simply replace every occurrence of “$” with “jQuery” in pgwslideshow.min.js using the find/replace function of a standard text editor. For example, this bit of code in our script:

will become:

After saving the changes to pgwslideshow.min.js, we’ll place our plugin files at the following locations within WordPress:

pgwslideshow.min.js    <theme-directory>/js/pgwslideshow.min.js.

pgwslideshow.min.css  <theme-directory>/css/pgwslideshow.min.css.

2. Enqueue the Code in WordPress

Next we’ll to add some code to functions.php that will tell WordPress to load our two plugin files. This code hooks into the ‘wp_enqueue_scripts’ action that WordPress automatically executes whenever you load a page.

Since the slideshow will be on a page entitled “My Photography,” our function only needs to load the plugin files when that page is accessed. Note that you could also use a blog post title within the is_page() check below:

If you should later run into problems getting the slideshow to work, the code below can be temporarily added to the function above for debugging purposes. Just place these lines right after that last wp_enqueue_script() call:

This will display two success messages at the very top of the slideshow page upon successfully loading the plugin files. If those messages don’t appear when you hit the page, you’ve got a script loading problem on your hands.

3. Call the Script on a WordPress Page

Lastly, it’s time to place the necessary jQuery and HTML on our slideshow page. With the page open for editing, click on the WordPress text editor tab and add the following code. Notice that we have replaced the “$” with “jQuery” for the reasons explained in step one.

Now we have one final issue to address. WordPress automatically adds paragraph tags to your markup, which will actually prevent the jQuery call as formatted above from working. One way to fix the issue is to place the entire script call onto one single line like this:

However, the line is now more difficult to read. If you prefer to keep the original formatting you can disable the auto paragraphs instead with a handy little WordPress plugin called Raw HTML. This plugin adds a widget on the WP page editor that allows us to switch off auto paragraphs for a given page as shown below:

Raw HTML

Save your changes to the slideshow page, and that’s all there is to it. Mission accomplished!

Conclusion

As we’ve seen, loading a jQuery plugin in WordPress is relatively painless when you’re armed with the right information. And the principles discussed here apply to any jQuery plugin you may want to install on WordPress. Check out my live demo of this slideshow plugin – and enjoy a few nature photos while you’re at it – on my photography page. Please note that I have adjusted the css and used Adobe Photoshop Elements to create uniformly-sized slides for optimal viewing.

Good luck, and happy plugging!

Did you find this post helpful? Say thanks by clicking the Facebook “like” button below!

Resources

jQuery Documentation on ‘No Conflict’ Mode

WordPress Codex: Child Themes and functions.php

WordPress Codex: Enqueing Scripts

Raw HTML WordPress Plugin

PgwSlideshow jQuery Plugin

Sarah

Sarah holds a B.S. in Information Science and worked in the corporate world as a software engineer for 12 years before striking out as a freelance WordPress web developer in 2013. When she is not furiously coding away, she can be found outdoors exploring Florida's natural beauty with a camera in hand.