How to Use Any jQuery Script in WordPress

[tWith all the hundreds of thousands of WordPress plugins available for free at the WordPress repository and the thousands of premium plugins available at plugin Marketplaces like FooPlugins, WooThemes, Envato, and more, why in the world would you care about having an even greater array of scripts available to you? Well honestly, in a lot of cases, you really should be able to find more or less what you need as a WordPress plugin. But here’s a couple reasons why I like to be familiar with jQuery scripts as well as just WordPress plugins:

1) The large majority of WordPress plugins, especially the free ones, do not code their plugin to load ONLY on the page(s) that it’s needed on. Let’s say you want to put a slideshow of a presentation on one page of your site. By and large, most gallery or slider plugins you’ll find both freely or commercially are going to load all of their scripts and styles into the header of your theme regardless of what page you are using the slider on. This is pork. Bloat. Excess. A waste of resources, a drain on your server, and an unnecessary hindrance to your page load time. For the most part, the resource drain will not be all that serious for one plugin. But if you have 5-10 plugins all doing this, it can really add up to a something noticeable.

By implementing jQuery scripts with the method I show below, I’m able to run them ONLY on the pages or posts that I need them on.

2) WordPress plugins are designed with the intention to allow them to work with any theme, on any server, with any language wherever they are installed. This makes them really robust and extensible. That is a strength. But it also has some consequences, namely in script size. Taking a simple jQuery script and making it into a full WordPress plugin necessarily means adding more code and bulk to it, making it a heftier and slightly slower piece of code than the raw jQuery script is.

jQuery scripts are most often much leaner than full WordPress plugins. Also, most jQuery scripts also come with a minified version (e.g. jquery.coolthing.min.js), making the impact on the page size and load time almost undetectable.

3) Sometimes there really isn’t a specific WordPress plugin for what I want to do. This might just be speculation, but I think WordPress plugins are generally targeted at large audiences and therefore the plugin tends to try to be everything to everyone instead of really good at one specific thing. But folks who release jQuery scripts often just post things up on their site that they custom created for a client. It’s easy and fast, whereas publishing WordPress plugins on the repository is a long and detailed process. This doesn’t mean one is better than the other, I’m just highlighting some reasons why you might sometimes find a more specific solution for your website in a jQuery script instead of a WordPress plugin.

So, with those things in mind I’ll show you what I do to include some awesome (and free) jQuery scripts in sites that I build.

The CSS & JSS Toolkit Plugin

Ok. Right off the bat, I’m telling you that in order to reduce the number of scripts in my header, I first add a new plugin.

What!? Total contradiction, Matt!

Well, not so much. This plugin does not add one line of code of it’s own to the front end of your website; it’s for backend use only. It’s called the “CSS & Javascript Toolbox“. It’s the most robust and intuitive way to add custom .js and .css files to a specific page or post (or CPT) that I’ve tried so far.  So, install that into your WordPress backend, then go to “Settings > CSS & Javascript Toolbox” to see it in action (I’m just going to call it the Toolbox from here on out to keep it simple).

Basically, it allows you to setup “boxes” that hold the <script> or <link> or even <?php ?> tags you need into the header or footer of any page or post you need it for. For this article, I’m showing how I used it to implement FooTable version 2, which was just released at FooPlugins and is just chock-full of awesome features that the WordPress plugin does not (yet) have.

Implementing FooTable jQuery for WordPress

Brad Vincent at FooPlugins really stepped up the demos and documentation for FooTable. You should go and just cruise around the demo site — for fun. Really! It’s a really dynamic illustration of how useful FooTable is as well as being a very detailed documentation of implementation and customization of the script. (HINT: select the tablet or phone icon in the top right of the screen to see the responsive sweetness in action.)

