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.

Create a custom taxonomy using Meta Box plugin to filter posts

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, 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_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:

  • 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

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 *