Cyber Monday Deals are Here!

Up to

40%

Savings

Ending in:

Claim Yours Now!
WPMet Site Logo
  • Home
  • Plugins

    GetGenie Ai

    AI Content & SEO Assistant
    for WordPress

    ElementsKit

    All-in-One Addons for Elementor

    ShopEngine

    Complete WooCommerce Solution for Elementor

    MetForm

    Most Flexible Elementor
    Form Builder

    WP Social

    WordPress Social
    Integrations Simplified

    WP Fundraising

    Advanced WP Fundraising Plugin

    WP Ultimate Review

    All-in-One Review Pluginfor WordPress

  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Add Search Bar to a WordPress Site

WasimWasim Updated on: February 5, 2023 Elementor ElementsKit WordPress 6 Min Read
How to add a search bar in wordpress site banner

Website owners often struggle to add search bar to their WordPress websites. Some of them adopt complex methods to add a search bar to their WP websites while others remain entirely clueless about which method to take up.

What’s crucial in this case is to find a way to add a search bar to your WordPress website smoothly and effortlessly. If you are sick of trying inefficient ways to inject a search bar into your WordPress website, you have landed on the right piece.

No matter whether you newly built a WP website or you have an old WP website, you will find this post informative and instructive.

Contents hide
1 Search Bar- A Quick and Efficient Way to Source Info:
2 Why Add a Search Bar to your Site?
3 Can you Add Search Bar on the Website Menu with WordPress Default Search Widget:
4 Add Search Bar with WordPress Default Search Widget:
5 Add Search Bar with ElementsKit Search Widget:
6 Add Search Box with CSS Code:
7 Winding up:

Search Bar- A Quick and Efficient Way to Source Info:

A website contains loads of information through the homepage, product pages, blog pages, and pricing page. Just consider yourself a website visitor. When you visit a website, many times you tend to source data from different web pages.

In that case, how are you going to find these pieces of data? Are you going to find them visiting those pages individually? Surely, you wouldn’t like to do so.

Not that you won’t find your required info in this way. But it’s time-consuming and sickening as well. This is where adding a search bar to your WordPress site will come into play. 

As per a survey of Search Engine Journal, More than 40% visitors say a search box is the most important feature on a website

Why Add a Search Bar to your Site?

Suppose, you don’t have a search bar on your site. In that case, when the visitors will visit your site, they will struggle to find their required information. As a result, they will leave your site and your whole purpose of getting them into the website will go in vain.

Let me present some of the major benefits you can notch up by adding a search bar to your site below-

  • Eases your customers’ effort to find information
  • Streamlines user experience
  • Boosts engagement 
  • Reduces bounce rate
  • Displays the necessary items or information with a few keywords

Can you Add Search Bar on the Website Menu with WordPress Default Search Widget: 

Is it possible to add a menu search bar with the WordPress default search widget? No, you can’t. Because WordPress lets you add a search bar only in widget-ready areas. 

If you wanna add a search bar on the menu, you have to leverage other plugins or widgets in different areas of your website including the header and footer. 

That’s why I would walk you through 3 different methods of adding a search bar on your WordPress site in this tutorial. 

Now, let’s take a look at the way you can add a search bar to your website through the WordPress default widget.

Add Search Bar with WordPress Default Search Widget:

The easiest and most convenient way of injecting a search bar into your WordPress website is through your WordPress dashboard. How to do that? Let’s check it out-

Navigate to the Widgets from the Dashboard:

At the outset, go to the dashboard of your admin panel and find Appearance. Navigate and click Widgets from a list of items under Appearance.   

Dashboard > Appearance > Widgets

Navigate to the widgets from dashboard

Add the Search Widget from the Available Widgets:

This will take you to a new page appearing with different page sections. Now, hit the “Add block” button (Appears with a + sign) to view all the existing widgets. 

Scroll down to find the search widget or you can write “Search” on the search field to find the search widget.

Click the section you want the search bar to show up and then hit the search widget. Alternatively, you can also drag and drop the search widget to your desired section.

Add the search widget

Make the Necessary Tweaks:

The search bar will show up now under the selected section. You can make the required changes to different elements like the search bar alignment, button position, text color, and so on. 

You can also add a custom label to the search bar as per your requirements. Finally, click the Update button.

Customize the search bar

View the Search Bar on your Page:

