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 […]

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:
    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.

    • Nice work! Glad you are enjoying the tutorials.

    • Dzoni

      Wow, this is really great, well done! Can you please share how did you create that awesome menu with smile, animations and everything?