How To Make An On Page Filter For Wordpress

If you've ever shopped on Amazon, it's likely you already appreciate the power of filters to drill downwards into a large body of content and locate exactly what you're after. When searching for a product on Amazon there is always a sidebar full of filters that assistance yous refine your search, returning just the results that meet your most important requirements. Filters similar customer rating, brand, whether the product is for men or women, status (new/used), and many more.

Given how useful content filters are, it should probably come up equally no surprise that the power to create them for your WordPress content is built right into WordPress Core. And with a little know-how, you can bring that power to your site visitors–allowing them to navigate your content more nimbly than ever before.

In this post, we are going to walk you through the process of creating content filtering options for your users with a plugin.

Let's get started!

Why WordPress Post and Page Filtering?

WordPress is incredibly flexible. The core allows you to accept complete command over everything on your site. Post and folio filtering is 1 of the most powerful features of WordPress. There are several built-in functions for posts, pages, and custom content. Additionally, there are many ways to select, group, and filter items stored in the database. You can create sortable lists of search results past folio template, post types, taxonomy terms, template hierarchy, product pages, or anything else you want.

By default, WordPress comes with a built in search office. However, that search function leaves a lot to be desired and doesn't help when your readers want to filter the results in a particular style. That'south where the help of a third-political party plugin comes into play.

What Does Search & Filter Plugin Practice?

Search & Filter plugin is an easy to use plugin that takes the default WordPress search box to the next level. It allows your visitors to search for a item term and filter the results based on categories, tags, custom post types, custom taxonomies, date range, or even a combination of all of them for a more than refined search and more than authentic results.

Using the plugin is expressionless simple. Afterward you install and actuate the plugin, you lot'll be taken to the settings folio with a detailed caption of how to use information technology. In a nutshell, you lot tin can use a shortcode anywhere in your posts, pages or whatsoever widgetized sidebars. Alternatively, if you're feeling brave and don't heed getting your hands muddied with a little lawmaking, you tin paste a single line of code in your theme file.

Permit'southward take a look at a few examples.

How to Filter Posts With Search & Filter

The most basic usage of the plugin is the shortcode that allows visitors to search through all your categories and tags. The default shortcode looks like this:

[searchandfilter fields="search,category,post_tag"]

You tin can insert it into whatever post, page or a text widget and it will brandish the filtering options with search, category, and tags fields on the forepart end:

If you want to let visitors select more than than one category or a tag, you can easily do so by modifying the shortcode to include checkboxes instead of a dropdown and labeling each field:

