Adding a Filter to the Portfolio page

This tutorial goes over how to add a filter to the portfolio WordPress template. Now that we have the Isotope library added to our theme, we can use its filter functionality to create a nice filter to allow visitors to sort through our portfolio items. This tutorial will also use the Bootstrap button group component to style the portfolio filter.

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

Register Here!

  • licarrit

    And now the artifact is gone, so never mind.

  • Abu Jorhom

    I am really enjoying this.

  • Camila

    I have done everything like the tutorial and it is not working. It displays the tags on the top but when i press them they do not filter

    • Do you have any JS errors in your console? If you continue to have problems please create a post in the forum and we can get it sorted out.

      • Camila

        I just fixed it. it was actually something missing from the previous video. Thank you

  • Sean McGuire

    Is there an easy way to divide the different tags into different divs? So instead of filtering, tag x would be in the first div and tag y would be in a different div?

    I realize this defeats the purpose of this tutorial, but I thought I’d ask anyway.

    Thank you.

    • Sure, instead of wrapping each termname in a button simply wrap them in divs..

      • Sean McGuire

        Sorry. Poor wording. I meant to separate the actual images on the page into different sections.

        • Yeah, you are correct it is outside the scope of this tutorial but I am sure it is possible. You would just need to query the posts based on each tag.

  • Andy Jordan

    Just what I have been looking for.. thanks for this! Now more content! 😀

  • Camila

    hey i am trying to style the filters so that the whole thing is centered but it is not working, where should i put the margin-left margin-right auto?

  • at the top… “templates-portfolio.php” should be “template-portfolio.php”, yes?

  • Jon

    The default limit of items is ten is there anyway of extending this? Thanks

  • Thanks for this! Really helpful!

    Any idea on how to add pagination to this? I don’t want to load 50+ articles on one page. I know Isotope can work with jPages, but have no idea on how to make that work. Any tips?

  • Really love this site! It has covered so much about Bootstrap that I haven’t been able to find anywhere else. Also, I appreciate the troubleshooting strategies that you provide. Thank for sharing your knowledge!

  • David Sharkey

    Hi Brad.
    Another great tutorial – I learnt a lot here. I really love Isotope – I’ve seen that kind of effect on a lot of themes, so it was nice to discover how it’s done.

    Here’s the theme I made based on your tutorials: http://davidsharkey.net/spotlight
    It’s a bit rough around the edges again. I sort of ran out of steam when it came time to fix the bugs and make it fully responsive. I should really learn to finish what I start! But for now I’m happy to just continue learning and then… somewhere down the line I will finish a theme and set it loose in the wild.

    Thanks again. I’m finding these tutorials really helpful.