[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… Read more 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!
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:
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:
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.
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!
|First Name||Last Name||Job Title||DOB||Status|
|Isidra||Boudreaux||Traffic Court Referee||22 Jun 1972||Active|
|Shona||Woldt||Airline Transport Pilot||3 Oct 1981||Disabled|
|Granville||Leonardo||Business Services Sales Representative||19 Apr 1969||Suspended|
|Easer||Dragoo||Drywall Stripper||13 Dec 1977||Active|
|Maple||Halladay||Aviation Tactical Readiness Officer||30 Dec 1991||Suspended|
|Maxine||Woldt||Business Services Sales Representative||17 Oct 1987||Disabled|
|Lorraine||Mcgaughy||Hemodialysis Technician||11 Nov 1983||Disabled|
|Lizzee||Goodlow||Technical Services Librarian||1 Nov 1961||Suspended|
|Judi||Badgett||Electrical Lineworker||23 Jun 1981||Active|
|Lauri||Hyland||Blackjack Supervisor||15 Nov 1985||Suspended|
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.
9 thoughts on “How to Use Any jQuery Script in WordPress”
Great tutorial Matt. I was wondering if you can go into a bit more detail regarding the method for including the jquery files in blocks. ( I just purchased the css/java toolkit) Do we need to open each file footable.js, footable.css, pagination, filtering, etc. and copy the entire contents into the block or do we just call it like this , . I tries using the ‘package installer’ from css/js toolbox to install the zip file for footable but it doesn’t seem to be working. If you have the time a more detailed summary of this article would be greatly appreciated. I can even swing a donation your way if it helps. Thanks again for the great article.
I have the screen shot in the article that shows how I included the initialization code. Then the only other thing you need to do is include the
Thanks a bunch Matt. Following your screenshot worked.
I did notice that the expand/close icons are not appearing. I see there are two images in the footable folder. Where should these be placed in the wordpress structure.
Also is it necessary to copy files other than those called in the example? In other words should I keep a copy of the complete footablev2.0.1 zip file somewhere, or is it okay to just copy the needed css and js files as I have done.
Thanks again for your time mate.
The best place to ask technical questions about FooTable is on the FooTable jQuery GitHub Issues page. Brad Vincent is the creator of FooTable and monitors the repo over there really closely.
But yes, all you need to have on your server is the required files, not the whole zip.
I’m trying to install the css & js toolkit but for some reason after the installation it asks to install once more:
” In order to start using CJT Plugin you need first to install the Plugin. The installation process will create CJT database tables, build-it Database records. Check for previous version and if the upgrade process is needed. The Plugin is in disable state untill the installation process took place! To utilize from the CJT functionality you must install the Plugin first!!
Installing Version 6.1.5 CE
When you install a new version of CJT for the first time or even upgrading from old versions, a number of processes will happen, which will take approximately 1 to 2 minutes. These processes include”
but its stuck and doesnt finish the installation. tried to delete and install again. same result
Can you help?
As the footable lite plugin loads on all pages I was determined to get this method to work, unfortunately though I just couldn’t get it to work using your walk through, think I’d need another 3 pages of step by steps as I obviously walk a lot slower than you Matt 🙂
As its the 1st time I have tried to manually use a plugin rather than plug & play its no surprise I fell over! hope you can re visit this walk through & expand a bit if you ever have time.
Thanks, perfect guide – and a nice plugin tip, too 🙂
I’ ve been trying to get a solution for this for days now. Many thanks man.