{"id":7551,"date":"2022-09-07T09:00:14","date_gmt":"2022-09-07T13:00:14","guid":{"rendered":"https:\/\/trustpulse.com\/?p=7551"},"modified":"2022-09-08T10:04:57","modified_gmt":"2022-09-08T14:04:57","slug":"how-to-create-custom-wordpress-search-form","status":"publish","type":"post","link":"https:\/\/trustpulse.com\/2022\/09\/07\/how-to-create-custom-wordpress-search-form\/","title":{"rendered":"How to Create a Custom WordPress Search Form (Easy Steps)"},"content":{"rendered":"
Are you thinking about how to create a custom search form in WordPress?<\/p>\n
Search forms help users find content on your website easily. If the visitors cannot find the content, they can quickly move to other websites.<\/p>\n
In this post, you’ll learn how to create a custom search form on your website, step by step.<\/p>\n
A custom search form makes it easy for visitors to find the content on your website.<\/p>\n
The WordPress search widget works on post types like posts or pages but ignores searching content within custom fields.<\/p>\n
With a custom search form, you can decide where to search on your website and control the ranking of search results. For example, if there are any matching results, you can determine what content you want to show first. Search results toward the top of the list tend to get more clicks, so you want to place your most important pages as high as possible.<\/p>\n
Additionally, you can create an algorithm that will search for matching results only in the specified areas of your website. You can even make two different search forms and use them in different places, like one for a blog and another for a products page.<\/p>\n
With that being said, let\u2019s look at how you can create a search form and show results on your website.<\/p>\n
<\/p>\n
SearchWP<\/a> is the #1 search plugin for WordPress websites. It\u2019s actively installed on more than 30,000 websites and gives you the features for customizing search results.<\/p>\n SearchWP looks for the matching results in the posts\/pages, comments, taxonomies, and custom fields.<\/p>\n Some of the popular features of the SearchWP plugin are:<\/p>\n And many more.<\/p>\n Let’s dive into the exact steps for creating a custom form on your WordPress website.<\/p>\n Setting up the SearchWP plugin is simple.<\/p>\n First, you need to sign up for an account from SearchWP<\/a>.<\/p>\n You’ll find three pricing plans. Select the plan that suits your requirements from Standard, Pro, and Agency.<\/p>\n <\/p>\n Once the purchase is complete, you’ll receive an email with the plugin download link and license key.<\/p>\n Login to your account and click the Download SearchWP<\/strong> button.<\/p>\n <\/p>\n Now, you can go ahead and install the plugin on your website. Navigate to Plugins \u00bb Add New \u00bb Upload Plugin<\/strong>.<\/p>\n Activate the plugin, go to Settings \u00bb License<\/strong>, and paste in your license key.<\/p>\n <\/p>\n After activating the license key, we can head on to our second step.<\/p>\n With SearchWP, you can create a customizable search engine. Search engines control how the results will be displayed to the visitors.<\/p>\n Now, we can proceed to build your first engine.<\/p>\n From the SearchWP menu, click on the Settings \u00bb Engines<\/strong> tab. Now you can go ahead and click on the Add New<\/strong> button.<\/p>\n <\/p>\n Next, click on the Sources & Settings<\/strong> button.<\/p>\n <\/p>\n Select the search sources like pages, posts, comments, and wherever you’d like to search for results.<\/p>\n Notice the Keyword Stems<\/strong> option is checked by default. It will search for closely matching results instead of returning only exact matches.<\/p>\n <\/p>\n Next, click on the Done<\/strong> button once you’ve selected the settings.<\/p>\n Now, we can set the attributes for your search engine.<\/p>\n Clicking on the Add\/Remove Attributes<\/strong> opens up a popup with the list of post attributes.<\/p>\n <\/p>\n The title, content, slug, and excerpt are selected by default. You can check the settings from the Custom fields and Taxonomies dropdown. Make sure to click Done after selecting attributes.<\/p>\n You can also add specific rules in your search engine.<\/p>\n <\/p>\n Click on Edit Rules<\/strong>, and you can set rules by using the options from the dropdowns.<\/p>\n <\/p>\n The final step is to customize the relevance of search results. You can do this by adjusting the slider levels from the engine settings.<\/p>\n <\/p>\n After customizing the relevance, click on Save Engines<\/strong> to save your first search engine.<\/p>\n Our next step is to add the search form to the website.<\/p>\n We’ll use the Shortcode Extension<\/a> plugin that simplifies the job of adding forms on your website with the help of shortcodes.<\/p>\n Login to your SearchWP account and go to the Extensions menu.<\/p>\n <\/p>\n Click on the Download available with active license<\/strong> button to download the extension zip file.<\/p>\n Install and activate the extension on your website like you install any other plugin.<\/p>\n If you have already installed and activated the license for the SearchWP Pro plan, you can navigate to SearchWP \u00bb Extensions \u00bb Shortcodes \u00bb Install<\/strong>.<\/p>\n <\/p>\n We’re ready to add the SearchWP form shortcode to your website.<\/p>\n To add a shortcode, navigate to the Posts tab and open the post where you’d like to add the search form.<\/p>\n After that, click on the +<\/strong> icon and select the custom HTML block.<\/p>\n <\/p>\n Copy and paste the following code in the Custom HTML block to add a search box. <\/p>\n Click on the Update button to save the changes.<\/p>\n <\/p>\n Now you can open the post in a new tab to check the newly added search form.<\/p>\n This is how our form looks in the front.<\/p>\n <\/p>\n Let’s see how it works.<\/p>\n We’re trying to search for “Chocolate.”<\/p>\n <\/p>\n As you can see, it returns all the matching search results in seconds and allows visitors to search anything on your website.<\/p>\n You\u2019ve added a search box to your post in just a few minutes. You can also add a shortcode to website pages, navigation menu, and sidebar.<\/p>\n With the SearchWP Ajax extension<\/a>, you can showcase the search results even faster without reloading the page.<\/p>\n Besides, many other SearchWP extensions<\/a> are available for you to add more functionalities to your search form.<\/p>\n That\u2019s it for today.<\/p>\n We hope you learned how to create a custom WordPress search form in 4 easy to follow steps.<\/p>\n If you liked this article, consider checking out the following articles to get more insights on using search plugins and improving content discoverability:<\/p>\n Still, thinking of adding a Search Form?<\/p>\n What are you waiting for? Get SearchWP<\/a> today!<\/p>\n If you like this article, follow us on Facebook<\/a> and Twitter<\/a> for more free articles.<\/p>\n","protected":false},"excerpt":{"rendered":" Are you thinking about how to create a custom search form in WordPress? Search forms help users find content on your website easily. If the visitors cannot find the content, they can quickly move to other websites. In this post, you’ll learn how to create a custom search form on your website, step by step.<\/p>\n","protected":false},"author":31,"featured_media":7554,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"limit_modified_date":"","last_modified_date":"","om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[10],"tags":[3301,3303,3295,3302],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/posts\/7551"}],"collection":[{"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/comments?post=7551"}],"version-history":[{"count":35,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/posts\/7551\/revisions"}],"predecessor-version":[{"id":8018,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/posts\/7551\/revisions\/8018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/media\/7554"}],"wp:attachment":[{"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/media?parent=7551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/categories?post=7551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trustpulse.com\/wp-json\/wp\/v2\/tags?post=7551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
<\/span>Step 1: Install the SearchWP Plugin<\/span><\/h3>\n
<\/span>Step 2: Add a Search Engine<\/span><\/h3>\n
<\/span>Step 3: Download the SearchWP Shortcode Extension<\/span><\/h3>\n
<\/span>Step 4: Display the Search Form on Your Website<\/span><\/h3>\n
\n[searchwp_search_form engine=\"custom\" var=\"searchvar\" button_text=\"Custom Search\"]
\n<div class=\"search-results-wrapper\">
\n[searchwp_search_results engine=\"custom\" var=\"searchvar\" posts_per_page=4]
\n<h2>[searchwp_search_result_link direct=\"true\"]<\/h2>
\n[searchwp_search_result_excerpt]
\n[\/searchwp_search_results]
\n<\/div>
\n<div class=\"no-search-results-found\">
\n[searchwp_search_results_none]
\nNo results found, please search again.
\n[\/searchwp_search_results_none]
\n<\/div>
\n<div class=\"search-results-pagination\">
\n[searchwp_search_results_pagination direction=\"prev\" link_text=\"Previous\" var=\"searchvar\" engine=\"custom\"]
\n[searchwp_search_results_pagination direction=\"next\" link_text=\"Next\" var=\"searchvar\" engine=\"custom\"]
\n<\/div>
\n<\/code>
\nThe embedded code looks like this:<\/p>\n\n