:::: MENU ::::

Replace WordPress search with Google CSE

Did you ever feel like the WordPress search widget just doesn’t display data the way you wanted to? Google provides the answer to this predicament with Google Custom Search Engine / Google CSE.

Step 1: Google CSE

  • Start by registering on  https://www.google.com/cse/
  • Click Add and type in your websites URL and the short-name of the search engine
  • Click on the short-name you just created and then Search Engine ID
  • You can add some styling to your CSE, but I recommend doing that last.

Step 2: WordPress

We need to edit some code, this can be done using Appearance->Editor, or by just downloading the necessary files.
We will be using a theme called Hueman for this guide.

  • Locate the location of your theme wordpress_root/wp-content/themes/your-current-theme
hueman theme location

theme location

  •  Find search.php in the folder and edit it
  • Delete the the unnecessary code so the file looks like this

  •  Insert your Search Engine ID in
  •  Upload or save the changes to search.php

Step 3: Testing it out

Try searching for something located on your website and the result should look something similar to this.

WordPress CSE Search results

WordPress CSE Search results

 

Whats the catch?

Google “hides” some of the information related to Google CSE, so I am going to highlight some here.

You are limited to 100 search queries per day on the free version.

That doesn’t mean that you can only search 100 times a day in total but means that all users can search 100 different keywords a day. If your site is heavy on traffic you can sign up for billing.

Example: I have 120 articles about different animals, a user searches for 100 of those animals by species, the 101. search query for a different animal will return an error.  Different users can easily search for a same word like duck an unlimited amount.

For CSE users, the API provides 100 search queries per day for free. If you need more, you may sign up for billing in the Cloud Console. Additional requests cost $5 per 1000 queries, up to 10k queries per day.

documentation :  https://developers.google.com/custom-search/json-api/v1/overview

 

Don’t mix up Google CSE and Google Site Search

They are two different services with different API and of course a different price model.
Read more about this on Alex Jordans Blog: Upgrading Your Custom Search Engine: BE CAREFUL

 

You can style your result page

There is a limit what you can style in Look and Feel.
Example:

You can add this code somewhere in search.php, as you can see we removed the watermark on the right-lower corner of the search result.
We can remove the borders or style it in different ways, I leave that to your imagination.

 

You can see the popular search queries

In Statistics and Logs (Google CSE), you can see the most popular search queries. You can also easily link it to your Google Analytics then check under Reporting->Acquisition->Search Engine Optimization->Queries for a more detailed statistic.

 

You can monetize the free version with Google AdSense

The only requirement is that you use the same Google account with Google CSE and Google AdSense. It may take a while to get validated, but if you have some regular visitors on your site, it might be a way to get some money in.

 

___________________________________________

If you found the article helpful please share.
If you find any errors or misleading information in my articles please write a comment or email me.

FacebookTwitterGoogle+RedditLinkedInShare

  • AlexBrtn

    Does not work on the hueman template. Probably need to edit the forms in searchform.php.
    I want to embed the CSE without using plugins

    • def|tech

      This post is about 2 years old, the template or CSE might have changed in this time.
      What exactly goes wrong when you try to implement CSE ?

      Edit: Nevermind I guees:P I guees it works.

      • AlexBrtn

        (translate) I have made a mistake. The Hueman template search.php not changed. Thank you. The only problem is that the request is sent to the database of WP, although it makes no sense. I don’t know how to fix it. Also deleted the

        • def|tech

          I think you didn’t copy paste the entire google translate string.
          If you need help just say 🙂 This soultion more or less works by looking at “s” GET parameter of the URL and using that it shows a result only google CSE