How to add Google Search Bar widget to your website?

How to add Google Search Bar widget to your website

On-site search is a crucial feature in a website. When your visitors are on your website, no matter how they arrived, they might want to explore more.

Of course, a popular posts widget on the sidebar or related posts listed under every blog post will help them read more content and stay on your site for a long time.

But what if they are looking for something really specific on your website?

For instance, on this very website you might want to look for something specific like “SEO plugins”.

Scrolling through blog’s pages to see if such a topic has been covered on this blog is a tedious task, obviously.

In particular if you are on websites that have LOADS of content, doing something like that is impossible.

In order to make it easy for your visitors you will have to give them the option to do a search without leaving your website – and the search results should return results from your website, not from the web (like a search you do on Google.com).

Having a Google search bar compared to the default WordPress search bar is beneficial for a few reasons:

For one it is free. Second, and most important, it is reliable.

It is from the big boy Google – God of searches as they say! So you don’t have to worry about keeping it up-to-date or “maintaining” it.

You don’t have to worry about it going outdated so you run into malware or other vulnerability issues.

Adding a Google search bar to your website is easy too (more on that below).

Plus, as an additional benefit, displaying Google search results right inside your site enables you to display Adsense ads as well.

Let’s get started with the “How” part!

How to add a Google search bar widget to your WordPress website?

Method #1 – Add Google custom search bar code to search.php

First you will need to grab the custom code for the search. To do so you need to visit https://cse.google.com (where the “cse” stands for custom search engine).

Once there, you need to “Add” a new custom search box. You can create multiple search boxes in case you want to use search box on multiple sites.

Click on the Add button to create a new search bar.

Add new search bar

In the “Sites to search” bar, enter the url of your site. If you have other sister sites that are in a similar niche, you might include them (a new box will appear as you type for adding extra sites) as well.

In my case I do have a couple of sister sites (in a similar niche) – savvybloggingtips.com, blog.dosplash.com. So I would add them too!

Just note that if you have sites in totally different sites, it is certainly not a good idea to add them – only add other site urls if they are in a similar niche.

Enter site name

Click create. On the following screen, you will have the option to grab the code so you can add it to your website.

Get code

Click on the “Get Code” button.

You will see a box of code to copy. Copy that.

Copy code

Now it is time to add this search bar to your website. For this you need to modify a core file – hence you need to either login to your Control Panel (cPanel), access the File Manager, or use FTP.

In either case, you need to find your Theme folder (whatever the name of your theme is) in (public_html)/wp-content/themes.

Once in, you need to look for the file named search.php (or something similar).

Search php

Now select all of the content of the file, and replace it with the one you copied.

Once this is done, you will now have to go to your site’s WordPress dashboard, Appearance > Widgets. You will see the Search widget.

Drag and drop it in the Sidebar. Check if search works properly as it should by visiting the front end of your site and do a couple of test searches.

Method #2 – Create Search box from within your Google Adsense account

This method makes it quite easier for you to make money with your search box. With this search box in action, your ads are served in the search results that come up after the search is performed.

In order to create such a search box, you need to login to your Adsense account. Once there, on the left panel, under My Ads, you will see “Search”.

Click on the “New custom search engine” button.

New custom search

In the following page, enter a name for your search box (I usually name it after the website I am going to put it in). You should select “Only sites I select” for “What to search”.

Once you make that selection you will need to specify the websites that you want to be searched once a user enters a search query. Ideally this is just the URL of the website where you will be putting the search box.

BHAD search box

In my case, since I have a couple of other sites in a similar niche, so I have entered their URL too.

And then you can do some more customisations on the search box if you wish. Once you are done, click on “Save and get code” button at the end.

Adsense search box code

Now it is time to add the search box to your website. In the WordPress Dashboard, click on Appearance > Widgets.

Add a New text widget (you may add this widget in the sidebar or anywhere as your theme permits) and paste the code you copied in there. And enter an appropriate title for the widget.

Search box widget

Click on Save and you are done!

Hope you find these methods useful. Now go on and add that Google search box to your site (please do share the post before you leave!).

About the Author

I'm Jane, the owner of Best Hosting And Design, where I help bloggers and website owners to create and maintain their websites. Check out the services I offer here so you can make use of them. For cutting-edge business tips, please head over to Jane Sheeba.

Leave a Reply 3 comments

Trek - July 24, 2017 Reply

I am confused why to select same in adsense ?

Nikhil Makwana - July 24, 2017 Reply

Unique Post!

This is a very helpful as well as easily understand manual method. I will sure make my custom search bar by following your steps. Thanks for sharing this vivid post with us.

Thanks,
Nikhil Makwana

Leave a Reply: