How to Add Google Custom Search Engine to Genesis Framework or Child Themes

add-custom-search-engine--featured

WordPress has its own search function and for general usage, it works perfectly fine. The thing is, the default search function in WordPress it is not so efficient or robust in phrasing the search results. i.e, there will be a several miss matched list of results way too often.

The good thing about using WordPress is that you can easily integrate the Google custom search with WordPress search.

But if you are using any of the Genesis child themes, then the process of adding Google Custom Search Engine (CSE) will be a bit different.

So, without further ado, let me guide you on how to add Google custom search engine to Genesis.

Add Google Custom Search Engine to Genesis

The process to add Google custom search engine to Genesis is quite simple and easy. Moreover, the process is applicable to any Genesis child theme.

1. To start off, you first need to create a custom search engine from Google. Head over the Google Custom Search page, click on the link “New Search Engine” and create a new search engine for your website.

Create new Google custom search engine for website.

2. After creating the custom search engine, head over to the “Look and Feel” section and select the option “Results Only.” This ensures that the Google Custom Search Engine will only produce search results and nothing else so that we can integrate them to our Genesis child theme.

Select Results Only option under the Look and Feel section.

3. Now, click on the link “Setup” and then click on the button “Get code” to get the custom search engine code.

Get your custom search engine code from the Setup section.

6. The above action will display the custom search engine code. From the code, copy the CX ID and save it somewhere. We are going to need it in the next steps.

Copy the CX ID from the displayed code.

7. Now, create a new file on your desktop with the name page_googlecse.php and add the below code to that file. After adding the code, don’t forget to add your CX ID as notified in line 18.

You can also download the file if you need.

<?php
/*
 * Template Name: Google CSE
 *
 */

add_action( 'genesis_meta', 'bs_noindex_page' );
function bs_noindex_page() {
	echo '<meta name="robots" content="noindex, follow">';
}

add_action( 'genesis_meta', 'bs_google_cse_meta', 15 );
function bs_google_cse_meta() { ?>
 
	<script>
  		(function() {
    	
    		var cx = '00030xxxxxxxxxxxxx:xxxxxx3ye0'; // Insert CX code
    		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>
<?php 
}

add_filter( 'body_class', 'bs_add_body_class' );
function bs_add_body_class( $classes ) {
   
   $classes[] = 'google-cse';
   return $classes;
}

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'bs_custom_content' );
function bs_custom_content() { ?>
	<article class="entry" itemtype="http://schema.org/SearchResultsPage" itemscope="itemscope">
		<header class="entry-header">
			<h1 class="entry-title" itemprop="headline">
    			<?php echo get_the_title(); ?>
    		</h1>
    	</header>
    	
    	<div class="entry-content" itemprop="text">
    		<?php echo get_the_content(); ?>
    		<gcse:searchresults-only linkTarget='_self'></gcse:searchresults-only>
    	</div> 
    </article> 
		
<?php }
genesis();

6. After creating and editing the file, upload it to your Genesis child theme folder. Generally, the location of your Genesis child theme will be something like wp-content/themes/yourChildTheme.

Upload custom search engine template file to your child theme folder.

7. After uploading the file, open up your theme’s functions.php file and add the blow code to it, save and reupload the file.

// Alter the Genesis Search
add_filter( 'genesis_search_form', 'bs_search_form', 10, 4);
function bs_search_form( $form, $search_text, $button_text, $label ) {
 
$onfocus = " onfocus=\"if (this.value == '$search_text') {this.value = '';}\"";
$onblur = " onblur=\"if (this.value == '') {this.value = '$search_text';}\"";
$form = '<form method="get" class="searchform search-form" action="' . home_url() . '/search" >' . $label . '
<input type="text" value="' . esc_attr( $search_text ) . '" name="q" class="s search-input"' . $onfocus . $onblur . ' />
<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
</form>';
 
return $form;
 
}

8. That’s all for the coding part. Now, create a new page by navigating to “Pages > Add New.”

9. Enter the title of the page whatever you want but make sure that the page URL is /search/. For instance, you should be able to access it using http://example.com/search/.

10. In the Page Attribute section, select “Google CSE” from the Template drop-down menu.

11. Now, head over to the Widgets section in your WordPress admin area, drag and drop the regular search widget to your desired location.

Place the regular search widget on the sidebar.

That’s all there is to do and you’ve successfully added Google Custom Search Engine to Genesis. From this point forward, the WordPress search feature is replaced with Google Custom Search and all the results are delivered with the power of Google.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the above method to add Google Custom Search Engine to Genesis.

6 Comments

  1. Hi, Hope you can help. I do not want to merge both the searches but want to have 2 search bars, one google search bar and the one that comes with the framework. How do I go about it? TIA

    1. In that case, simply copy and paste the code displayed in the Google Custom Search Engine page into a Text widget.

      This acts as a second search bar without the need for any tweaking or modifications to the current search bar.

  2. Thank you for this tutorial. I’m not sure why, but I had to make two modifications: (1) rename page_googlecse.php as search.php; and (2) create a new page called “Search” and save it with this template. Just out of curiosity, do you have any idea what I was missing before? I’m using a highly customized version of the Genesis Sample Theme.

    1. Hi Alan, what you did was correct. However, there is no need to change the file name. That being said, looks like I forgot to mention a couple of steps. i.e, creating a page and selecting the page template. Just updated the article, thanks for pointing it out.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.