Installing Google Custom Search Engine (CSE) on WordPress Site

If you are not satisfied with the weak funtionality of WordPress’s native search function, here’s an alternative solution. You can use the Custom Search Engine provided by Google itself on your WordPress-based website.

With Google’s search engine features, your site visitors will have a better experience while making searches. You can use CSE in sidebar/footer or on a whole page. This tutorial will guide you on how to easily implement Google CSE on your WordPress website.

Creating your custom Search

Signing up for CSE is as easy as signing up for an email account. You need to enter some details defining your search engine and CSE will be ready. Here are the steps required.
At the Google Custom Search page, click on the Create a Custom Search Engine button. You’ll be redirected to the CSE login page (if you’re not already logged in). Enter your Google account’s credentials and hit the Sign in button. If you don’t have a Google account, then it’s time to create one!
Enter your search engine details: Name, Description, Language and Sites to search. You must list all the sites in the Sites to search box to set the parameters for your custom search engine to crawl and give results from.

Choose your edition of CSE (the Standard edition costs nothing but Site Search is available at $100/year) then agree to the Terms of Service before clicking Next. At the Try it Out (design) page, click at ‘Look and feel‘, written in first line of the page.

At the Layout page, choose a layout for the CSE on the site. Hit the Save & Get Code… button. Keep this Get Code page opened in your browser. Check below on how to implement CSE in various layouts on your WordPress site.

Implementing Templates

We’ll be using WordPress page templates to implement CSE in some layouts. You’ll need this template to implement CSE on yoru site. WordPress templates are tools to extend the functionality of WordPress pages to show dynamic or programmed content.
Here is a quick way to create a template for your CSE. On a notepad or text editor, paste this code below; note that a single spacing out of place may render the code useless. Save the file as page-template-cse.php on your computer.

view plaincopy to clipboardprint?

1. <?php  
2. /** 
3.  * Template Name: Google CSE 
4. */  
5.   
6. global $theme; get_header(); ?>  
7.   
8.     <div id="main">  
9.       
10.         <?php $theme->hook('main_before'); ?>  
11.   
12.         <div id="content">  
13.               
14.             <?php $theme->hook('content_before'); ?>  
15.   
16.         /* Paste your CSE-Bar-code below this line. */  
17.   
18.              /* Paste your CSE-Bar-code above this line. */  
19.   
20.              /* Paste your CSE-Results-code below this line. */  
21.   
22.              /* Paste your CSE-Results-code above this line. */  
23.   
24.             <?php $theme->hook('content_after'); ?>  
25.           
26.         </div>  
27.       
28.         <?php get_sidebars(); ?>  
29.           
30.         <?php $theme->hook('main_after'); ?>  
31.           
32.     </div>  
33.       
34. <?php get_footer(); ?>  

Implementing Google CSE on your site

Full-width

Open page-template-cse.php and paste the copied content into where it’s written to paste the CSE-Bar-code. Save the file. Upload the file on your website’s WordPress installation directory via the File Manager of your hosting account.
Login to your website’s dashboard and create a new page. Enter other details like Page Name and/or SEO Options, but nothing in the page body.
Look for the Template option (right side). Choose Google CSE from the dropdown menu. Save or Publish the page.

Compact / Results Only / Google-hosted

Copy the deciding Google Search Element code from the Get Code page. Login to your website’s dashboard and go to Appearance > Widgets. Select Text widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content in the text widget and click Save.

Two page

Specify the url where your CSE’s search results will appear on your site. Once you specify this page name or slug, you must use the same slug while creating the page. Its format should be http://<your-site-name>/<page-name or slug>.

Copy the CSE-Bar-code from the Get Code page. Login to your website’s dashboard and go to Appearance > Widgets. Select Text widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content in the text widget and click Save. Copy the CSE-Results-code from the Get Code page.

Open the template you saved as page-template-cse.php and paste the copied content where it’s written to paste the CSE-Results-Code. Save and upload the file. Login to your website’s dashboard and create a new page. Enter other details like Page Name and/or SEO options.
Keep its slug the same as what you entered in the page URL box but don’t enter anything in page body. Look for the Template option at right side. Choose Google CSE from dropdown menu. Save/Publish the page.

Coutessy to hongkiat.com