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.

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.

  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.

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.

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.

WordPress.org - Gearu This provided a really good starting point.

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.