Now, if you visit any of your published pages or posts, you can notice the search bar or search box showing up on the main sidebar.

View the search bar on the front-end

Add Search Bar with ElementsKit Search Widget:    

Now, I will walk you through another easy-peasy way to add WordPress search bar to your site. And that’s through ElementsKit’s Header Search widget. It’s super simple to add a search box through ElementsKit. 

As a matter of fact, ElementsKit is an Elementor addon. In that sense, adding a search bar with ElementsKit can be termed an Elementor search bar as well, right?

Without further ado, let’s check out how to add search bar with the ElementsKit search widget–

Navigate to any of your Existing Posts or Pages from the Dashboard:

First of all, go to the dashboard and find posts or pages. Here, I will show how the ElementsKit widget works with a post named “Hello World!” 

Go to “Posts” and then select “All Posts” to let all your posts show up. From there, you can choose the post where you want to add a search bar. In case you don’t have any existing post or a page, you have to add a new post or page.

Dashboard > Posts > All Posts > Your Post

Go to any of the existing pages

Switch to the Elementor Window:

Now, click “Edit with Elementor” located in the top-middle. This will take you to the Elementor window.

Switch to the elementor window

Drag and drop the Header Search Widget: 

In the Elementor window, you will get access to tons of widgets. Type the “Header Search” widget on the search field to find the widget. Alternatively, you can scroll down and find the widget as well. 

Once you track down the widget, drag and drop it to the designated area to let the search bar show up. Don’t forget to add the section above the text of your post as it’s a header search bar.

Drag and drop the header search widget

Set the Parameters of the Search Bar:

Once the search bar appears on the page, it’s time to set the parameters of the bar as per your preference. Under the Content tab, you will have a Header Search section where you put a placeholder text, select a search icon, and adjust the font size. 

Set the parameters of the search bar in content tab

Under the Style tab, you will have 2 sections- Header Search and Search Container. From the Header Search section, you can adjust the parameters like background color, border type, search box shadow, margin, etc. of the search bar.

Set the parameters of the search bar under the style tab for header search section

From the Search Container section, you can select the background type and set the placeholder text and border color.

Set the parameters of the search bar under the style tab for search container section

Finally, You are Good to Go!

After you have finalized your settings, you are all set to check and view the search bar on the front end of your post. If you aren’t happy with the search box look, you are free to modify it from the admin panel again. 

View the header search bar in your post

It’s a piece of cake to add search to WordPress sites with ElementsKit, isn’t it? On top of that, you will get scores of benefits by adding a search bar to your WordPress site which I listed above. So, why not give ElementsKit a shot?

Try ElementsKit for Free

ElementsKit is an all-in-one addon for Elementor page builder including powerful modules, widgets, megamenu, and header & footer.

Add Search Box with CSS Code:

There is one more way you can use to add a search bar to your site and that’s using CSS code. Although you need a bit of technical knowledge to do that, it’s not rocket science. I will show you the process here and it will be super easy after that. 

Go to the Theme Editor:

First of all, click “Appearance” from the dashboard and navigate to the “Theme Editor”. 

Navigate to the theme editor

Open header.php or sidebar.php file:

With that, you will move to the style.css file by default. From there, open the header.php or sidebar.php file depending on the position where you want the search bar to show up.

Open header.php file or sidebar.php file

Add Search Bar Function:

Now, add this function <?php get_search_form(); ?> in your header.php or sidebar.php file code. I have added the function in the header.php file code. 

Add a search bar function

View the Search Bar on your Site:

Finally, open any of your published pages and you’ll notice the search bar appearing on the top. If you added the function in the sidebar.php file, the search bar would appear on the sidebar. 

Search bar shows up on the page

Winding up:

This is it! I have walked you through 3 super easy techniques of adding a search bar to your WordPress website. Depending on your requirements, you can opt for any of them. However, if you add WordPress search bar with ElementsKit’s header search widget, you will get an extra benefit.

What’s that? Bottomless customization options!!! Hence, if you love customization, make use of ElementsKit’s header search widget. With that, you can give your search bar a mesmerizing appearance. 

ElementsKit Promo GIF
  • Share :

ShopEngine Compatible Theme Bascart Featured on Envato

Previous post

How to Customize WooCommerce Cart Page Without Coding (Free)

Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Subscribed Today!

WPMet Site Logo
© 2023, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

ElementsKit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT