SearchWP

News

how to add a WordPress search bar with a shortcode

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?

a search bar within the post's body

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.

SearchWP logo

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.

go to the downloads tab

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

download SearchWP

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

copy your license key

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.

go to the SearchWP settings

Then, go over to the License tab.

go to the license tab

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

activate your license

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.

the shortcodes extension

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.

add a new page

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

add a title and press plus

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

choose the custom html block

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.

publish the 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.

view the page

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

the search box appears

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.

edit theme files

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

open functions php file

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:

add the code

Once done, press the Update File button.

update the functions php file

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.

add a new page

Then, simply paste the following shortcode to the page:

[wpbsearch]

This is how it should look:

paste a shortcode

Once done, click Publish at the top right.

publish the page with a shortcode

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.

view the page with a shortcode

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

search bar appears with the 2nd method

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.

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

  • “My developer recommended this plugin as I quickly found out that WooCommerce was not properly finding products when I would put in a search term! I took him up on his recommendation and haven’t looked back! This is a great plugin! Love it!!”

  • “We needed to index a website with lots of page content and woocommerce products. SearchWP delivers a lot of useful default functions and setting up was easy with the help of the extensive documentation.”

  • “With SearchWP, you can add weight to categories, tags, taxonomies and even custom fields. This yields a much better and richer search than the basic WP search. My clients love it.”

[wpforms id="3080"]