Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Search Form in a WordPress Post With a Shortcode

Do you want to add a search form to a WordPress post?

Adding a search form to your post or page content is a good way to encourage your visitors to find more content and stay on your website longer.

In this article, we’ll show you how to add a search form in your posts and pages using a WordPress search shortcode.

How to Add Search Form in Your Post with a WordPress Search Shortcode

Why Add a Search Form to Your Posts and Pages?

If a visitor has enjoyed reading a post on your WordPress blog, then they will likely want to read more. Offering a search form in the post will help them find more of your content that they are interested in.

When you make it easy for users to spend more time on your website, you can increase your pageviews and reduce your bounce rate.

Your visitors are also more likely to join your email list, leave a comment, make a purchase, and follow you on social media.

In this tutorial, we’ll show you how to add the standard WordPress search form to your posts. If you want to add a custom search form, then see our step by step guide on how to create a custom WordPress search form.

We’ll show you two methods to add a search form to your posts, and the first is the simplest. Use the links below to jump to the method you’d like to use.

Method 1: Adding a Search Form with a Plugin

The easiest way to add a search form to your posts is by using the SearchWP plugin. It’s the best search plugin for WordPress used by over 30,000 sites.

Setting Up SearchWP

The first thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » SearchWP page and then click on the ‘License’ menu option.

Enter SearchWP license key

You then need to enter your license key in the License box. You can find this information in your account on the SearchWP website. After that, you should click the Activate button.

Next, you need to click on the Engines menu option. This brings you to a screen where you can choose your search engine settings.

SearchWP engines settings

Here you need to create a site-wide search engine. You can adjust your search engine settings by clicking on the Posts, Pages and Media drop downs.

The Attribute Relevance sliders in each section adjust how the search engines value and rank content. For example, if you want to value the post title higher than the content, then you can adjust the sliders accordingly.

Adjust SearchWP slider settings

After you’ve finished adjusting the settings, make sure to click the ‘Save Engines’ button to save the default search engine.

Adding a Search Form to a Post

Now you need to download the SearchWP shortcodes extension to easily add your new custom post search form to WordPress.

You’ll need to visit the SearchWP Shortcodes Extension website and then click the ‘Download available with active license’ button.

Download SearchWP Shortcodes extension

After that, you need to install and activate the extension the same way you installed the plugin above. Now you can add a search form in your posts.

Simply edit the post and place your cursor where you want to add the search form. After that, click the plus ‘Add Block’ icon to bring up the blocks menu.

Insert a Custom HTML Block

Next, type ‘html’ into the search box. Then, select the ‘Custom HTML’ block.

Once you’ve added the new block, you can add the following shortcodes and HTML to your page. If you need more help, then see our guide on how to add a shortcode in WordPress.

[searchwp_search_form]
   
<div class="search-results-wrapper">
 [searchwp_search_results]
  <h2>[searchwp_search_result_link]</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"]
 [searchwp_search_results_pagination direction="next" link_text="Next"]
</div>

This code will add a search form to the post, create a section to display the search results, show a no results message if necessary, and add pagination if the results go into multiple pages.

Make sure you click Publish or Update to save your post and make it live.

Click Publish or Update to Save Your Post

To see the search form in action, simply view the post on your WordPress website. This is how it looks on our demo site running the Twenty Twenty-One theme.

SearchWP Form Preview

For more tips on customizing your search, see our guide on how to improve WordPress search with SearchWP.

Method 2: Adding a Search Form Using Code

You can also add a search form to your WordPress posts by use of a code snippet. This method is not recommended for beginners, so if you’re not familiar with code, then you should use Method 1 instead.

In this method you will have to edit your theme’s functions.php file.

If you have not edited the functions.php file before, then take a look at our beginner’s guide on pasting snippets from the web into WordPress.

All you have to do is open your theme’s functions.php file or a site-specific plugin and paste the following code:

add_shortcode('wpbsearch', 'get_search_form');

Here is how it looks on our demo website when using the WordPress Theme Editor to add the snippet to the Twenty Twenty-One theme’s functions.php file.

Editing functions.php in the Theme Editor

After that, you simply add the shortcode [wpbsearch] to the post or page where you would like the search form to appear.

Search Form Shortcode

This will display the default search form. To see the search form, simply view the post on your WordPress website.

