Add Google Search to a Website

In this tutorial we are going to cover the fastest way to add Google Search to a website.

I will show you a super quick way to add a Google search box on your website in under 5 minutes.

Some of you who land on this page may not be looking to add a Google search box on your site.

You may be looking to get your website pages into the Google search results. If that is you check out our guide on how to submit a sitemap to Google via the Google Search Console.

Let's get started!

Fastest Way to Add Google Search to a Website

The fastest way to add search to your site is to use a special site search from Google.

Did you know that if you type site: into the Google search bar then it will search only the site you specify.

Here is an example.

If I wanted to only search Ikea for chairs I would search:

site:ikea.com chairs

Google search results will only display ikea.com pages, like this:

This is cool right! It allows you to show results from a single website and exclude the rest of the web. You can use this yourself to create a quick Google Search box on your site.

What we are going to do is create a search form on your site. When the user clicks search it will open a new tab with the Google Search results.

This is what the form will look like:

<form role="search" id="form" action="https://www.google.com/search" method="get" target="_blank">
   <input id="query" type="search" name="q" value="site:https://ikea.com " autofocus size="50" aria-label="Search through site content">
  <input type="submit" value="Search">
</form>

You can see in the above code that there is ikea.com as the site search. You need to replace this with your domain name.

There is one issue with this form and it is this:

As you can see above the site:https://ikea.com text is in the search box. This is bad as the user can delete this text which will break the single-site search in Google.

What we need is to add this in the background.

For this we need to use some JavaScript that will add the site:https://ikea.com text after the user presses search. Then we can remove the site:https://ikea.com text from the search box.

This is what the JavaScript will look like:

var form = document.querySelector("form");

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var search = form.querySelector("input[type=search]");
  search.value = "site:https://ikea.com " + search.value;
  form.submit();
});

The above code listens for when someone presses submit on the form. When they do it reads the search value and adds the “site:https://ikea.com " text before the search.

This is the complete HTML:

<form role="search" id="form" action="https://www.google.com/search" method="get" target="_blank">
   <input id="query" type="search" name="q" placeholder="Search..." autofocus size="50" aria-label="Search through site content">
  <input type="submit" value="Search">
</form>
<script>
  var form = document.querySelector("form");

  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var search = form.querySelector("input[type=search]");
    search.value = "site:https://ikea.com " + search.value;
    form.submit();
  });
</script>

That is all there is to it!

You can try it out for PageDart using the form below:

You now have Google search working on your site!

Add Google Search to WordPress

WordPress has its own built-in search box that you can use to search. Yet, if you want to add a Google site search to your WordPress site then you can use the same technique.

Here you will need to change the get_search_form filter. To do this you can change the code to the below:

function my_search_form( $form ) {
$form = '
<form role="search" id="form" action="https://www.google.com/search" method="get" target="_blank">
   <input id="query" type="search" name="q" placeholder="Search..." autofocus size="50" aria-label="Search through site content">
  <input type="submit" value="Search">
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var search = form.querySelector("input[type=search]");
    search.value = "site:https://ikea.com " + search.value;
    form.submit();
  });
</script>';
return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

You can add this code to your functions.php file. Yet, I will always encourage you to create a WordPress plugin to add the change.

Wrapping Up, Add Google Search to a Website

We have looked at how you can add Google search to a website. This tutorial has shown how easy it is to create a search box on your site and then open up the Google search page.

Using the special search query site:example.com we have reduced the search results to your site only.

To make this work it is best to use JavaScript to add the site search query in the background.

Remember, to add your pages to the Google search results add your sitemap to the Google Search Console.