Archived topic
Can I click on buttons to display different post categories?
11 replies · Started by Ema on December 9, 2021
Hello!
I'm a wee bit out of my depth here. I'd like to have 4 buttons on my page for users to click on to display different post categories (like the screenshot below)
I have found this thread on the topic.
Say I have topic/catagory 'Resources' - would i add this code from the brilliant Elvin?:
`add_shortcode( 'generatepress_category_button', function() {
ob_start();
// Start your PHP below
foreach (get_the_terms(get_the_ID(), 'category') as $cat) {
echo '<button class="hero-cat-button" data-link="'.get_category_link( $cat->term_id ).'" type="button">'.$cat->name.'</button>';
}
echo '
<script> var catBtn = document.querySelectorAll(".resources-cat-button");
for(i=0; i<catBtn.length; i++){ catBtn.addEventListener("click", function() {
location.href = this.dataset.link;
}); }
</script>
<style> .resources-cat-button:not(:first-child){ margin-left: 10px; }</style>
';
// End your PHP above
return ob_get_clean();
} );
I would add a different class for each button - I'm not sure how to add the data link for the category.
Any advice you could lend would be much appreciated.
Best Wishes
Ema
Hi there,
are you looking to Ajax Load the Posts for specific categories or are you ok with it jumping to a new category archive on click ?
Hi David,
Yes, preferably with Ajax. I'm looking for it to be similar to what GP has in the library - the resources appear on the same page and you can flip through them?
like this
Really appreciate your time on this.
Ema
I don't have a 'good' Ajax solution for then themes archive templates. We have something in the works for GenerateBlocks that should make this kinda thing nice and easy.
Looking at the link provided, thats not using Ajax, and its very similar to what Dispatch in ours Site Library is doing:
https://gpsites.co/dispatch/category/time-saving/
The Dispatch site uses the GP Secondary Navigation, with a little bit of custom work.
1. We set the Customizer > Layout > Secondary Navigation --> Location to No Navigation. This removes it from its default home.
2. Then we use a Hook Element, in Dispatch the Hook is set to generate_after_header with a priority of 15 which positions it below any Page Hero ( block or header element ) on the page. And the PHP in the hook is this:
<div class="second-nav grid-container">
<?php
if ( function_exists( 'generate_secondary_navigation_position' ) ) {
generate_secondary_navigation_position();
}
?>
</div>2.1 Display Rules for the Hook Element can be set to just appear in the Archives.
I'm going to try this now David. I shall report back. Thank you!
Ema
Hi David - Couple of queries
Is it possible for me to make the secondary menu with the name of the CPT rather than Categories?
Resources / Projects / Reports.
At the moment I am pulling in the posts via WPSP - should I just revert back to archives for this?
Just looking at Dispatch. It's perfect.
Best Ema
So do you have a static page for each of the WPSP Lists ? If so - you would just use a page link ( ? )
I do at the moment. But, would be better to keep these particular CPTs as native archives, so we can pull them into the Publications page?
I've changed the cpt name to 'publication_categories'
If I had kept them as WPSPs - would I still be able to pull them into one page rather than jumping to a new page?
Hi David, I have added the menu and hook, brilliant. For the archives to move underneath the page hero, without flipping to a new page do I need to change them to categories rather than CPTs?
To make them AJax load without page refresh would require custom development - i had a look around for a 'good' plugin that does this but theres still little offerings in this area.
Using the Dispatch method, the menu items could be linked to anywhere including a taxonomy/archive.
That's Great David, thank you so much for your help!
Dispatch is such a good theme - Also was just reading the blog on Merch.
Very best
Ema
You're welcome :)
