Shuffle & Filter Portfolio Items Using Isotope Checkboxes

This tutorial produces exactly what you see in the following video.

Includes all the jQuery, PHP, CSS and HTML which filters a portfolio style columns of images using the isotope effect.

There’s 4 simple steps involved:

1. Upload the jquery.isotope.min.js & isotope-set.js files to your child themes js folder.
2. Enqueue the js in your child themes functions file
3. Add some basic CSS which you can tweak and add to in your child themes style sheet.
4. Add the sample HTML to a new page in WordPress and swap out the image URL’s with your own.

Very easy to install all the code in a new full width page, directly in a template file or text widget.

Step 1

Related Solutions

• Filter Archive Columns in Genesis
• Basic Isotope Image Filter for Clickable Links
• Filter Portfolio in Genesis