Sridhar Katakam

Genesis and WordPress Tutorials

How to Filter Category Archives by Tags using MixItUp in Genesis

by 5 Comments

This tutorial provides the steps to set up a category archive template page in Genesis which displays tags of all posts in that category. Clicking on a tag will show the posts which have been assigned to that tag via MixItUp's filtering.

Screencast:

We are going to create a category.php template file in which we

  • set full width content (the filter section is a custom div floated left).
  • hook a function to genesis_before_loop having a custom WordPress query that fetches all posts from the current category, loop through each post and store the tag(s) (if present) in an array, sort the array so the tags appear alphabetically using usort(), remove the duplicates using array_unique() and output the tags with the markup needed for MixIitUp.
  • wrap the posts in a custom .posts-list div so it can be specified as the container for MixIitUp.
  • move .archive-pagination from under main.content to adjacent to it.
  • load MixItUp JS and the configuration script.
  • load Sticky-Kit to make the tags filter div remain in view once it's scrolled to.

Finally, we are going to write a small bit of JS to smoothly scroll to the top of the posts list after a filter button has been clicked and the CSS.

While the tutorial has been written for Genesis Sample child theme, it should work with minor adjustments in any Genesis child theme.

Step 1

Let's use pre_get_posts filter hook to set all posts to be shown on the category archives.

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi There- I’m seeing an issue when implementing this with the Infinity Pro theme.

    The tag buttons only filter the posts that are currently visible (let’s say I’m on page 1, and I’m showing 10 posts per page). The tag I click might not have an article until the 3rd page of results.

    So I click the tag, and it just hides everything that is currently shown. There is no indication to me as an user that I would need to click through multiple pages to see a post displayed for that tag I selected (nor should they have to, in my opinion).

    Is there a workaround to filter all the category posts and not just the current page of visible ones? That would make this much more useful. Thanks.

    Reply

      • Thanks- I actually looked into FacetsWP, but could not decide if it would be an ideal solution for me. I am displaying my tag filters as buttons on my page, similar to this example site from FacetsWP: https://easydigitaldownloads.com/downloads/category/extensions/analytics/

        However, that particular page reloads each time you select a filter, even though the FacetsWP documentation says a page reload is not needed. Do you have any idea why that might be?

        I think for now I’m going to stick with the MixItUp.js solution, and just display more posts per page.

        One more question I did have: How would I go about excluding specific tags from being displayed as filterable options?

        Thanks so much!

        Reply

  • Hi Sridhar,

    I set up the loop in the function so that it only displays tags that have more than 2 posts associated with them.

    My question is, is there a way to exclude a specific tag by name as well?

    I have the following code for the loop:

    // The Loop
    if ( $query->have_posts() ) { // if this category or its sub category/ies has at least 1 published post.
    while( $query->have_posts() ) { // for each post.
    $query->the_post();
    $posttags = get_the_tags(); // get the tags for the current post.
    if ( $posttags ) { // if there is at least 1 tag.
    foreach( $posttags as $tag ) { // for each tag.
    if ($tag->count>2) {
    $tags[] = $tag; // store the tag in the $tags array variable.
    }
    }
    }
    }
    } else {
    // no posts found.
    }

    Reply

  • Hey never mind, I figured it out. For anyone interested, I added this to the conditional inside my loop:

    if (($tag->count>2) && ($tag->name !== “sponsored” )) {

    Reply
    • >