SearchWP Blog

Would you like to know how to add a WordPress search bar with shortcode?

Typically, a search bar on a WordPress site is in the site navigation menu or in the sidebar. Using shortcodes lets you place a search bar right inside a post or page.

In this article, we’ll show you 2 methods on how you can add a search bar using a shortcode to your WordPress site.

Why Add A Search Bar with Shortcode

Usually, there are not so many places where you can add a search bar.

Most of the WordPress themes allow you to put a search bar as a widget in one of the widget areas. You can also display your search bar next to the navigation menu.

But what if you want to create a page that contains a search bar?

Or put a search bar inside the article, so your readers don’t have to interrupt the reading if they want to search for something?

That’s when shortcodes come in handy. Using shortcodes, you’re free to add a search bar to any place within a post or page.

This is helpful if your theme doesn’t support adding a search box and you don’t want to edit the code to add it.

Now, let’s look at how you can add a search bar to your site using a shortcode.

How to Add a WordPress Search Bar with Shortcode

There are 2 methods to add a WordPress search bar with a shortcode. Let’s take a look at each of them in order.

Method 1: Using SearchWP

The easiest way to add a WordPress search bar with a shortcode is to use a plugin like SearchWP.

Search WP is the most powerful and comprehensive WordPress search plugin. More than 30,000 website owners already use it to provide their visitors with more accurate search results.

This plugin not only allows you to add a search box with a shortcode – it also helps you gain full control over the WordPress search engine.

For example, using SearchWP, you can customize the search results order, make WordPress search by document content, and a lot more.

This plugin automatically integrates with every search bar you have on your site. So you can enhance your site search immediately after the installation, no coding needed.

Here are just some other useful things you can do with SearchWP:

• Custom fields indexing: Lots of WordPress plugins use custom fields to store your data. But, the native WordPress search engine doesn’t consider them while searching. SearchWP allows you to make custom fields on your site searchable.
• Search tracking: Ever wondered what searches visitors make on your site? SearchWP gives you insights about search activity on your site in a few clicks, so you can get new content ideas and meet your audience’s needs.
• Seamless WooCommerce integration: By default, WordPress search ignores WooCommerce product details, so it’s harder for your customers to find a product they’re looking for. Using SearchWP, you can make any WooCommerce custom fields searchable, including product attributes, tags, and reviews.

Let’s see how you can use SearchWP to add a search bar with a shortcode in minutes.

Step 1: Install and Activate the SearchWP plugin

The first step is to grab your copy of SearchWP here.

Once done, go to your SearchWP account and switch to the Downloads tab.

Then, press the Download SearchWP button and save the plugin ZIP file to your computer.

When the download is complete, copy your license key, as you’ll need it later to activate the plugin.

After you’ve downloaded SearchWP and copied the license key, upload the plugin’s ZIP file to your WordPress site.

If you need any help on how to do that, check out this step-by-step guide on how to install a WordPress plugin.

Once you get SearchWP installed and activated, the next step is to enter your license key.

To do so, navigate to the SearchWP settings by clicking the SearchWP button that appears at the top bar of the WordPress dashboard.

Then, go over to the License tab.

Paste the plugin’s license key you copied earlier into the license field and click Activate.

Once you activate your copy of SearchWP, you’re ready to proceed to the next step.

Step 2: Install and Activate the Shortcodes Extension

Next, we need to download the Shortcodes SearchWP extension. This extension allows you to add a search bar with a shortcode to any place in a post or page.

You can grab it at the Shortcodes extension download page.

After you’ve navigated to the page, press the Download extension button.

Then, install and activate the extension the same way as the SearchWP plugin.

Step 3: Create a Page for the New Search Bar

Now, we need to create a new page on which we’ll place the search box.

To do that, first, navigate to Pages » Add New in your WordPress dashboard.

Once you’re in the page editor, add a title to your page and click the Plus button.

Search for the Custom HTML block and then click on it to add it to the page.

Then, copy the following code and paste it into the Custom HTML block:

[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

The above code displays the search box on the page where you added the Custom HTML box.

It also displays the “No search results found” message if there are no search results. Plus, it can also show pagination links if there are more than 4 search results.

Once you’ve added the code, click the Publish button at the top right to publish your page.

Now let’s go to our new page and test the search bar we just added.

Step 4: Test Your New Search Bar

To go over to the newly created page, click the View Page button.

As you can see, the search bar that we added with the shortcode is now successfully displayed on the page.

Now that you know the easiest way to add a WordPress search bar to your page, let’s talk about the 2nd method of doing it below.

Method 2: Editing the Functions.php File

This is quite a complex method. It requires advanced knowledge of WordPress and involves making changes to the theme code.

Note that if you make any mistakes while editing the code, you can ruin your site.

So if you’re not a tech-savvy user or haven’t had experience editing WordPress theme files before, we’d suggest sticking to the first method. You can grab your copy of SearchWP here.

With SearchWP, you can safely add a search bar with a shortcode in just a few clicks. No coding is needed.

Step 1: Create a Child Theme

The first step is to create a child theme of the theme you’re currently using on your site.

Need a refresher on how to do that? Feel free to check out this guide on how to create a WordPress child theme.

A child theme inherits the parent theme’s appearance, files, code, and features.

It’s crucial to create it if you’re going to make any changes in the WordPress theme code due to a couple of reasons.

First, you can customize a child theme without changing the parent theme. It ensures that your site will still display correctly even if you make a mistake when editing the code.

Also, any changes you make to the parent theme will disappear as soon as you update it. Making changes to the child theme allows you to update the parent theme without the risk of losing changes.

Once you’ve created a child theme, let’s proceed to the next step.

Step 2: Edit the Functions.php File

Once you’ve created and activated a child theme, navigate to Appearance » Theme Files Editor in your WordPress dashboard.

Then, find the functions.php file at the right panel and click on it.

Add the following code to the very end of the functions.php file:

add_shortcode('wpbsearch', 'get_search_form');

Here is how it looks like on our demo site when editing the GeneratePress child theme’s functions.php file:

Once done, press the Update File button.

Now we need to create a new page where we’ll display a search bar using a shortcode.

Step 3: Create a New Search Bar Page

To create a new page, navigate to Pages » Add New in your WordPress dashboard.

Then, simply paste the following shortcode to the page:

[wpbsearch]

This is how it should look:

Once done, click Publish at the top right.

Now we want to check out if a search bar appears.

Step 4: Test Your New Search Bar

To view the page you’ve just published, click View Page.

As you can see, we’ve been able to add a search bar using a shortcode successfully.

In this article, you learned 2 methods of how to add a WordPress search bar with a shortcode.

If you’re not a tech-savvy user and you want to add a search bar with a shortcode in just a few clicks, you can choose the 1st method. You can grab your copy of SearchWP here.

Would you like to impact WordPress search results? Check out this step-by-step tutorial on how to prioritize specific search results in WordPress.

Do you want WordPress to consider the contents of PDF files when performing searches? Then you’ll find helpful this how to make WordPress index and search PDF files guide.