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.
The example used in this article is that of a Recipes category that has these sub categories:
Summary of solution:
- Register a custom image size for Recipe images
- Create MixItUp's initialization script in which we specify the target as each .entry in the #recipes-list
- 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)
mixCSS 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.
- Add custom CSS for setting up Inline Flow grid.
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.