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 Go to and download the […]

You need to have an active subscription to view this content.

Register Here!
  • 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: 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 :

      //$() 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',

  • Kirsty Harris

    It appears this does not work. I have even tried the below :S

    • Can you please create a topic in the support form with more details on what isnt working for you? More than happy to help.

      • Kirsty Harris

        Hi Brad, I will create one today. Ive tried everything to no avail :S