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.
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_loophaving 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-listdiv so it can be specified as the container for MixIitUp.
main.contentto 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.
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.