SearchWP Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add Search Box to WordPress Post With a Shortcode (Step by Step)

Are you looking for a way to add search box to WordPress post with a shortcode?

That’s handy, as it allows your visitors to search for new content without distracting themselves from exploring your site.

In this article, we’ll show you step-by-step how you can add a search box to any post on your site with no coding needed.

Let’s begin!

Why Add a Search Box to a WordPress Post With a Shortcode

Adding a search form to your posts brings a lot of advantages.

Mainly, it allows your visitors to find the content they’re looking for faster and improve their user experience.

For example, you can create a custom search form limited to a specific category and put it within the relevant post, like this:

how to add search box to WordPress post with a shortcode

This way, you won’t only make it easier for your visitors to find the right content but also encourage them to explore your site further.

In addition, placing a search bar inside your WordPress site posts will help you to:

  • Increase the average session duration. By offering a search form in the post, you’ll help your visitors find more content that interests them.
  • Get more traffic from search engines. The average session duration is an important ranking factor in Google, so by keeping it high, you can get better rankings.
  • Build a loyal audience. Satisfied visitors who’ve had a positive user experience when browsing your site are more likely to return again.

Now that you know what are the benefits of adding a search bar to your posts with a shortcode, let’s see how you can do that.

How to Add a Search Box to a WordPress Post With a Shortcode

Using a plugin is the easiest way to add a search box to posts on your site with a shortcode. In this regard, no plugin beats SearchWP.

SearchWP logo

Why? Because SearchWP offers the most comprehensive solution on the market that can cover all your needs.

Beyond adding a search box with a shortcode, you can use it to display search results in live mode, track on-site search activity, and more.

SearchWP boosts your on-site search by helping you:

  • Add multiple search engines. Want to add custom search fields to your site? You can create multiple search engines with different settings and link them to specific search fields.
  • Impact search results order. Not happy with the current order of search results on your site? SearchWP allows you to customize it the way you want.
  • Exclude pages from search. Looking for a way to exclude unwanted pages from search results? With SearchWP, you can do that with a few clicks, no coding needed.
  • Make custom fields searchable. Store valuable post data in custom fields? Using SearchWP, you can make WordPress consider them when performing a search.

Over 30,000 websites are already using this plugin to give their visitors the most relevant search results.

With that, let’s see how you can use SearchWP to add a search box to your posts with a shortcode.

Step 1: Install and Activate the SearchWP Plugin

The first step is to get your own copy of SearchWP.

Once done, sign in to your SearchWP account and navigate to the Downloads tab.

go to the Downloads tab

Then, press the Download SearchWP button to begin downloading the plugin ZIP file to your computer.

press Download SearchWP

After you’ve downloaded the file, copy your SearchWP license key on the same tab. You’ll need it further to activate the plugin.

copy your SearchWP license key

The next step is to upload the SearchWP plugin’s ZIP file to your site.

Need a refresher on how to do that? Follow the how to install a WordPress plugin step-by-step tutorial.

After you install the plugin, go to your WordPress dashboard, hover your mouse over the SearchWP button and click Activate License.

press Activate License

Then, paste your license key into the License field and press Activate.

click Activate

After you activate your license, the next step is to install the Shortcodes Extension.

Step 2: Install and Activate the Shortcodes Extension

This extension allows you to place a search box at any place of your post or page with a shortcode.

To install it, navigate to the Extensions tab under SearchWP on the left side of your WordPress dashboard.

navigate to the Extensions tab

Here you’ll find many useful SearchWP extensions. By installing them, you can further expand the functionality of the plugin.

click Install

Scroll the page down until you see the Shortcodes extension and click Install to add it to your site.

click Install

After you install and activate the SearchWP plugin and the Shortcodes extension, the next step is to add a search box to one of your posts.

Step 3: Add a Search Box to Your Post With a Shortcode

To get started, navigate to the Posts tab in your WordPress dashboard.

go to Posts

Then, click on the post you want to add a search box to.

click on a post

Once in the post editor, select the exact spot in the post where you want to add a search box and click the Plus button next to it.

click Plus

Then, in the pop-up window, find the Custom HTML block and click on it to add it to the post.

add a custom HTML block

The next step is to copy and paste the following code into the Custom HTML block you’ve added:


[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>

This code adds a search box to the place in the post where you put it.

Plus, it shows pagination links and displays the “No search results found” message if there are no results.

After you add the code, click the Update button in the upper right corner to save the changes.

press Update

That’s it. You’ve added a search bar to your post so your visitors can discover more of your content.

Now let’s see how it works.

Step 4: Check Out Your Post With a Search Box

To go to your post, click Preview, and then select Preview in new tab option from the drop-down menu.

click Preview in new tab

Here’s how the search bar looks within a post on our test site:

how to add search box to WordPress post with a shortcode

To test it, let’s try to search for “WooCommerce”.

click Find Results

As you can see, search results for the “WooCommerce” search term appear right inside our post.

we found a post

It’s helpful because it allows your visitors to search your website without getting distracted from reading your posts.

In this article, you learned how to add a search box to a WordPress post with a shortcode. It’ll help your visitors find the content they want faster and allow you to get more pageviews.

If you’re ready to add a search box to posts with a shortcode on your WordPress site, you can grab your copy of SearchWP here.

Looking for a way to exclude a specific post category from search results on your site? Check out the how to exclude category from WordPress search detailed tutorial.

Want to limit search on your site to posts only? Follow the how to limit search to only posts in WordPress guide.

author avatar
Egor Yupatov

Create a Better WordPress Search Experience Today

Never lose visitors to unhelpful search results again. SearchWP makes creating your own smart WordPress search fast and easy.

Get SearchWP Now
Multiple Search Engines Icon