By using custom posts and custom fields you can make a great experience for users to view data on your WordPress website. This experience can be extended even further by filtering data based on the value of custom fields. In this tutorial I will be using 3 plugins:
For this example we will be filtering generators by manufacturer, size and fuel.
Step 1: Register The Post Type
Using Custom Post Type UI, add the post type. This will make a new option appear in the admin sidebar.
Step 2: Register The Taxonomies
You will also be using the Custom Post Type UI plugin for this part. The taxonomies will be the fields you want to filter by.
Attach the taxonomy to the post type you just created, in this example it is ‘Generators’.
Step 3: Create The Custom Fields
Using Advanced Custom Fields create custom fields for your post type. Make sure the location rules are set to your post type.
The custom fields you will be filtering by must be set to field type ‘Taxonomy’.
Step 4: Add The Filter To Your Template
I added the following code to the template file I wanted to display the filter:
echo do_shortcode( '[searchandfilter fields="manufacturer,size,fuel" submit_label="Filter"]' );
Add the appropriate CSS to integrate the filter into your design.
Step 5: Create The Taxonomy Template
Create a file labeled taxonomy.php. This template depicts the data that appears when the filter is used. Most commonly you will want to show sample data of the custom posts and to the actual custom post’s page. Below is an example
Step 6: Create The Custom Post’s Template
Label the file single-posttype.php. In this example the file is named single-generator.php. Here you will probably want to print all of the custom fields assigned to this post. It’s the same concept as the taxonomy template above but you don’t need to link to the post.
That’s all you need! Now you have a fully functional filter that can sort through all of your custom data. Fine tune your template files until you have just the experience your visitors are looking for.