The Search feature is an integral part of a website. When users visit a site and they are looking for a particular piece of information they have in mind, “Search” is what they search for ( see what I did there! ). It provides for a user-friendly way to get any information on the site presented in front of you instead looking for it throughout the site. WordPress recognises this and provides multiple ways to add a search function to your site. These could include the search widget or a third-party search plugin. But if you want to set up your own search field anywhere on the site, it can be done using the get_search_form function provided by WordPress. In this article, we are going to create a custom search field using the get_search_form function. So, let’s get started!
This tutorial involves knowledge of the WordPress API but even if you don’t have technical knowledge of WordPress, just follow along and hopefully, you’ll get to learn a lot!
This is what we will be creating using the get_search_form action and filter hooks in WordPress!
Getting Started
Initially, you need to decide where do you want to put your search field. Since the sidebars have an in-built search widget, there is no point creating a search form there. The next best thing is the header. A search form in the header is a common site across the internet. We are also going to place our search form in the header. It’s going to be placed right besides the site branding area. Take a look at the screenshot below –
Usually, the header.php file deals with the header area but it may be different depending on your theme. I am assuming you’ll be able to arrange the layout of the site so that search form is on the right hand side of site branding since this part is entirely dependent on your theme structure and outside the scope of this article.
The following code is an example of how your code might look. Basically, we need to find id="masthead" .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="masthead"> //Top Bar <div id="top-bar"> ... </div> //Title and Description (to the left) <div class="site-branding"> <h1 class="site-title">....</h1> <p class="site-description"> //Search Area (to the right) <div id="search-wrapper"> ... //This is the area where we'll be working </div> </div> |
Once the layout is set up, it’s time to get started with the search form.
Adding the Search Form
Now, we need to add the search form. While we can use custom HTML tags, WordPress provides us with the highly convenient get_search_form. This function returns the markup for WordPress’ in-built search form.
Add it in the search-wrapper div. It should look like this –
|
1 2 3 4 5 6 7 |
. . <div id="search-wrapper"> <?php echo get_search_form(); ?> </div> . . |
This will output a raw unstyled search form at the front-end. It should look something like this –
Now, we need to do some custom styling. First of all, we need to replace the search button with our search icon. For icon, we are going to use Google’s Material Icons search icon. I’m using outline version. You can find it here. We will be using the SVG format. Just download the SVG and save for later use.
Using the get_search_form filter
To modify the generated markup for search form. We are going to use the get_search_form filter hook provided in WordPress. In order to use it, we are going to create our custom markup and hook it to the filter. Check out the code below –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function indituts_search_form( $form ) { $form = '<form role="search" method="get" class="search-form" action="//local/"> <div class="form-container"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s"> </label> <button type="submit" class="search-submit"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg> </button> </div> </form>'; return $form; } add_filter('get_search_form', 'indituts_search_form'); |
Now, let’s see what is happening here. We create a function indituts_search_form that accepts $form as its parameter. We hook the function to get_search_form filter hook.
Then we write our own custom markup for search form, store it in the $form argument and return it. In this code, we added a button tag and included custom SVG code for the search icon. You can get this code from the search icon SVG file we downloaded earlier. Just open the file in your Code Editor and copy the code.
Assuming your theme does not have any additional styling for search module, it should look something like this now
Now, we need to add some CSS to style it as per our requirement. Add the following CSS in your theme file. In most themes, it should be style.css in the root directory but can vary depending on file structure of your theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.form-container { display: flex; align-items: center; border: solid 1px #dddddd; padding: 0.25rem 0.5rem; } .form-container button { display: flex; align-items: center; background-color: transparent; padding: 0; border: 0; cursor: pointer; } .form-container button svg { fill: #2a9ebd; } .form-container input[type=search] { border: 0; outline: none; } |
After adding CSS at appropriate place, our search form gets its final form. it should look like this –
So that’s it! We created our own custom Search Form in WordPress. This is just the tip of the iceberg when it comes to using get_search_form to customize our search functionality. With the use of JS, we can introduce interactivity to the form as well. Perhaps, I’ll create a new tutorial for that.
Hope you got to learn something new in this tutorial. Do checkout our blog and get a deep dive into WordPress.
Looking yo hire a WordPress Developer? Get in touch!
