How to Add a WordPress Search Form to a Custom Theme

WordPress theme developers have to worry about a lot of moving parts. Templates for posts, pages, archives, and taxonomies. The list goes on and on. One of the often overlooked aspects of theme design is a search form. Including a search form is the easiest way to let website visitors find the content they’re looking for quickly. It alleviates the need for complex, nested menus and other forms of navigation that can be cumbersome and overwhelming. Today we’re going to discuss several ways in which you can include a WordPress search form in the custom theme you are developing.

Before we get started, as a WordPress developer you might be interested in learning more about our White Label plugin. Our plugin lets you modify and customize the entire WordPress admin experience for your clients. Rebrand WordPress, replace logos, add custom color schemes, and more with the dozens of features in White Label. You can learn more about what the plugin has to offer by viewing the features list.

Now, with that out of the way, let’s talk about search forms.

---

Use WordPress Core’s Built-in WordPress Search Form Function

The search form is such a common feature of a website that WordPress has a built-in function to help you add one to a theme. It’s very simple and can be called with some optional parameters.

In its simplest form, it looks like this:

<?php get_search_form(); ?>

You can pass that function an array of arguments with two possible options:

• echo which is a boolean that determines whether WordPress will echo or just return the form. The default value is true.
• aria_label which is the ARIA label for the search form. This is an easy way to improve accessibility on your site by giving your form a unique description. It will help to separate this form from other search forms that might appear in your theme.

This seems simple enough. What else would you need, right? Well, this function gets you the bare-bones search form. There are no customizations possible in terms of the markup. You can combine this search form function call with your own template if you want.

Let’s take a look at that technique next.

---

Build a Custom WordPress Search Form Template

The WordPress templating system knows to look for a search form template in the active theme directory. If one is found, the get_search_form function will use the markup in that file instead. You will need to create a searchform.php file in your theme directory.

The markup is fairly simple. Here’s a very basic version you can use to start:

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
    <input type="search" value="<?php echo get_search_query(); ?>" name="s" />
    <input type="submit" value="Search" />
</form>

The most important parts to keep the same here are the action on the form and the name of the search input. Stick with the submit button as well unless you want, or need, to do something more custom.

Obviously, you’ll want to improve on this quite a bit. Add CSS class and ID tags to the elements. Convert the text in the search button to something that can be translated. But, just as a basic example, that chunk of code should get you started on making your custom WordPress search form template.

With the searchform.php file in place, any call you make with get_search_form will use that markup instead of the default provided by WordPress Core.

---

Write a Custom Search Form Function

This is a bit of an odd way to go about it but we’ll highlight it here just in case it’s useful for your situation. You can write a filter for the get_search_form function to replace the markup of the form. This might be something you want to do if you are writing a custom WordPress plugin, for instance.

Here’s an example of how that would work using the basic markup we used above:

function my_search_form($form) {
    $form = '<form role="search" method="get" action="'.home_url('/').'">';
    $form .= '<input type="search" value="'.get_search_query().'" name="s" />';
    $form .= '<input type="submit" value="'.esc_attr__('Search').'" />';
    $form .= '</form>';

    return $form;
}
add_filter('get_search_form', 'my_search_form');

This is a pretty edge-case solution. For theme developers, you are probably better off just working with your own searchform.php file and skipping this filter function.

---

Add Custom Post Type Support to a WordPress Search Form

Finally, before we wrap this up, let’s talk about how you can add support for custom post types to a WordPress search form.

This is quite easily done by adding some hidden input elements to the form itself. All you need to do is include one hidden element per post type you want to search to work with. For example, let’s say our site has the following custom post types:

• Teams
• Players
• Coaches

To make a search form that looks through those posts we would do this:

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
    <input type="search" value="<?php echo get_search_query(); ?>" name="s" />
    <input type="hidden" name="post_type[]" value="teams" />
    <input type="hidden" name="post_type[]" value="players" />
    <input type="hidden" name="post_type[]" value="coaches" />
    <input type="submit" value="Search" />
</form>

A neat trick here is that, instead of hidden inputs, you can use checkboxes and let the user decide what post types to search for. Tweaks like this are one of the biggest reasons why you shouldn’t rely on the default search form markup. Creating your own gives your theme so much more flexibility and functionality. It’s completely worth the time and effort.

---

Closing Thoughts on WordPress Search Forms

Writing your own search form markup, through theme files or a filter function, is one way you can get greater control over the built-in experience. Don’t let the built-in WordPress function take charge when you need to add a search form to your theme.

It’s important to add search capabilities to your WordPress themes. Many sites rely on search as a supplement to their site’s navigation. In fact, many sites with large amounts of content are practically unusable without a search form. Adding one with your own markup and styles is a great way to enhance the usability of your custom WordPress theme.

Of course, the default WordPress search results experience leaves much to be desired. In fact, you might want to check out our post about WordPress search plugins that can improve that.

---

Related Posts from Our WordPress Blog