How to Make a Search Results Filter in WordPress


By default, the WordPress search does a pretty great job. It’s not the best one out there, hence why so many opt for using Google search instead. However, with a little know-how, you can make it more powerful by adding a search results filter.

Although it has a few flaws, like how it doesn’t search post meta by default, most of the time it does a good job of returning what you’re after.

Sometimes though you’ll want the ability to add a filter to the results so the user has more control over what they get. Doing so is actually easier than you might imagine. All it takes is a little PHP and some know-how.

Table of Contents

  1. The HTML
  2. The CSS
  3. The PHP
  4. Final Code

Final Result

Finished example of the search results filter
Here’s the end result with our new filter.

1.) The HTML

For this tutorial, we’re going to be using the Twenty Seventeen theme from the WordPress team. Once you’ve got a copy open in your code editor of choice you’re good to go.

Start off by finding the file search.php and going to line 26. Just below that, let’s set up the HTML structure of our filter menu.

As you’ll see from the above, we’re using a standard nav element with some links inside it.

We’re also adding a title at the top using a standard class from the Twenty Seventeen theme, page-title.

2.) The CSS

The CSS is pretty straightforward with nothing too crazy going on. The Twenty Seventeen theme is already handling most of the spacing and typography for us.

Open up the style.css file, scroll right to the bottom and add the following CSS:

The only thing to note is the use of .page-nav a:not(:last-child). All this means is “apply to all anchor links except the last one”.

3.) The PHP

Now for the fun bit, the PHP!

The first thing you’ll need to do is open up the filefunctions.php. You can add this code wherever you want, but I recommend adding it at the bottom with some comments to separate it from the main theme code.

We’ll first be creating a function to apply the .current CSS class to our nav links. To do that we need to create a new function called ip_search_filter_item_class();.

Notice the use of the prefixip_ at the start of the function name. This is a best practice as you may have other plugins running which use search_filter_item_class();, so prefixing it brings the chance of that down considerably.

Next, we need to get the post type that will be passed as a query string (don’t worry, I’ll explain that in a few moments) and check it matches what’s passed to the function, like so:

Before we write the main function, let’s add this code to our HTML, like so:

The shorthand PHP statement on the “All” link just checks if our variable$_GET['post_type] is set, if not then we can safely assume we want to see all posts and pages.

Now let’s add the correct URLs to those links:

If you look closely you’ll see we’re just getting the home URL, adding the parameter?s= and applying the search query to the end.

The important bit is where we append &post_type=page to make sure we filter by the correct post type. You should end up with a URL like so:

If you test out the post link it’ll actually work because WordPress has built-in support for it. However, the page link won’t so let’s fix that in the following function.

We’ll start off by creating a filter for the results query:

Then we’ll set up some basic stuff like returning the query and checking we’re not running our code in the admin area:

Now we need to make sure we’re affecting the correct query, in this case, it’s the main search query:

The last step is to get our $_GET['post_type'] variable, sanitize it to make sure it’s safe and apply it to the current search query:

That’s it! The PHP is written and in place. If you’re not sure where to put the final code, go to the next section where you can grab the completed HTML, CSS and PHP.

4. Final Code




Ultimately the WordPress search does a pretty decent job and most of the time is fine. However, there’ll be times where you’ll want people to have a little more fine-tuned control over the results they get.

I’ve made sure to write the PHP in such a way that you can add to it for more complex filtering options, should you need to.

If you’ve got any questions, please leave me a comment below!

Show More

Related Articles

Leave a Reply

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