• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Best Hosting And Design

Affordable price and peace of mind guaranteed!

  • Services
    • Web Hosting
    • WordPress Installation
    • Website Design
    • WordPress Site Maintenance
    • Website Migration
  • Contact Us
    • Our Goal
  • Portfolio
  • Praise
  • Free Blogging E-Course

How to add Google Search Bar widget to your website?

posted on July 18, 2017

Tweet36
Share13
Share5
Pin15
69 Shares

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!).

Tweet36
Share13
Share5
Pin15
69 Shares

Filed Under: Tutorials, WordPress

About Jane Sheeba

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.

Reader Interactions

Comments

  1. Trek

    July 24, 2017 at 12:46 pm

    I am confused why to select same in adsense ?

    Reply
    • Jane Sheeba

      July 25, 2017 at 10:42 am

      Hey Trek,

      If you want to make money from the search, this is how to do it 🙂

      Reply
  2. Nikhil Makwana

    July 24, 2017 at 4:11 pm

    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

    Reply
  3. Jervice

    September 16, 2019 at 12:42 pm

    Such a helpful article on google search bar. I try it on my stuff.

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

SUBSCRIBE OUR CHANNEL

CREATE COMPELLING CONTENT FOR YOUR BLOG LIKE A PRO

QUIT DREAMING ABOUT BECOMING A SUCCESSFUL BLOGGER AND ACTUALLY BECOME ONE!

Jane

Claim your FR​EE access to the Blogging Success Foundation Course.

Popular Posts

  • How to troubleshoot a 500 internal server error in...
  • How to add Google Search Bar widget to your websit...
  • How to set up a professional email address and con...
  • 10 Best Exit Intent Popup plugins for your WordPre...
  • How to remove query strings from CSS and JS in Wor...

The email marketing service I use and trust!


Start Your Free Trial Today!

Footer CTA

About Jane

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.

Jane Sheeba: View My Blog Posts

Popular Posts

Don’t miss another update from us!

(c) Copyright 2022 Design and hosting by Best Hosting And DesignBlog Write for us Sitemap Contact