The first thing to do is take each of the scripts and styles mentioned in the “Getting Started” documentation page and add them to a block in the Toolbox. You can add each script or stlye to it’s own box if you want to be able to easily rearrange them, or just place them all into one block. Of course, if you want to have certain scripts loaded in the Footer instead of the Header, then they will have to be placed in a different box and the Footer selected as the location. Just make sure that you put the footable.js file before any of the other scripts (like the pagination, or filter, or sorting scripts since they rely on the footable.js script to work). Since this was the only jQuery script I was implementing into the specific site, I put each script and style into it’s own box just for flexibility. That way, I can rearrange each script or style, disable or enable them individually, experiment with placing them in the Header or Footer, etc.

Virtually every jQuery script is going to need to be initialized in one way or another. For FooTable, this is the default initialization code provided in the documentation:

<script type="text/javascript">
	$(function () {
		$('.footable').footable();
	});
</script>

Right away, you’ll find out that no matter what order you put this script in, or how you tweak it, this thing is not going to work. That’s because WordPress comes default with jQuery loaded and functions like this need to be called with the jQuery ready method. This is really the only real change you need to do with your script. Basically, instead of the code above, the “$(function” call needs to be changed to this:

<script type="text/javascript">
   jQuery(function($) {
	    $('.footable').footable();
</script>

Once you have all the scripts included, and your initialization changed to a jQuery ready function, then select the page/post you want them to appear on and you’re done! Here’s a screenshot of my Toolkit settings.

As a demo, I’ve included a FooTable here below. If you look at this article’s source you’ll see all the FooTable scripts and styles either in the header or footer. But if you look at any other page or article on my site (like my “Optimizing Images for WordPress” article, for example), they are not there.

Cool, right!?

Next, resize your browser to see FooTable’s responsive magic, filter the results with the Search field, sort the columns, or flip through the pages with the auto pagination. FooTable is really a powerful and lean machine!

Search: X

P.S. Another great thing about this method is being able to point the FooTable theme css to your own custom theme really easily. This is a simple customization of the metro FooTable theme. Download it here, if you like.

P.P.S FooTable executes the pagination by inserting content into an empty div tag that you provide. But the WordPress visual editor loves to DELETE empty div tags for you if you switch between the “Text” and “Visual” tabs (because you can’t POSSIBLY know what you’re doing, right!?). Even if you put an empty “span” inside there, it’ll strip out the span on the first swap, and then strip out the div on the second. The way to get around this is to insert this span with content hidden between the empty pagination div, like this:

<span style="display: none;">nothing</span>

It’s very “hacky” but it works. The big benefit here is that if you’re doing this for a client site, you just KNOW that they’ll swap the editor back and forth and the thing’ll be gone and they’ll blame you (rightly!). This just enables them to swap back and forth to their hearts content, and for you to look like a bad-ass.

Great jQuery Repositories

My go-to for a wide variety of quality jQuery scripts is Unheap. They are hand-picked and tested scripts with excellent documentation and most often great demos. I always go there first.

GitHub is a giant resource for all kinds of coding goodness. But it’s not great at helping you actually find the good stuff. So, while I still highly suggest browsing it for scripts you can use, I would say you should always look for an associated website, detailed documentation, and some way in which the developer provides feedback or support before committing to use a plugin from there.

jQuery hosts it’s own repository. I haven’t yet used anything from there, but it’s got tons of stuff to choose from.

At FooPlugins we’ve got two awesome jQuery scripts available for download: FooTable, and FooBar ($16). If you are a plugin developer, get in touch with me or use the contact page at FooPlugins.com if you are interested in helping expand our repository with your creations.

Go Hog Wild!

So now your boundaries in WordPress really are endless. You have a giant ocean of resources available to you to implement fairly easily. Last thing I’ll mention is that there definitely are other ways to include your own custom jQuery scripts in WordPress. I’ve created custom template pages with a unique header with the scripts I need added in. That’s a totally legit way to do it as well. I just find the ToolKit a TON easier. I’d love to hear of other ways you’ve done it, or to see links of your own unique implementations of jQuery scripts in your WordPress sites. Just chime in below.