Tricks

WordPress Use Google Custom Search Without Plugins

Google-Search-and-WordPress

How to Implement Google Custom Search Results into WordPress Based Websites Without Plugins
WordPress has a relatively good search functionality but tends to get sluggish and doesn’t match keywords that well, and of course when you make a search, WordPress will use a lot resources, why not use the Google custom search instead the default search forms? This is even more apparent when your site is quite large and you have many posts and/or pages. In addition, wordpress search functionality display results ordered by date and not by its relevance to the keywords. If you want to use Google custom search, here are 2 popular Google Custom Search plugins for you to choose from:

Google-Search-and-WordPress
Google-Search-and-WordPress

1) Google Custom Search Plugin

2) Google Custom Search for WordPress

If you don’t want to use plugin, and want to use the Google custom search engine to replace the WordPress default search, you can follow this guide:

How to replace the WordPress search function with Google Custom Search engine

Creating your own custom search engine

1) First of all, we need to visit Google Custom Search and set up our search engine. Follow this link: http://www.google.com/cse/ and you will be taken to the Google Custom Search page were you can create or manage your search engines. Click the New search engine…

Create google custom search engine
Create google custom search engine

Then you will see this page:

Create-Google-Search
Create-Google-Search

Then click the next button, we are on the “Choose or customize a style” page, choose the style you like, we use the default style.

Choose Google Search Style
Choose Google Search Style

After you clicked the next button, then you will on the “get the code” page, just like this:

Google search step 3: get the code
Google search step 3: get the code

Then please click the Change the look and feel link. Please note, this is not a final step, you need to do the following:

Choose the Results only layout.

Choose layout
Choose layout

And you can custom other styles, at the end of the page, click save and get the code link.

You will get the code now:

Get the code
Get the code

Building The Your WordPress Results Page

You want to display Google search results on your own pages, right? To get the custom search in place of WordPress’ in built search function we are going to use a custom page template.

1) Find the page.php file in your WordPress theme you using, make a copy of it and change the copy’s name, just like: page-googlesearch.php

2) Open the page-googlesearch.php, add the following code to the head:

<?php
/*
Template Name: Google Search
*/
?>

3) Your default page.php may like this:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
                <div id="primary">
                        <div id="content" role="main">
 
                                <?php while ( have_posts() ) : the_post(); ?>
 
                                        <?php get_template_part( 'content', 'page' ); ?>
 
                                        <?php comments_template( '', true ); ?>
 
                                <?php endwhile; // end of the loop. ?>
 
                        </div><!-- #content -->
                </div><!-- #primary -->
 
<?php get_footer(); ?>

After you have added the code to the header, it may look like this:

<?php
/*
Template Name: Google Search
*/
?>

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
                <div id="primary">
                        <div id="content" role="main">
 
                                <?php while ( have_posts() ) : the_post(); ?>
 
                                        <?php get_template_part( 'content', 'page' ); ?>
 
                                        <?php comments_template( '', true ); ?>
 
                                <?php endwhile; // end of the loop. ?>
 
                        </div><!-- #content -->
                </div><!-- #primary -->
 
<?php get_footer(); ?>

4) Add your Google search code to the page you just created: page-googlesearch.php

Please insert your google code in the loop, we deleted the following code:

 <?php get_template_part( 'content', 'page' ); ?>
 
                                        <?php comments_template( '', true ); ?>

5) After you have added the Google search code, your page may like this

<?php
/*
Template Name: Google Search
*/
?>

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
                <div id="primary">
                        <div id="content" role="main">
 
                                <?php while ( have_posts() ) : the_post(); ?>


<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '000473678242175408828:1of177prjk8';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>
 
                                       
                                <?php endwhile; // end of the loop. ?>
 
                        </div><!-- #content -->
                </div><!-- #primary -->
 
<?php get_footer(); ?>

Creating the search page

1) Create your search results page.
Now the bulk of the code is done we need to create a new page through the WordPress wp-admin, I have called my page “Search Results.”

add google search page
add google search page, then click “publish”

You will see my page has no content as Google will supply that for us, but the main thing we need to do here is change the template to our custom page template. In this case we need to select the Google Search template from the drop down on the right. Once we have done that hit Publish.

2) Change the default searchform.php

We will also need to alter one other snippet of code. Find and open the searchform.php in your WordPress theme, we need to alter the name field from s to q, and the form action to the URL of our new results page (in my demos case: action=”http://dobeweb.com/search-results”). Once that has been changed we’re ready to go.

Here is my search form code:

<form action="http://dobeweb.com/search-results/" id="search" method="get">
<div><input type="text" onfocus="if (this.value == 'Search this website&hellip;') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website&hellip;';}" value="Search this website&hellip;" name="q" class="s">
<input type="submit" value="" class="search-submit"></div>
</form>

Done!