How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
With WordPress, other than using Tag and Category, you can use custom fields and custom taxonomies to create your custom posts filters. In this post, I will bring in a pretty simple method to do it by Meta Box plugin.
Meta Box plugin is free on WordPress.org. It gives you a framework to create custom fields. Besides, you can use this plugin to create custom taxonomies without coding.
Creating custom fields using simple UI can be achieved by Meta Box Builder, a premium extension of Meta Box. If you want to save money, you can use Online Generator instead. But if you can code, skip these tools.
In this guide, I will create two filters for my bookselling site with different publishers and authors. First of all, I need a custom post type named Book to display all the books. You can read this post on how to create custom post type with Meta Box plugin if you’re still not clear about it.
Create a Filter by Custom Taxonomies
Step 1: Create a Custom Taxonomy for Post Type
Now that I have a custom post type named Book, I will create a custom taxonomy called Publisher for it. Go to Meta Box > Taxonomies > Add New and fill in the information for the taxonomy in the Basic Settings section.
Next, put a tick to Book in the Assign to Post Type section to assign this post type to your books. Finally, choose Hierarchical? so that you can tick to choose the term in this taxonomy like the way you choose a category for posts. I recommend you should use this feature to make manipulations more easily.
Then, I need some terms in that taxonomy. In the Book, find your taxonomy’s name you want (all the taxonomies created are listed down the Add New). After fill in the name and slug, click the Add New box at the bottom.
Now, when you go to a post type of Book, you will see all the created taxonomies and terms display in the right sidebar. You just need to put a tick to the term for your post.
Step 2: Display the Taxonomy on the Archive Page
To display all the taxonomy above on the archive page, add these codes to archive.php where you want to show it.
<div class="filter-custom-taxonomy">
<?php
$terms = get_terms( 'publisher' );
foreach ( $terms as $term ) : ?>
<a href="?getby=cat&cat=<?php echo esc_attr( $term->slug ); ?>">
<?php echo esc_html( $term->name ); ?>
</a>
<?php endforeach; ?>
</div>In the code, 'publisher' is the slug of my Publisher taxonomy and you have to replace it with your own slug.
Now, open the Book archive page, your terms are here:
For example, when you click Youth Publisher, the slug is the-loai/tieu-thuyet/?getby=cat&cat=nxb-tre
However, you are not able to filter now. Let’s move to the 3rd step to do it.
Step 3: Handle the Filter Action with Custom Taxonomy
Add these codes to the functions.php file:
function justread_filter_archive( $query ) {
if ( is_admin() ) {
return;
}
if ( is_archive() ) {
if ( 'cat' === $_GET['getby'] ) {
$taxquery = array(
array(
'taxonomy' => 'custom-taxonomy',
'field' => 'slug',
'terms' => $_GET['cat'],
),
);
$query->set( 'tax_query', $taxquery );
}
} return $query;
}
add_action( 'pre_get_posts', ‘justread_filter_archive’);
Explanation:
justreadis the theme that I’m using (you can download Justread here).'Pre_get_posts'the hook requests to run the functionjustread_filter_archive( $query )before getting a post.'publisher'is the slug of the custom taxonomy.
And this is the final result. When clicking to the term, all books of that term are filtered.
Create a Filter by Custom Fields
Step 1: Create Custom Fields to filter post type
First, I will create a filter using custom fields named Author for my books.
In Meta Box > Custom Fields > Add New, choose the Text field and remember the ID of the field to add it to the code. Here, my field’s ID is author_book.
Don’t forget to choose Book for the post type in the Settings tab.
Then, visit your books and enter the value for created fields. In my case, I’ll fill in the author of each book here.
Step 2: Display the List of Custom Field’s Value on the Archive Page
In archive.php file, find the place to show the custom fields and add the code below:
<div class="filter-custom-field">
<?php
global $wpdb;
$meta_values = $wpdb->get_results( 'SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key LIKE "author_book"', OBJECT );
foreach ( $meta_values as $meta_value ) : ?>
<a href="?getby=field&field=<?php echo esc_attr( $meta_value->meta_value ); ?>">
<?php echo esc_html( $meta_value->meta_value ); ?>
</a>
<?php endforeach; ?>
</div>"author_book"is the ID of created custom field$wpdb->postmeta: point to the wp_postmeta table which stores custom fields’ value.
After that, when you visit the Book archive page, there is the created custom field:
Step 3: Handle the Filter Action by Custom Field
In the function.php file, insert the code below to handle the filter action:
function justread_filter_archive( $query ) {
if ( is_admin() ) {
return;
}
if ( is_archive() ) {
if ( 'field' === $_GET['getby'] ) {
$query->set( 'meta_key', 'author_book' );
$query->set( 'meta_value', $_GET['field'] );
$query->set( 'meta_compare', '=' );
}
}
return $query;
}
add_action( 'pre_get_posts', ‘justread_filter_archive’);Explanation:
justreadis the theme’s name‘pre_get_posts'the hook requests to run the functionjustread_filter_archive( $query )before getting a post.'author_book'is the ID of the created custom field.
Finally, this is the result when I filter all books of author J.K Rowling:
Final Thought
See, it’s not difficult to filter posts using custom fields and custom taxonomies with the help of the Meta Box plugin. So I hope that through this post, your website will bring about a better user experience. Good luck and see you again in the next tutorial.
— — —
The official publication at Meta Box.