[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

The examples higher up show how to use the plugin in the sidebar. Still, you lot can also apply information technology inside your theme file to display it on whatever page. In the example beneath, the grade displays on the blog folio. All you accept to do is paste the post-obit line of code:

<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?>

In our instance, nosotros've added information technology to the main index template of Xx Seventeen theme.

How to Filter Custom Taxonomies?

The above examples show a very basic usage of the plugin. But, Search & Filter plugin accepts other parameters as well. You can use a shortcode that allows your visitors to filter the search results simply for custom taxonomies.

Allow's say you lot have a store on your site with WooCommerce. If you want to include product categories in the search results, all you take to practise is add the following shortcode:

[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Production Categories"]

In this instance, I've also added headings before each field so visitors have an easier time distinguishing betwixt fields:

If you wanted to display this on a page in your theme, and so all y'all need to do is paste the following line of code in the appropriate page template nether Appearance > Themes > Editor:

<?php echo do_shortcode('[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]'); ?>

How to Filter Posts Past Date Range?

Another case use is if you want to let your visitors search for posts in particular category within a certain engagement range. In that case, simply paste the post-obit line of code in your annal.php:

<?php echo do_shortcode('[searchandfilter fields="search,post_date" types=",daterange" headings=",Post Engagement"]'); ?>

How to Filter Mail Formats and Pages?

In the terminal example, let's take a wait at filtering post formats and pages. If you publish video or audio posts, this shortcode will allow visitors only to find posts that belong to the postal service format you specify:

[searchandfilter fields="search,post_format" types=",select" headings=",Post Format" submit_label="Filter"]

If y'all want visitors to filter pages or posts, then all you demand is shortcode that accepts post types as parameters:

[searchandfilter fields="search,post_types" post_types="post,folio" headings=",Post Types"]

Aside from the examples to a higher place, the plugin permit's you get even more specific by including parameters for ordering the results in hierarchical lodge, to bear witness the count of posts in specified categories, add classes, filter authors, and much more.

How to Filter Posts Manually

Equally with anything WordPress related, there is a way to do information technology without the utilise of a plugin. Let'southward say you want to create a simple form that lets visitors filter posts from a certain category.
Start, you need to create a simple class:

<class activity="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">     <?php         if( $terms = get_terms( 'category', 'orderby=proper name' ) ) :              echo '<select proper noun="categoryfilter"><option>Select category...</option>';             foreach ( $terms every bit $term ) :                 echo '<selection value="' . $term->term_id . '">' . $term->proper noun . '</option>';              endforeach;             repeat '</select>';         endif;     ?>     <label>         <input type="radio" name="date" value="ASC" /> Date: Ascending     </label>     <characterization>         <input type="radio" name="appointment" value="DESC" selected="selected" /> Date: Descending     </characterization>     <push>Apply filters</button>     <input type="subconscious" name="action" value="customfilter"> </form> <div id="response"></div>

In the form above, the kickoff part simply lets the user select the taxonomies by using the get_terms function. You can use this for default categories and tags equally well equally custom taxonomies. The next part adds the radio buttons that allow visitors to display the results in ascending or descending order. Finally, the last part is the push button for the form that allows them to apply the selected filters.

The unabridged class was added to sidebar.php template in Appearance > Themes > Editor.

The adjacent step is to use the jQuery and so results can be displayed without having to reload the page:

jQuery(role($){     $('#filter').submit(office(){         var filter = $('#filter');         $.ajax({             url:filter.attr('action'),             data:filter.serialize(), // form data             type:filter.attr('method'), // Mail service             beforeSend:function(xhr){                 filter.find('button').text('Applying Filters...');          },             success:function(data){                 filter.find('button').text('Apply filters');                $('#response').html(data);              }         });         render false;     }); });

The last bit of code is to add together a office to part.php file that will process the result based on the selected filters. It will wait through the selected category and as long in that location are posts, it volition brandish them by the date they were posted in ascending or descending order. If no posts are found in the category, information technology volition testify the message no posts were found:

          function my_filters(){     $args = array(         'orderby' => 'date',          'gild' => $_POST['date']      );           if( isset( $_POST['categoryfilter'] ) )         $args['tax_query'] = array(             array(                 'taxonomy' => 'category',                 'field' => 'id',                 'terms' => $_POST['categoryfilter']             )         );        $query = new WP_Query( $args );       if( $query->have_posts() ) :         while( $query->have_posts() ): $query->the_post();             repeat '<h2>' . $query->mail service->post_title . '</h2>';         endwhile;         wp_reset_postdata();     else :         echo 'No posts found';     endif;       die(); }     add_action('wp_ajax_customfilter', 'my_filters');  add_action('wp_ajax_nopriv_customfilter', 'my_filters');

The final result displays like this 1 the front-stop:

Why You Should Let Your Readers Filter Posts and Pages in WordPress

The higher up methods are a bang-up way to permit users filter your posts. Only why would you want to do that?

WordPress already allows you to organize your posts with categories and tags, but information technology only allows users to view a unmarried category or tag at a fourth dimension. Moreover, if you use custom postal service types that apply their own categories, those categories will not be visible along with those used for regular posts.

The Search & Filter plugin is especially useful not only when you accept a lot of different categories and tags paired with yr's worth of content, it also comes in handy if you've added custom post types similar portfolio, gallery, testimonial, and more.

Some other example is that your visitors can hands utilise this plugin to filter through your products and find what they are looking for. And if you're familiar with the code, doing it manually allows y'all to take even more command over the style the search results are displayed and which parameters are used.

Wrapping Up

Making certain your website is easy to utilise by allowing your visitors to quickly find the content y'all want is a great way to provide them with a pleasant user experience and to encourage them to come back. If your site is rich with content, consider implementing page and post filtering to brand certain they get the content they want to see more of.

Nosotros'd love to hear any of your feel with WordPress search and filtering. Let us know in the comments below.

Commodity thumbnail image past graphicglobe / shutterstock.com