Adding Isotope to WordPress theme

This tutorial goes over how to add the Isotope layout library to our WordPress theme. This script will allow us to add some responsive layout features to our WordPress theme and portfolio page template. You will also use Isotope when building the portfolio filter in the next tutorial.

Steps

  1. Go to isotope.metafizzy.co and download the Isotope package
  2. Create a new file in the /js/ directory of your WordPress theme called isotope.pkgd.min.js with the code from Step 1
  3. Open the functions.php file and in the bootstrapwp_scripts function around line 119 add the isotope.pkgd.min.js script. Your function should now look like the following:

  4. Create a new file in the /js/ directory called main.js
  5. Open the functions.php file and in the bootstrapwp_scripts function around line 119 add the main.js script. Your function should now look like the following:

  6. Go to imagesloaded.desandro.com and download the imagesloaded.pkgd.min.js package
  7. Create a new file in the /js/ directory called imagesloaded.pkgd.min.js with the code from Step 6
  8. Open the functions.php file and in the bootstrapwp_scripts function around line 119 add the imagesloaded.pkgd.min.js script. Your function should now look like the following:

  9. Open the main.js file and add the following code:

  10. Open template-portfolio.php and edit the markup to look like the following:

  11. Done!

Notes from the Video

You can download the Isotope script here and the imagesLoaded script here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • licarrit

    I’m getting a weird artifact when I go to Sm and XS sizes. My footer jumps up to the left top corner over the image. Thoughts?

    • Eric C

      I had the same thing happen. After comparing my code to his, I noticed that I forgot to add the class “item” to the div that has “col-sm-6 col-md-4” in the template-portfolio.php file. Once I added the “item” class, everything started working as planned.

      • Thanks for pointing this out.

      • Leon Gotje

        I had the same problem, but i did add the “item” class. I fixed the responsive error by adding a “max-width: 100%” to the “item” class.

    • Double check your markup and check your console to see if there are any errors.

  • licarrit

    Okay this is weird. My filter buttons were working fine. I wanted to look at a different theme on my localhost so I loaded and activated it. When I was done I re-activated the theme I created but now instead of the portfolio filter buttons being in a nice row they are stacked in 2 columns that don’t respond to the size of the window. Everything else about them works fine (color changes, size, I can add new ones, etc.) it is just their layout. I reloaded isotope and reloaded all of the redux stuff since there was a new version. Problem is still there. Any ideas?

    • That is weird. I am not sure how something could randomly start happening without changing the markup. Have you inspected the filter container that see if there is a width set that is making the buttons go to two containers? Submit a new post in the support forum if you need further help. Please us know what you find.

  • Thank you.

  • Jorrit Tempelman

    Hi there, I’ve been busy with your tutorials for the last week and a half or so, and I believe this tutorial needs an update. When I go to the page:
    http://isotope.metafizzy.co/layout-modes.html the code under “Layout mode options” is a little different from your video. The container ID is now not an ID but a class, and the whole code seems just edited a little. I just added the code from the metafizzy website and after customizing it to fit my portfolio page, it worked immediately, so I didn’t need to use the imageloaded Javascript file… Just letting you know.

    I love your tutorials by the way, I mean REALLY, they help me A LOT! Thanks!

    • Glad you got it all sorted out and are enjoying the tutorials. If you run into any problems feel free to jump into the support forum with any questions you may have.

    • Thanks for the Tip with the container ID. I had the same problem!

      Now my main.js looks like this and it works without imageloaded.js :


      jQuery(document).ready(function($){
      //$() will works as an alias for jQuery() inside of this funktion

      // initialize Isotope after all images have loaded
      var $container = $('.portfolio-items').isotope({
      itemSelector: '.item',
      layoutMode: 'fitRows',
      });
      })