Grow your CSS skills. Land your dream job.

WordPress: Filter posts by category and append them to Isotope container

  • # March 7, 2013 at 3:48 am

    I have a portfolio page with a loop that shows all posts from the “Portfolio” category.

    Within this category I have three more categories, Illustration, Branding, and Web.

    I want to be able to filter the posts depending on which category is selected.

    I’m trying this:

    < div id="filter-category">
    < a class="button" href="#" data-filter="*" class="current">Show All
    < a class="button" href="#" data-filter=".category-illustration" class="current">Illustration
    < a class="button" href="#" data-filter=".category-branding" class="current">Branding
    < a class="button" href="#" data-filter=".category-web" class="current">Web Design
    < /div>

    And this later down to append the selection to the grid:

    $(‘#filter-category a’).click(function(){
    var $selector = $(this).attr(‘data-filter’);
    $container.isotope({ filter: $selector });
    return false;
    });

    This works, but since all it’s basically doing is showing/hiding what’s already on the page, it pays no attention to the pagination (a “load more” button using Infinite Scroll). For example, if I click on the “branding” category and there isn’t anything from that category on the first page, nothing shows up until “load more” is clicked. So I need to be able to filter ALL the posts, no matter what page they’re on. I’m thinking I’ll have to do this with some sort of AJAX.

    Ideas?

    # March 9, 2013 at 3:10 am

    Anyone?

    # April 29, 2013 at 11:10 am

    Hey,

    Did you manage to sort this? I’m having the same problem. It’s driving me crazy!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".