Sridhar Katakam

Genesis and WordPress Tutorials

Page Template for displaying Posts Grid in Genesis Filterable by Sub Categories of a specific Category

by 34 Comments

Updated on January 28, 2017 (till the Addendum section)

In this tutorial I share details on how to create a Page Template in Genesis that uses MixItUp for creating a fluid, multi-column, percentage-based grid of Posts filterable by sub categories of a specific category.

4 columns per row will appear at desktop widths, 3 at 960px and below, 2 at 568px and below and finally 1 at 320px and below. The number of columns that appear at a specific width or media query can easily be changed in style.css by specifying the width in % (25% for 4 columns, 50% for 2 columns and so on).

Each Post is set to display its featured image if present and a default image if the Post has no featured image, linked title and linked categories.

Screenshot:

filterable-recipes

Screencast:

The example used in this article is that of a Recipes category that has these sub categories:

Screen Shot 2015-02-24 at 9.08.42 pm

Summary of solution:

  1. Register a custom image size for Recipe images
  2. Create MixItUp's initialization script in which we specify the target as each .entry in the #recipes-list
  3. Create a custom Page Template in which we
    • add custom body class for any static Page that uses this template
    • force full width layout
    • enqueue MixItUp and its initialization script
    • hook a function to genesis_before_loop that displays the row of filters - all sub categories of Recipes category
    • remove the default Genesis loop i.e., content of static Page to which this template is applied
    • output a custom loop which displays all Posts having Recipes category (and any children of that category)
    • add mix CSS class to all .entry elements
    • remove Post Info
    • add Featured Image in .entry-header
    • remove Featured Image coming from Theme settings (if set)
    • remove Post Content
    • use genesis_post_meta filter to simplify the output of Post Meta so comma separated category links are displayed
    • hook a function to genesis_after_loop to add gap elements which fill any potential empty spaces, and ensure all grid items are spaced consistently.
  4. Add custom CSS for setting up Inline Flow grid.

Let's go.

Step 1

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 Sridhar

    Thanks for taking the time to write this tutorial.

    I was wondering if you know why the posts’ content might not show up in the grid? At the moment, on the site that I’m building, all I can see is the filter tabs but none of the blog posts’ content?

    I had to change the category ID in the page_blog.php file to get the filter to work in my theme (Parallax Pro). Is there something else in the file that I should consider editing?

    Thanks again

    Sam

    Reply

      • Thanks Sridhar, I’d already used ‘recipes’ as the parent category so although it had a different ID, the slug didn’t need changing.

        I’m thinking it has something to do with the Parallax Pro theme. Are there any general settings that you think might be affecting this?

        For example, does the Posts Page need to be set in Reading Settings?

        Thanks again

        Sam

        Reply

  • Hi Sridhar,

    Would it be possible to add custom post types into the loop below, if so could you show an example.

    Kind regards
    Darrell

    function sk_do_loop() {

    // accepts any wp_query args
    $args = (array(
    ‘post_type’ => ‘post’,
    ‘category_name’ => ‘recipes’, // use category slug
    // ‘category__not_in’ => array( 128 ),
    ‘posts_per_page’ => -1
    ));

    Reply

  • Hi Sridhar,

    I’ve already created my CPT and setup the categories, just not sure now to apply it to this tutorial. Is it simply a matter of changing line 69 ‘post_type’ => ‘post’, and inputing the relevant
    category ID and slug as detail above, or would it involve more?

    Best regards

    Reply

    • Are these categories a custom taxonomy or the standard WordPress categories?

      Do you want to filter CPT entries by the standard (built-in) WordPress category taxonomy?

      Can you describe what you are trying to do?

      Reply

  • Hello Sridhar,

    Thank you for this great tutorial, it is working great. One question, is there a way to display also post excerpts under each thumb?

    Thanks you very much

    Reply

  • Hello Sridhar,

    One more question please. Is it possible, from another page, to link to each category contained in Recipes page, and get only the posts that belongs to that category on the recipes page? For example, from the front page I would like to create a link named Juices and Drinks and point it to Juices and Drinks contained on the recipe page, but I am not sure how to configure that link. Would you be so kind and let me know how can I achieve that?

    I would really appreciate if you can guide me on that.

    Thanks

    Reply

  • Awesome tutorial! I there a way to a) have some content in my page under the main title before the filterable items? and b) have it so that when the user hovers over the sub category image the title & portion of excerpt can display? I was looking at this other tutorial of yours but wouldn’t know how to tear it apart for that function (https://sridharkatakam.com/filterable-portfolio-grid-in-altitude-pro-with-title-and-excerpt-appearing-on-hover/). Thanks!

    Reply

  • Hi Sridhar,
    I need this same result but for a custom post type of Projects.
    – What are the main differences?
    – Is there another tutorial for CPT?
    – How would the category nav work since it’s not subcats of a parent cat?
    – Shouldn’t I use an archive-ctp_name/php instead of a page tempalte?

    Thank you!
    Rob

    Reply

  • Hey Sridhar,

    Thanks so much for the great tutorial! Is there a way to limit how many of these pull and add pagination to it? I see the code mentioning posts_per_page but when I edit that number the pagination displays but goes a bit awry. Currently using it on a site with a LOT of recipes and would love to ease up the load time.

    Reply

  • Hi Sridhar,
    I had everything working, then for some reason the filtering stopped working and I can’t solve it. Can you please take a look and see what might be the problem:

    https://knastructural.com/projects/
    front end login (it will be live/public in a few days)
    username: knastructural
    password: 160aa9c2

    Thank you!
    Rob

    Reply

    • Hi Rob,

      Try this to fix:

      In page_recipes.php add

      [php]/**
      * Add "mix" CSS class to .entry
      *
      * @param array $classes existing post classes.
      */
      function sk_post_class( $classes ) {
      $classes[] = ‘mix’;

      return $classes;
      }
      add_filter( ‘post_class’, ‘sk_post_class’ );[/php]

      Reply

  • Hi Sridhar, I have everything working just fine but I would also like to add a drop down filter for colours how would I add this in thanks in advance Alistair

    Reply
    • >