How to Add Google Custom Search Engine (CSE) Manually to WordPress Blog : Part-2

This is the second part of the tutorial on how to implement Google custom search engine in your WordPress blog using the default search form and show the result with default template. You can find the first part here. At first let’s have a look at our jobs to do. All works in this part is to be done in your WordPress installation. This can be listed as:

  • Defining Search Results (search.php) page
  • Defining Page Template (page.php)
  • Editing search.php file
  • Inspecting Search Results Page
  • Implementing CSE code in search.php

Search Result Template search.php:

Each WordPress theme comes in a bundle of some php script file. There may be graphics, java script or other files. Usually a WordPress theme uses different templates to show different types of page such as single.php for showing a full post, archive.php for showing archives. Similarly, search.php for showing search results.

When you search for something using the search box, a new page comes with the results. This result page is rendered by the search.php file. As our goal is to show results from Google custom search engine without affecting the structure of your theme, we will only replace the part with CSE code which renders the result in the result page.

You should already noticed that your site has a common structure for all pages and a portion of it contains the required content (usually). We will only the replace the code of that part with codes we taken from Google custom search engine.

Page Template page.php:

As much as I know every WordPress theme comes with a page.php file. This is a basic structure of a page rendered by a theme from WordPress. In general it contains:

  • A header section (renders the beginning part of the page)
  • A sidebar section (renders the sidebar content of the page)
  • The content area (renders the main content of the page)
  • A footer section (renders the bottom portion of the page)

A page.php file is an easier way to understand the construction of a page rendered by a theme. If we replace the content area with our desired content it will obviously match the outlook of other page.

You can find your theme’s page template file from your admin panel of your site. Log in as a admin and go to Appearance>Editor from left navigation menu and then click on Page Template (page.php) on the right side. In some case you may not find page.php if it is not supplied in the theme.

add google custom search to website

Why to Edit srarch.php File:

Usually it is more laborious for newbie to understand the construction of search.php file and put custom search engine code in proper place. Different theme has different construction pattern. So, we will edit this file and construct as page.php file. If we use page.php file to show result it will be easy to understand.

Editing search.php file:

From your admin panel go to Appearance>Editor and open Page Template (page.php) in the editor.

add custom search engine to wordpress site

Right click anywhere in the box, select all the text and then copy all the text of page.php file. Save it using Notepad.

Google Custom Search Engine in WordPress
Now open search.php file in the editor. Delete all text from the box and paste the copied page.php file here. Click ‘Update File’ to save changes. Now, search.php and page.php is same.

Inspecting Search Results Page:

This is the most important part. Now we have to identify the php code that calls the contents of the page. A typical php code starts with <?php and ends with ?> . There may be a lot of codes or few lines of code between start & end tag of a php code. So, always be aware while putting any element in your template files. Any change in the php code results in breaking the code and create problems.

Now, in your search.php file you can easily find some php script. We will eliminate the script from here which calls the main content of the page and will replace it with custom search engine’s code. Most of the case this script has the structure as below.
<?php get_template_part( 'content', 'page'); ?>
There may exist another php code which calls the comment portion of the page. It most likely has the form,
<?php comments_template( '', true ); ?>
Delete this script from search.php file if you can identify themselves and click ‘Update File’. Now do a search in your site and look at the result page. If it looks like other pages but with a blank content area then you are done. Blank content means that the area contains nothing where other pages of your site contains the main/required information there.

Now, just paste the code of Google’s custom search engine at the place from where you deleted the script that calls the content.
<?php get_template_part( 'content', 'page'); ?>
Now, update the file after putting the code at that place. Do a search and you will find the result. In case of some premium themes, you may not find search.php or page.php. But most of the case you will find. If you find any problem please inform without any hesitation.

Tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.