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. To create custom taxonomies without coding, you can use MB Custom Post Types & Custom Taxonomy plugin or Taxonomy Generator tool (both are free).

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 General tab.

Create a custom taxonomy using Meta Box plugin to filter posts

Next, put a tick to Book in the Post Type tab 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.

Next, put a tick to Book in the Post Type tab to assign this post type to your books.

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.

Create terms for custom taxonomy to filter post

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.

choose a term for your book to filter

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:

The terms to filter book are displaying on archive page

For example, when you click Youth Publisher, the slug is book-type/novel/?getby=cat&cat=youth-publisher

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:

  • justread is the theme that I’m using (you can download Justread here).
  • 'Pre_get_posts'the hook requests to run the function justread_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.

all books of that term and taxonomy 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, click Add Fields button, 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.

Create Custom Fields to filter post type

Don’t forget to choose Book for the post type in the Settings tab.

choose Book for the post type of custom field

Then, visit your books and enter the value for created fields. In my case, I’ll fill in the author of each book here.

enter the value for custom fields to filter

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:

the custom field displays on the archive page

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_achive( $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:

  • justread is the theme’s name
  • ‘pre_get_posts' the hook requests to run the function justread_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:

filter all books of author J.K Rowling by custom fields

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 better user experience. Good luck and see you again in the next tutorial.

Pick Tools for Your Case Studies

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. How to Create ACF Flexible Content Field with Meta Box
  3. How to Create a Product Page using Meta Box Plugin
  4. How to Add Related Posts to WordPress Using Meta Box
  5. How to Create a Classified Ads Website using Meta Box
  6. Create Posts Series in WordPress Using Meta Box
  7. How to Add Guest Author in WordPress using Meta Box (Part 1)
  8. How to Add Guest Author in WordPress using Meta Box (Part 2)
  9. Create Dynamic Favicon in WordPress using Meta Box plugin
  10. How to Build a Hotel Booking Website Using Meta Box - P1
  11. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  12. Create a Filter to Find Hotels by Location
  13. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  14. How to Create an FAQs Page Using Meta Box
  15. How to Manually Reorder Posts with Meta Box
  16. How to Add Custom JavaScript Actions Using Button Field with Meta Box
  17. Display a User List On the Frontend with Meta Box
  18. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  19. How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
  20. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS
  21. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  22. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  23. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  24. How to Add Custom Fields to Display Banners using Meta Box Plugin
  25. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  26. How to Create a Recipe with Meta Box Plugin
  27. How to Create an Auto-Updated Cheat Sheet in WordPress
  28. How to Create Online Admission Form for School or University
  29. How to Create Online Reservation Form for Restaurants using Meta Box
  30. How to Create Buttons with Dynamic Link using Custom Fields
  31. How to Create Category Thumbnails & Featured Images Using Custom Fields

2 thoughts on “How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages

Leave a Reply

Your email address will not be published. Required fields are marked *