To allow filtering by both categories and tags simultaneously in your WordPress blog, you need to modify your JavaScript and WordPress query logic to handle multiple filtering criteria. Here’s how to do it:
Steps to Implement Dual Filtering:
- Update JavaScript for Dual Filtering
Modify your JavaScript to handle both category and tag filters. Instead of showing and hiding based on a single filter, you need to combine the selected filters for both categories and tags.
$(document).ready(function () {
// Initialize selected filters
let selectedCategory = null;
let selectedTag = null;
// Function to apply filters
function applyFilters() {
$('#support > div').hide(); // Hide all initially
$('#support > div').filter(function () {
const categories = $(this).data('categories').split(','); // Get categories for the item
const tags = $(this).data('tags').split(','); // Get tags for the item
const matchesCategory = selectedCategory ? categories.includes(selectedCategory) : true;
const matchesTag = selectedTag ? tags.includes(selectedTag) : true;
return matchesCategory && matchesTag; // Only show items that match both filters
}).show();
}
// Handle category filter
$('#filter .menu a').on('click', function (e) {
e.preventDefault();
$('#filter .menu li').removeClass('active');
$(this).parent().addClass('active');
selectedCategory = $(this).data('category') || null; // Get selected category
applyFilters(); // Reapply filters
});
// Handle tag filter
$('#tag-filter .menu a').on('click', function (e) {
e.preventDefault();
$('#tag-filter .menu li').removeClass('active');
$(this).parent().addClass('active');
selectedTag = $(this).data('tag') || null; // Get selected tag
applyFilters(); // Reapply filters
});
});
- Update HTML for Data Attributes
Add data-categories and data-tags attributes to your #support > div items so the script can identify them.
<div id="support">
<div data-categories="cat1,cat2" data-tags="tag1,tag2">
<!-- Content for this post -->
</div>
<div data-categories="cat1" data-tags="tag3">
<!-- Content for this post -->
</div>
<div data-categories="cat3" data-tags="tag2">
<!-- Content for this post -->
</div>
</div>
For categories and tags, replace cat1, cat2, tag1, etc., with actual slugs or IDs of your categories and tags.
- WordPress Query Adjustments
If you’re dynamically loading these items using PHP, ensure that your posts have appropriate data attributes for categories and tags.
<div id="support">
<?php
$query = new WP_Query(['post_type' => 'post', 'posts_per_page' => -1]);
while ($query->have_posts()) : $query->the_post();
$categories = wp_get_post_categories(get_the_ID(), ['fields' => 'slugs']);
$tags = wp_get_post_tags(get_the_ID(), ['fields' => 'slugs']);
?>
<div data-categories="<?php echo implode(',', $categories); ?>"
data-tags="<?php echo implode(',', $tags); ?>">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
- Add a Tag Filter Menu
Create a similar menu for tags, just like the category filter.
<div id="tag-filter">
<ul class="menu">
<li><a href="#" data-tag="">All Tags</a></li>
<li><a href="#" data-tag="tag1">Tag 1</a></li>
<li><a href="#" data-tag="tag2">Tag 2</a></li>
<li><a href="#" data-tag="tag3">Tag 3</a></li>
</ul>
</div>
- Optional: Add Default States
Ensure the “All” option is selected by default for both filters.
How It Works:
- The script listens for clicks on category and tag filter links.
- Selected filters (
selectedCategory and selectedTag) are updated based on user input.
- The
applyFilters() function shows posts matching both selected filters.
- Posts are identified using the
data-categories and data-tags attributes.
This approach ensures users can filter posts by both categories and tags at the same time, combining the two criteria. Let me know if you need further assistance!