How to integrate your own Isotope jQuery plugin with your WordPress

I was recently asked if it was easy to integrate Isotope jQuery plugin into a WordPress website. It’s not uncomplicated to add isotope.js to your website - it’s just not as easy as linking a script to your header.

2 Ways to add Isotope jQuery Plugin to WordPress

As always, there are (at least) 2 ways to achieve this

1. Create a page template for the purpose - with all the code you want
2. Add the code to your themes function.php file and then create a page template

How to integrate Isotope jQuery with WordPress

There’s probably hundreds of tuts on the topic of integrating Isotope with WordPress and this is ‘kind of’ mine. In mid 2012 I launched my first Isotope jQuery plugin for WordPress … well it wasn’t a plugin. It was a page template you had to copy into your theme folder.

Isotope jQuery for WordPress page template

The page template and the instructions for it are still on my website … A lot of developers frown on the page template approach as novice coders will hardcode the js and CSS into the page template. Worse, the page template is stuck with your theme … so if you delete your theme, your isotope page will stop working as soon as you delete that theme folder.

Isotope jQuery for WordPress plugin

Towards the end of 2012, I launched my first WordPress plugin for Isotope - which was promptly pulled from WordPress plugin repo because the Isotope jQuery is not open source. So, if you are doing this at home, then be honest and go pay David / Metafizzy for his hard work and get a licence.

• and so the best approach is the function.php fileIf you open your theme folder then edit the file functions.php - It’s probably a blank file or includes code from whomever wrote your theme

You could then start to move code from my dbc_isotope.php file into the functions.php.

Functions you need to have are -

1. function to register and enqueue the isotope.js
2. function to register and enqueue the twitter bootstrap CSS (if you want) -
3. You’d then create your own script / function to hook the CSS attributes to the isotope.js
4. You’d then have to add a conditional function to determine what page templates will get the isotope treatment      - Look up WordPress conditionals like is_home or is_archive
5. Now you could view your website to check that isotope.js is being called and view source to check that the js script is being printed in the footer not header .. Isotope.js like a lot of jQuery can’t be called in your header.php page template.

Finally then, you’d modify your existing theme templates or create a new page template to make it all work the way you want.

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.