Would you like to include a Search Form in a WordPress Post With a Shortcode?
Including a search form in your post or page content is a great way to encourage visitors to look for more information and stay longer on your site.
We’ll show you how to use a WordPress search shortcode to add a search form to your posts and pages in this article.
What Are the Benefits of Including a Search Form in Your Posts and Pages?
If a visitor to your WordPress blog enjoys one of your posts, they will most likely want to read more. Including a search form in the post will assist them in finding more of your relevant content.
You can increase page views and lower your bounce rate by making it easy for users to spend more time on your website.
Visitors are also more likely to subscribe to your email list, leave a comment, purchase something, or follow you on social media.
We’ll show you how to add the standard WordPress search form to your posts in this tutorial.
We’ll show you two ways to add a search form to your posts, the first of which is the most straightforward. To get to the method you want to use, click on the links below.
- Method 1: Using a Plugin to Add a Search Form
- Method 2: Using Code to Add a Search Form
Method 1: Using a Plugin to Add a Search Form
The SearchWP plugin is the simplest way to add a search form to your posts. It’s the best WordPress search plugin, with over 30,000 sites using it.
Installing SearchWP
The first step is to download, install, and activate the plugin. See our step-by-step guide to installing a WordPress plugin for more information.
After activating the plugin, go to Settings » SearchWP and select the ‘License’ menu option.
Then, in the License box, type in your license key. This information is accessible through your SearchWP account. Following that, click the Activate button.
The next step is to select the Engines menu option. You’ll be taken to a screen where you can customize your search engine settings.
You’ll need to make a site-wide search engine here. The Posts, Pages, and Media dropdowns can be used to change your search engine settings.
Each section’s Attribute Relevance sliders change how search engines value and rank content. You can adjust the sliders to place a higher value on the post title than on the content, for example.
Make sure to click the ‘Save Engines’ button after you’ve finished adjusting the settings to save the default search engine.
Including a Search Form in a Blog Post
To quickly add your new custom post search form to WordPress, you’ll need to download the SearchWP shortcodes extension.
To get the SearchWP Shortcodes Extension, go to the website and click the ‘Download available with active license’ button.
After that, install and activate the extension in the same manner as you did the plugin. You can now include a search form in your blog posts.
Simply edit the post and move your cursor to the location where you want the search form to appear. Then, to access the blocks menu, click the plus ‘Add Block’ icon.
Then, in the search box, type ‘html’. Select the ‘Custom HTML’ block after that.
You can now add the following shortcodes and HTML to your page after you’ve added the new block. See our guide on how to use shortcode in WordPress for more information.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
[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 include a search form, a section to display the search results, a no results message if necessary, and pagination if the results span multiple pages.
To save and publish your post, make sure you click Publish or Update.
View the post on your WordPress website to see the search form in action. This is how the Twenty Twenty-One theme looks on our demo site.
Method 2: Using Code to Add a Search Form
A code snippet can also be used to add a search form to your WordPress posts. This method is not recommended for beginners, so if you’re not comfortable with code, go with Method 1.
This method requires editing the functions.php file in your theme.
All you have to do is paste the following code into your theme’s functions.php file or a site-specific plugin:
|
1
|
add_shortcode('wpbsearch', 'get_search_form'); |
When using the WordPress Theme Editor to add the snippet to the Twenty Twenty-One theme’s functions.php file, this is how it looks on our demo website.
After that, simply paste the [wpbsearch] shortcode into the post or page where you want the search form to appear.
This will bring up the standard search form. View the post on your WordPress website to see the search form.
Instead, if you want to show a custom search form, you should use this code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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'); |
You are free to change the code to make the search form your own.
We hope this tutorial showed you how to use a WordPress search shortcode to add a search to your post.