SearchWP

News

How to add a search bar is WordPress

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:

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.

go to widgets tab

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.

footer section

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.

find the search widget

Here is how it should look like:

drag and drop the search widget

Don’t forget to press the Update button at the top right to save the changes.

press the update button

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.

visit your website

As you can see, the search bar works perfectly.

the search bar works

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.

go to the theme editor

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.

find the theme header

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:

paste the search form code

Press the Update File button at the bottom once you’re done.

press update file

Click the Visit Site button under your website’s name to see the result.

go back to your website

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.

go to customize tab

Then, go to Layout » Primary Navigation.

Go to primary navigation

Enable the navigation search.

enable the navigation search

Don’t forget to press the Publish button at the top once done.

press publish

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.

magnifying glass icon

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.

add a new plugin

Then, search for SearchWP Modal Search Form.

searchwp modal form search

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.

install searchwp modal search form

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.

go to appearance menus

Once you’re there, click the SearchWP Modal Search Forms.

click searchwp modal search forms

Tick the Default check box and press Add to menu.

click 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”.

rename to search

Once done, press the Save Menu button at the bottom right.

press save menu

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.

press the visit site button

Check out your navigation menu area. Now you have a new menu item called “Search”.

new menu item

Once you click on it, you’ll see the modal search form appear, like this:

modal search form

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.

Want to make your search awesome right now?

More than 30,000 sites have chosen SearchWP!

You can utilize all of the content that’s gone unrecognized by native WordPress keyword search instantly with SearchWP.

Get SearchWP for just $99

  • Committed Support
    If you need help, support is fast, friendly, and here for you
  • Streamlined Setup
    Installation and setup that’s optimized for speed
  • Great Documentation
    Helpful, clear, and usable documentation is a priority

See what SearchWP customers have to say

  • “SearchWP have been a lifesaver when clients have hi demands on how search results should be weightet. An essential plugin for all modern WP sites.”

  • “Great plugin! I implemented a bulk product search option for my wholesale platform. I was supported very quickly by the SearchWP team, and we met our complex goals. Recommended!”

  • “the plugin does exactly what it says with a dedicated support! highly recommended !”

[wpforms id="3080"]