In this tutorial we shall set up a full width Page Template which when applied to a Page automatically displays all the Posts in top level categories in your Genesis powered WordPress site filterable by their corresponding categories.
In the past I wrote a similar tutorial titled Filter Posts by Category in Genesis. This tutorial differs from it in the following way:
- Usage of a custom Page Template instead of leaning on Posts page (home.php)
- Usage of MixItUp instead of Isotope
- Posts appear in columns
- In the filter row, only top level categories that have Posts directly in them will appear (versus if a sub category has Posts and none in the top level)
- The list of Posts that are filtered is limited to those that directly belong to top level categories
Note that I also shared a Page Template for displaying Posts Grid in Genesis Filterable by Sub Categories of a specific Category.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Add the following in child theme's functions.php:
Thanks Sridhar! It’s just what I was looking for. Is it possible to exclude the “uncategorized” filter button?
Regards.
The simplest solution would be to not leave any Post in the default Uncategorized bucket and assign to at least 1 other category. Would this work for you?
Yes, it could be a fine solution. Thanks.
Hey Sridhar, I was waiting for a tutorial as this but when I implemented the steps as described (on an altitude pro dev site – http://karen.ohanamedia.ca/blog/) I am getting nothing, just white page.
I doubled checked the steps.
Am I missing something here?
The two .js files are not being loaded.
Can you send me WP and FTP logins via https://sridharkatakam.com/contact so I can take a look inside?
Fixed.
1) You have implemented one of my other tutorials for adding full width featured image as the Page title background with Parallax effect. Because of that, all Pages were set to use template_singular-parallax.php. The Blog Page was not using page_filterable-categories.php. I excluded the Blog Page from the template_include filter in functions.php.
2) I uploaded the missing js/jquery.mixitup.min.js and images/default-image.png.
3) I added code in page_filterable-categories.php to show the Parallax background page title section.
4) Adjusted the CSS.
To elaborate the above points further,
1) In functions.php, changed http://pastie.org/pastes/10499218/text to http://pastie.org/pastes/10499216/text.
3) Modified page_filterable-categories.php: http://pastie.org/pastes/10499220/text
4) In style.css changed http://pastie.org/pastes/10499221/text to http://pastie.org/pastes/10499223/text.
thank you very much for your help, I guess one should be thinking before putting ALL your tutorials together as they may be conflicting.
There is one thing that is not working according to plan, the page is now full width and not within a page container like you have it in the tutorial.
Again, you can see here: http://karen.ohanamedia.ca/blog/
Looking forward to hearing from you.
thank you!
Fixed by changing http://pastie.org/pastes/10500848/text to http://pastie.org/pastes/10500845/text.
Hi Sridhar, i have the same issue mentioned above where the page is white with no content. I assume it’s a conflict with another customisation but i’m not sure how to trace it down. My site is currently offline so i’ve sent you a pm if you would mind having a look.
Kind regards
Darrell
I found the culprit of the conflict it was a duplicate body class used for this tutorial https://sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/ . Changing the body class prefix sk_ fixed the issue.
Now it’s working, i do have a couple question.
1. Is it possible to add the post meta after the title as shown on the other mixitup grid tutorial
https://sridharkatakam.com/page-template-for-displaying-posts-grid-in-genesis-filterable-by-sub-categories-of-a-specific-category/
2. I’m currently using the function below to include the “review” cpt on the masonry archive pages but the cpt’s aren’t displaying on the filterable page. Is they a conditional i could add to this function to include custom post types in the filterable grid?
function namespace_add_custom_types( $query ) {
if( is_category() || is_tag() && empty( $query->query_vars[‘suppress_filters’] ) ) {
$query->set( ‘post_type’, array(
‘post’, ‘review’
));
return $query;
}
}
add_filter( ‘pre_get_posts’, ‘namespace_add_custom_types’ );
Kind regards
Darrell
A followup to my previous question
Is it possible to add the post meta after the title as shown on the other mixitup grid tutorial
https://sridharkatakam.com/page-template-for-displaying-posts-grid-in-genesis-filterable-by-sub-categories-of-a-specific-category/
I’ve tried adding the following to the template after the title, but it doesn’t work. Can you offer any guidance as to what i’m doing wrong?
”
Kind regard
Darrell
sorry, this is the code
Line 105
https://gist.github.com/mac4media/c5bcfba1b20391b983f2
This is an awesome tutorial however I can’t seem to get it functioning properly. It seems I was having a bit of an issue due to the fact I also have the full width parallax header section on my pages that uses the template_singular-parallax.php just like isaac. I’ve updated the files stated in your reply to him on my server and made sure my js/jquery.mixitup.min.js, js/mixitup-init.js and images/default-image.png were all there as well (in my child theme) and the update to the style.css.
I have added a few blog posts with categories, created my new page and chosen the Filterable Categories template. I save, then view that page on my site and all that is there is the title of the page. So somehow something is not working correctly and not showing me my categories.
Is there something else I’m missing? Are you able to help me with this as I was crazy excited to have this implemented on my site.
Thanks!
Can you provide the URL of your site?
This is the link to the page – http://rcboa.com/sagekey/software-development-portfolio/
Is it possible to get this grid to show pages that have added categories? Used other tutorial for that 🙂
Hey Sridhar,
Thank you for all of your great tutorials, including this one!
I have one question: Do you know how you could add the additional level of “sorting” that mixitup offers on top of the category filtering?
For example: Sorting the results based on a custom field value and/or alphabetically?
Thanks 🙂
Hi Sridhar,
I don’t know why the filtering is not working on my projects page. It was working last week, and now it’s not. I’ve been troubleshooting it for hours and can’t see a problem, but it must be simple, so I hope you can nail it quickly. However, the site is not yet public so I sent you a htaccess login via your contact form.
Thanks so much!
Rob
Sridhar,
Sorry, I commented on the wrong post — should have been this one: https://sridharkatakam.com/page-template-for-displaying-posts-grid-in-genesis-filterable-by-sub-categories-of-a-specific-category/
Is there a way to do something like this without js, or in a way that would be AMP compatible? Or a CSS-only way? Even if it doesn’t have animations?