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.
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.
Need some help with Isotope & WordPress? … then let me know.