Would you like to add a search bar to your WordPress website?
This is a helpful feature that allows website visitors to find the content they’re looking for in a few seconds.
Unfortunately, not every WordPress theme has a search bar by default. And it might be challenging to figure out how to add it if you’re a beginner.
But don’t worry, as in this article, we’ll show you how to add a search bar to your WordPress website without any code.
As this article contains a set of step-by-step guides for a couple of ways to add a search bar, here is a table of contents to help you navigate:
- Add a Search Bar as a Widget
- Add a Search Bar Manually
- Add a Search Bar Supported by Your Theme
- How to Add a Search Bar to WordPress Menu
Let’s dive into it!
Why Add a Search Bar to Your Website?
A search bar not only allows your website visitors to find the content faster. It also brings plenty of hidden advantages that significantly boost your website’s performance.
Here are just a few examples of why you need a search bar on your website:
- Boost conversion rate: the easier it is for people to find the product they want on your site, the higher the chances are that they’ll buy from you.
- Increase content discoverability: creating quality content takes hard work and a lot of time. The search bar allows you to maximize your efforts and increase visitors’ engagement.
- Improve user experience: if visitors had a great time exploring your website, it makes them return again and again. A loyal audience is precious as they want to consume as much of your content as possible.
- Skyrocket SEO: rest assured, all of the above won’t escape the attention of Google. These things reduce the bounce rate, one of the essential ranking factors. You want to keep it as low as possible to get better ranking and attract more visitors from search engines.
Now that we know the benefits of having a search bar, let’s add it to your WordPress website.
How to Add a Search Bar in WordPress
There are several ways to add a search bar to a WordPress website.
In this article, we’ll take a look at the most popular ways, compare their advantages and disadvantages and help you see the easiest way to do it.
Add a Search Bar as a Widget
Probably the most popular way of adding the search bar is to add it as a widget. To do that, you only need to drag and drop the appropriate widget to the area you want it to appear.
However, this way has a noticeable disadvantage. The thing is, not every theme supports widgets.
Even if it’s the case, the set of available widget areas is usually quite limited. For example, you might want to add a widget to the header, but your theme only has widget areas at the footer and sidebar.
Keep that in mind, and let’s take a look at how to add a search widget to the WordPress website.
1. Go to the Widgets tab
The very first step is to open your WordPress dashboard and navigate to the Widgets tab under Appearance.
Next, you need to decide which widget area you want to add your widget to. For example, only 2 areas are available in the free official WordPress Twenty Twenty theme.
2. Add a new widget
To add a search widget to the desired area, press the Plus button at the top left.
Find the search widget and drag it to the area you want it to appear on your website.
Here is how it should look like:
Don’t forget to press the Update button at the top right to save the changes.
Now we need to make sure that the search bar actually starts displaying in the footer widget area where we added it.
3. Check out your new search bar on your site
The fastest way to do so is to press the Visit Site button under your site name at the top left.
As you can see, the search bar works perfectly.
So this was one of the ways to add a search bar to the WordPress website. Let’s move on and talk about the next way to do this manually below.
Add a Search Bar Manually
The next way we’re going to take a look at is how to add a search bar manually by editing the WordPress theme code.
There’s a huge disadvantage to this method. You need to be tech-savvy enough to know how to edit the WordPress theme code.
But, it’s not as hard as it looks, and we’ll show you how to do it step-by-step below.
Before manually editing your theme code, there are a few things you need to bear in mind:
- The following process entirely depends on the specific theme you’re using: although each theme has its own unique set of files, most of them contain such typical ones as header, footer and sidebar.php.
- Avoid making changes in the parent theme: the thing is, you’ll lose all the changes once you update it. It’s much better to create a child theme and add changes to it. You can learn about how to create a WordPress child theme here.
For the purposes of this tutorial, we’ll use the Twenty Twenty-One theme, as it’s one of the most popular free WordPress themes. The process may be slightly different, depending on your theme.
Since the vast majority of website owners tend to add a search box to the header, we’ll do the same.
For example, let’s add a search bar next to the navigation bar, as it’s the most common place.
1. Go to the theme editor
The first step is to go to the Theme Editor under Appearance.
On the right panel, you can find the full list of editable theme files.
We’re going to add a search bar to the header, so click on the header.php file.
2. Add the search form code
Find the line of code:
<?php get_template_part( 'template-parts/header/site-header' ); ?>
And put the following code right after it:
<?php get_search_form(); ?>
Here is how it should look like:
Press the Update File button at the bottom once you’re done.
Click the Visit Site button under your website’s name to see the result.
3. Check out your newly added search bar
As you can see, a search bar now appears next to the navigation bar:
Add a Search Bar Supported by Your Theme
Some WordPress themes support enabling or disabling a search bar.
For example, one of the popular free WordPress themes called GeneratePress has such a feature.
Usually, you can check if your theme has that setting on the Customize tab under Appearance.
Let’s take a look at how to add a search bar supported by a theme with an example of GeneratePress.
1. Go to the Customize tab
The first step is to go to the Customize tab.
Then, go to Layout » Primary Navigation.
Enable the navigation search.
Don’t forget to press the Publish button at the top once done.
2. Check out your new search bar
Let’s go visit our website and check if everything works fine. Now we have the magnifying glass icon after clicking on which the search bar appears.
You already know the 3 most popular ways to add a search bar to your WordPress website. But what if you want to add a search bar to your WordPress navigation menu?
Let’s talk about how you can do that below.
How to Add a Search Bar to WordPress Menu
The easiest way to add a search bar to the WordPress navigation menu is to install the SearchWP Modal Search Form plugin.
By using it, you can add a lightweight modal search form next to your menu items in just a few clicks.
Also, if you want to additionally improve the WordPress search possibilities, consider getting a premium version of SearchWP.
As the best search plugin for WordPress, SearchWP is used by over 30,000 websites all over the world. Some of its features include:
- Autocomplete search: do you want your search bar to start guessing visitors’ search queries as Google does? SearchWP allows you to make that come true in a few clicks.
- Live search results: WordPress shows the search results by opening up a new separate page by default. It takes time and may confuse some of the visitors. Using SearchWP, you can provide your visitors with live search results.
- Enhanced search engine: the native WordPress search engine doesn’t consider custom fields, documents’ content, shortcodes, and many more. SearchWP solves this problem by providing your visitor with comprehensive search results.
- On-site search activity insights: using SearchWP, you can take a look at what your website visitors were searching for. It opens up a wide range of opportunities and allows you to get new content ideas.
- WooCommerce integration: SearchWP supports indexing custom fields, making WooCommerce products attributes, tags and reviews searchable.
You can grab the premium version of SearchWP here.
Now, let’s add a search bar to WordPress navigation menu with a few simple steps.
Step 1: Install and Activate SearchWP Modal Search Form Plugin
First, you need to go to the Plugins tab in your WordPress dashboard and click Add New.
Then, search for SearchWP Modal Search Form.
Find the plugin and click Install Now. Don’t forget to activate it after the installation.
For more details on how to do this, check out our step-by-step guide on how to install a WordPress plugin.
Step 2: Add a Search Bar to the Menu
Once you got SearchWP Modal Search Form installed and activated, from your WordPress dashboard, click the Appearance tab and go over to Menus.
Once you’re there, click the SearchWP Modal Search Forms.
Tick the Default check box and press Add to menu.
Click on your new menu item called Default and change its name at the Navigation Label field to something more appropriate. For example, let’s call it “Search”.
Once done, press the Save Menu button at the bottom right.
Step 3: Test Your New Search Bar
Now let’s take a look at the new search bar. Click the Visit Site button under your site’s name.
Check out your navigation menu area. Now you have a new menu item called “Search”.
Once you click on it, you’ll see the modal search form appear, like this:
That’s it. You just added a search bar to your WordPress site navigation menu.
In this article, you learned how to add a search bar in WordPress following a few different ways.
If you’re ready to empower your WordPress search, you can grab your copy of Search WP here.
You might also be interested in how to customize the search widget in WordPress if you want to adjust its search algorithm.
Also, if you ever faced any issues with WordPress search, it might be useful to check out our guide on how to fix WordPress search not working.