Search Form Preview

If you would like to display a custom search form, then you should use this code instead.

function wpbsearchform( $form ) {
  
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
  
    return $form;
}
  
add_shortcode('wpbsearch', 'wpbsearchform');

Feel free to modify the code to customize the search form as you would like.

We hope this tutorial helped you learn how to add a search for in your post with a WordPress search shortcode.

You may also want to learn how to create a free business email address, or check out our list of reasons why you should use WordPress for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

33 CommentsLeave a Reply

  1. Thank you, but I’m seeing only {wpbsearch] on the page I want the search form to be. I’m not sure if I’m placing the add_shortcode(‘wpbsearch’, ‘get_search_form’); code in the correct place in the theme functions.php file. I placed the following code in a perceived function location: between /** and * is_it woocommerce_page- Returns true if on a page which uses WooCommerce…) in the actual page I want to search, as I want it to be a page-only search, (and is this the correct code to do that?)

    The Page Code:
    function wpbsearchform( $form ) {

    $form = ‘

    ‘ .
    _(‘Search Timeline For:’) . ‘

    ‘;

    return $form;
    }

    add_shortcode(‘wpbsearch’, ‘wpbsearchform’);

  2. thank you so much for this. It was so easy. I have been searching for how to do this for months but was looking in the wrong places.

  3. I want to add a general google search bar -not custom search just a general google search box so users will not have to leave the page to conduct a google search.

  4. Hi there!
    You guys are really the best (y)
    Great post once again.
    I’ve been able to add the search form with visual composer as well. So, maybe someone will give it a try :)

    Finaly, I’m trying to add a search form in a slideshow like this site:

    I’ll be more than glad if someone here do have a trick for this.

    Thanks again and stay blessed

  5. Just what I was looking for, thank you! What would an example be of CSS if we wanted to change the colors and text of the search bar? (i.e. what would we add to CSS to change the colors/text/etc.)?

  6. This was stupid easy to implement. I wrote it as a plugin so I can use on MultiSite :) Thank you for the write-up.

  7. Hello,

    Is it possible to make this search form to search only a particular category?

    Example. I have 5 Categories – Cat 1, Cat 2, Cat 3, Cat 4 and Cat 5.

    I want the search from only on page 4 and the search form should search only from Cat 3?

    Thanks
    Sakthi

  8. Hi,
    really love your tutorials!

    Is it possible to define the search for comments within each post I put the shortcode? So that it’s not a global search, but a search of the comments just of the post I’m searching at via the shortcode. Would be amazing for helping me out, don’t find anything.

    Thanks!!

  9. Hi, I have just used this script on my theme. Thanks for the help. And its working. But i have one problem, I want to edit the title of that search form how to do. Please help me out.

    Thanks
    Sandeep Kumar Dan

  10. Awesome tip! Thanks for posting, it is just what I was looking for. I wanted something simple so that people can search through exercise videos and this fit the bill.

  11. Great article! I created a short code and then tweaked the CSS to position and size it the way I wanted.

    add_shortcode(‘prodSearch’, function($atts) {
    global $woocommerce;

    echo ”;
    get_product_search_form();
    echo ”;

    });

    • Greg… what was your custom form code for your woocommerce search form you mention here?

      I am trying to get two search boxes into a top navigation one for standard wordpress site search the other for woocommerce products..

    • Hi Greg!
      Thank you for this tip!.. Do you know how to change the search box text and css for this shortcode??
      Any help would be greatly appreciated..
      -Justin

  12. Just used it in my WP site. Was able to add search box anywhere I like.

    Thank you! This one’s simpler and easy to use compared to the plugins out there.

  13. Great little tutorial. I tried to embed this shortcode within a column shortcode, but it just appears at the top of the page, instead of within the column. Is there something I need to add?

  14. i read your site everytime when you put something new. I want to know if is posible to put search form for my site..like google search..Now i used search default from wordpress but i dont like very good the results and i want to know if is posible to put “google search” just for my content. i hope you understand, i try to write correct english but i’m not so good. i wait your answer if is posible. i appreciate your site and your work.

  15. Hi,

    Thank you for the tip .
    Don’t forget to use different IDs to avoid duplication of FOR and ID’s values.
    Here you use exactly the same as default WordPress’ search form.

    Thank you,
    Regards,
    G.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.