How to Add Google Custom Search to WordPress (Video Tutorial)

The default search function for WordPress isn’t horrible, especially when you are running a blog where you desire someone to search just the post title and post content. While it’s not phrase or exact match by default, you could realistically make some modifications to the search form to allow for that.

Also, if you have added custom fields and custom post types, you can make changes to the default search to accommodate those preferences. In fact, many plugins have been created with these and other features to enhance WordPress search.

With that said, arguably there is no better search engine than the one built by Google. And, they allow you to quickly create a custom version for use on your own web site. Today I want to show you how to integrate it into your WordPress site without having to use any plugins.

Why Use Google Custom Search for WordPress?

Using Google as a search engine is valuable because it searches more data. It doesn’t build a complicated SQL statement to query your database, so therefore it doesn’t matter if you have custom post types or custom fields. It essentially searches all the content that it has previously indexed. So, whatever shows up on a given page on your WordPress site, it has likely been indexed, and can be queried by the Google custom search engine.

Google doesn’t care how the data elements are defined on your site, it’ll treat them as “searchable” unlike the WordPress search tool (by default at least). However, it is still valuable to “define” the different data elements on your page (think: Schema.org) so that Google can display them uniquely within the search results, but that’s a discussion for another article.

A Simple Approach to Incorporating Google Search into a WordPress Site

Now, in general, the common way to override WordPress search using Google Custom search when not using a plugin, is to modify the search.php template file. Rather than do that though, I want to suggest a simpler approach.

The approach that I would like to suggest involves 3 important steps.

1) Remove any existing WordPress search forms from your web site. This step often involves changing a global setting for your theme to “disable search” or “remove search” or to simply delete any widgets that show the search form.

Granted, with this approach, people can still append ?s={search query} to the homepage URL and end up using the WordPress default search, but I am not concerned about that. You could redirect those URLs to the Custom Search results page we create in step #3, taking care to change the “s” to a “q”. Often this is done in the .htaccess with some Regular Expressions if you feel like being that thorough. I don’t have the steps for that on the top of my head though, but I’m certain you can track down the “how to” for that with a few quick Google searches.

2) Add the Google Custom search form to a Text widget placed wherever you like.

3) Create a new page that will be used as your search results page. We just have to tell Google the full path to this page when configuring our search engine, so we will create this page first to get the path.

You Can Get Very Custom with Your Search Engine

You can get very very creative with your Google Custom search engine. You can really fine tune the results that show up. You can even have the search engine display results from multiple web sites.

For our purposes though, we will just create an engine that’ll be used to display super-fast highly-relevant results for just one web site. But by all means, play around with the config settings for your custom search engine. You can place the form and results page on your site, and then change the settings later. The engine will update on your site with the new settings without the need to make anymore changes to your site.

Alright, let’s get started.

How to Add the Google Search Engine to Your WordPress Site

1. First, try and remove any existing search forms from your site. Check your theme settings and/or the Widgets area to accomplish this.
2. Next, let’s create a page on your web site that will be used as the search results page. Create a new page, and call it “Search Results” or whatever you like. Publish it, then grab the full URL including protocol (http or https) and the domain. You should be left with something like: https://www.example.com/search-results/
3. Head to the Custom Search console at Google: https://cse.google.ca/cse/all
4. Click “Add”.
5. Type in your web site address. Since we are doing a full site search for one web site, use something like: *.example.com
6. Click “Create”.
7. Click “Control Panel” next to “Modify your search engine”.
8. Click the “Make money” tab and turn on Monetization if you wish to earn from AdSense on your custom search engine. You can also tie your engine in with Google Analytics from the “Search and Logs” -> “Google Analytics” section.
9. From the left side, go into the “Look and feel” section and choose “Two page” and click “Save & Get Code”.
10. At the top, click “Search Results Details” and paste in the URL to your search results page created in Step #2 and click “Save”.
11. Copy the code for the search form to the clipboard, and paste it to a Text Widget. You may end up with some styling issues with the form depending on your theme. Please Google around for various CSS fixes for Google Custom Search if you find that’s the case for you.Alternatively you can just use the Google hosted search. You can get the “Public URL” from the “Setup” section. What you can do with that is create a Custom Link in your WordPress menu called “Search”. Be sure to open the “Screen Options” tab in Menus and turn on “Link Target” so that you have the option to open this link in a new window. If you go this route, then don’t worry about the remaining steps.
12. OK, now you need the code for the search results page. Click the button that says “Next: Obtain code for search results”. Copy the code to the clipboard, open your search results page that you created earlier, past the code in in “Text” view, and click Update.

Now, test your search engine! Again, you can play with the settings in the Google Custom Search Control Panel and the settings will be automatically reflected on your site.

Remember, if the form or results look a little (or a lot) off, then it’s likely just a CSS issue. There are several threads on forums that can walk you through some fixes. But you can always just use the Public URL for Google’s hosted version of your engine as described earlier, if it’s all the same to you.

Now you should be all set to let your visitors search your site using Google search.