How to Add Search Bar to Home Screen in WordPress

Do you want to add a search bar to the home screen of your WordPress site? This guide offers various ways to accomplish that.

Option 1: Add Search Bar to Home Screen via the Widget Panel

Most WordPress themes offer widgets, including a search widget. Hence, using the search widget in the widget panel, you can easily add a search bar to the home screen of your WordPress site.

To accomplish that, observe the following procedures below.

1. Sign in as an administrator to the backend dashboard of your WordPress website. Then, hover your mouse on Appearance on the left pane and select Widgets from the displayed options.

2. Following that, click the Toggle block inserter button at the top left corner of the Widgets page.

3. After that, input “search” in the search field.

4. Then, drag and drop the Search widget from the search result to an area on your WordPress site where you want to add the search bar. I will add the search bar to the Header area of our website for this demonstration.

5. Finally, click the blue Update button at the top right of the page to save the change. Thus, the search bar should appear on the home screen as well as every other page of your WordPress site.

Option 2: Add Search Bar to Home Screen Through WordPress Block Editor

Another way to add a search bar to your WordPress site’s home screen is by using the search block in the default WordPress block editor. Moreover, this method is quite similar to the method discussed in the previous section.

That said, follow the procedures below to add a search bar to your WordPress site’s home screen via the WordPress block editor.

1. As an administrator, sign in to the backend of your WordPress website. Next, click Pages among the menus on the backend’s left pane.

2. After doing that, select the title of your website’s home page to open it. In this case, the title of our website’s home page is “Create your website with blocks.”

3. When your website’s home page opens, click the Toggle block inserter button at the top left corner of the page.

4. Following that, input “search” in the search field that appears.

5. Now, drag and drop the Search block from the search result to a suitable area on the home page where you wish to add the search bar.

5. Finally, click the blue Update button at the top right corner of the page to save the change.

Option 3: Add Search Bar to Home Screen Using a Plugin

Interestingly, you can also add a search bar to your WordPress site’s home screen by using a plugin. Although many plugins can do that, we will focus on the Custom Search by BestWebSoft plugin in this section.

This free plugin allows users to add a search bar to a specific page or post on WordPress with a shortcode. Hence, in the first sub-section below, I will provide steps to install and activate the Custom Search by BestWebSoft plugin in WordPress.

Meanwhile, the second sub-section will demonstrate how to use this plugin to add a search bar to the home screen in WordPress.

Step 1: Install and Activate Custom Search By BestWebSoft Plugin

1. Sign in to your WordPress site’s backend as an administrator. Next, hover your mouse on Plugins on the left pane, then left-click Add New from the displayed options.

2. After doing that, input “Custom Search by BestWebSoft” in the search field on the Add Plugins page.

3. Following that, click the Install Now button of the Custom Search by BestWebSoft – Advanced WordPress Search Bar Plugin from the search result.

4. After installing the plugin, click the Activate button to enable it on your WordPress site.

Step 2: Add Search Bar to Home Screen Using the Custom Search by BestWebSoft Plugin

1. After activating the plugin, ensure you’re signed in to your WordPress site’s backend as an admin. Then, click Custom Search among the menus on the backend’s left pane.

2. On the Custom Search Settings page, copy the shortcode in the Custom Search Shortcode box. You can also customize the search bar on the Custom Search Settings page.

3. After copying the shortcode, click Pages on the left pane of the backend’s dashboard.

4. Afterward, open the home page of your WordPress site by clicking the home page’s title. In this case, the title of our website’s home page is “Create your website with blocks.”

5. When the home page opens, paste the shortcode you copied in step 2 into a preferred area on the home page.

6. Finally, click the Update button at the top right corner of the page. Hence, if you preview or access the home page from your site’s front end (live website), the shortcode should appear as a search bar – see the second screenshot.

Frequently Asked Questions

Conclusion

Gladly, this guide illustrated three ways to add a search bar to the home screen of your WordPress site. Specifically, we discussed executing this task via the widget panel.

This guide also provided steps to perform this task using the search block in the WordPress block editor. That’s not all; I also included procedures to add a search bar to the home screen in WordPress with the aid of a plugin.

That being said, I hope you found this guide helpful. If you did, click on “Yes” beside the “Was this page helpful” question below.

You may also express your thoughts and opinions by using the “Leave a Reply” form at the bottom of this page.

Finally, visit our WordPress & Websites How-To page for more helpful WordPress guides.