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

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

A search form in a WordPress post is a great way to facilitate visitors to find more content on your website. They can search for a specific article there.

In addition, The search form helps visitors connect with the different articles on your website.

Read the section until the end if you want to know how to add a search form in a WordPress post. 

Why Add a Search form in WordPress posts?

A search form’s main purpose is pretty obvious to allow visitors to search for more content. If someone enjoyed reading your content, they would surely want to read more. Presenting a search form in the post will help them easily find more content on your WordPress site.

Moreover, adding a search form will engage the visitors to your site, resulting in increased page views and reducing the bounce rate.

In this write-up, we will explain two methods to explain how you can add a search form in a WordPress post. These are the Plugin and Coding method 

1. Plugin method to add a search form 

You can use the SearchWP plugin to add a search form to your posts in WordPress.

  • To setup SearchWP Plugin

First, Install and activate the searchWP plugin.

After activation, Go to the Settings » SearchWP page and click on the ‘License’ menu option.

Now, you have to enter your license key in the License box. You can find your license key in your account on the SearchWP website. 

After that, click on the Activate button.

Then, click on the Engines menu option. On the next page, you can choose your search engine settings.

Here, create a site-wide search engine. You can change your search engine settings by clicking on the Posts, Pages, and Media dropdown options.

The Attribute sliders in each section modify how the search engines value and rank content.

 

For example, you can change the sliders accordingly to value the post title higher than the content.

After adjusting the settings, click the ‘Save Engines’ button.

  • To add a Search Form to a Post.

After this, download the SearchWP shortcodes extension to easily add your new custom post search form to WordPress.

Now, Go to the SearchWP Shortcodes Extension website and click the ‘Download available with active license’ button.

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

Go to the post and edit it. Now put the cursor on where you want to add the search form in your post.

After this, click the plus icon ‘Add Block’ to bring the blocks menu up.

Now, type ‘HTML’ in the search box and select the ‘Custom HTML’ block option.

After you add the new block, add the following shortcodes and HTML to your page. 

 [searchwp_search_form]

    

<div class="search-results-wrapper">

 [searchwp_search_results]

  <h2>[searchwp_search_result_link]</h2>

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

A search form will be added to the post using this code. It will also form a section to display the search results, show a no result message if required, and add pagination if the results reach multiple pages.

At last, don’t forget to click Update to save your post and publish to push it live.

You can see the search form in the post on your WordPress website.

 2. Coding method to add a Search Form

You can add a search form to your WordPress posts using a code snippet. This method is for more advanced users who know to code, and it is not recommended for beginners.

You have to edit the functions.php file in your themes for this coding method.

Now, open your theme’s functions.php file or a site-specific plugin and place the given code:

 add_shortcode('wpbsearch', 'get_search_form');

This is how the theme editor looks when we add the code in the theme functions.php file.

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

This will show the default search form. You can see the search form in the post on your WordPress website.

If you want to display a custom search form, you should use the following code rather than the above one.

 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');

To conclude-

After reading this write-up, we hope you have learned to add a search form in your post with a WordPress search shortcode. We have explained the plugin method and the coding method. You can select whichever you like.

 

Leave a Comment