I have a simple post loop with buttons that list all possible categories. The categories are listed as following:
<div class="filter-nav">
<?php
global $post;
$cat_args=array(
'post_type' => 'post',
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
echo '<button type="button" data-category="' . $category->slug . '">' . $category->name . '</button>';
}
?>
</div>
And a WP loop as following:
<?php
$args = array(
'post_type' => 'post',
'orderby' => 'date',
'order' => 'ASC',
'status' => 'publish',
'posts_per_page' => -1,
);
$post = new WP_Query($args);
?>
<?php if ( $post->have_posts() ) { ?>
<div class="feed-slider">
<?php
while ($post->have_posts()) {
$post->the_post(); ?>
<div class="feed-column">
<?php if ( has_post_thumbnail() ) { ?>
<div class="feed-thumb">
<a href="<?php the_permalink(); ?>"></a>
<div class="image-overlay transition"></div>
<?php the_post_thumbnail( 'medium_large' ); ?>
</div>
<?php } ?>
<div class="feed-meta">
<p class="feed-categories">
<?php foreach ( ( get_the_category() ) as $category ) {
echo $category->cat_name . ' ';
} ?>
</p>
<a href="<?php the_permalink(); ?>"><h3 class="quicksand font-bold transition"><?php the_title(); ?></h3></a>
</div>
</div>
<?php
wp_reset_postdata();
}; ?>
</div>
<?php } else { ?>
<p class="no-content">Nothing found!</p>
<?php } ?>
What would be the approach to be done so that when one of the categories buttons is clicked, the loop is run one more time, filtering it with only the selected category?
