Getting started with Isotope & WordPress

If you’re interested in customising WordPress then consider building a fluid grid design with a layout that automatically responds as the page is resized.

UPDATED 25 Aug 2012.
Here is a link to Download the plugin.

I’m using Isotope with the latest version of WordPress 3.3 release candidate.

Isotope – An exquisite jQuery Plugin for magical layouts

With a few days to spare do check out Isotope from David Desandro. This example uses the periodic table


Have a look as well at Desandro’s examples – click a few of the buttons on the Filter.


Firedog isotope

And here’s a good article from a UK design agency.


Summary of my Isotope Project

So far I’ve done the following:

  • Use a custom plugin to call jQuery and the Isotope (means you can change themes and still use this)
  • Use a custom page template to make it easy to use (drop this into your theme folder and create a page)
  • Use a list of posts to create my own ‘periodic table of elements’
  • Use basic CSS to wrap each post


Results? So far, so good.

Jquery isotope noCSS

All my posts are listed on a Page with a Page Template and the page layout updates.

You can see in this second screen shot the number of posts per row changes and the font-size is also decreased.

Jquery isotope noCSS narrow


Getting Started

Download the project and check out the demos. I suggest you update your test site to the latest version of WordPress.

I’m using my MacBook Pro and do all my development work using Coda, but you can use Text Edit here.

— You need a licence to use Isotope but it’s well worth it.


I’m going to make things easier and publish a demo page.  Then I’m going to make a Plugin / Page Template available later this week.



Other Things to read

Delicious – David’s Delicious list of Isotope related links

Roll Your Own Creative – the demo is broken and his code is design to work with custom fields & images. – Gearu This provided a really good starting point.



Need some help with Isotope & WordPress?  … then let me know.




Tags: , ,

Read previous post:
Google Analytics – Event tracking is great for customer engagement

Google Analytics provides a number of extra tools for the adventurous to improve tracking and provide valuable insights. Event tracking...