Updated on August 14, 2016
This tutorial is based on Rowell Dionicio’s blog post on adding Google custom search to Genesis framework which in turn was based on John Levandowski’s.
The idea is to replace the standard WordPress/Genesis search with a custom search engine powered by Google.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Go to cse.google.com and click on New search engine.
Enter your site URL with an asterisk at the end and click CREATE.
Under Edit search engine at the left, click on Look and feel. Under Layout select Results only. Click Save.
Click on Search features at left, go to Advanced tab and enter q in Query Parameter Name field. Click Save.
Click on Setup at left and click on Get code button.
At the bottom click on Get the V1 code link and copy the displayed code to your text editor. You will use this later.
Step 2
Add the following in child theme’s functions.php:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_filter( 'genesis_search_text', 'custom_search_text' ); | |
| /** | |
| * Customizes the text of the search input | |
| * | |
| * @param string $text current text | |
| * @return string modified text | |
| */ | |
| function custom_search_text( $text ) { | |
| return esc_attr( 'Google Search...' ); | |
| } | |
| add_filter( 'genesis_search_form', 'custom_search_form', 10, 4 ); | |
| function custom_search_form( $form, $search_text, $button_text, $label ) { | |
| $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' …' ); | |
| $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) ); | |
| $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}"; | |
| $onblur = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}"; | |
| //* Empty label, by default. Filterable. | |
| $label = apply_filters( 'genesis_search_form_label', '' ); | |
| $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value'; | |
| if ( genesis_html5() ) { | |
| $form = sprintf( '<form %s>', genesis_attr( 'search-form' ) ); | |
| if ( genesis_a11y( 'search-form' ) ) { | |
| if ( '' == $label ) { | |
| $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) ); | |
| } | |
| $form_id = uniqid( 'searchform-' ); | |
| $form .= sprintf( | |
| '<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="q" id="%s" %s="%s" /><input type="submit" value="%s" /></form>', | |
| home_url( '/?s={s}' ), | |
| esc_attr( $form_id ), | |
| esc_html( $label ), | |
| esc_attr( $form_id ), | |
| $value_or_placeholder, | |
| esc_attr( $search_text ), | |
| esc_attr( $button_text ) | |
| ); | |
| } else { | |
| $form .= sprintf( | |
| '%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="q" %s="%s" /><input type="submit" value="%s" /></form>', | |
| esc_html( $label ), | |
| home_url( '/?s={s}' ), | |
| $value_or_placeholder, | |
| esc_attr( $search_text ), | |
| esc_attr( $button_text ) | |
| ); | |
| } | |
| } else { | |
| $form = sprintf( | |
| '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="q" class="s search-input" onfocus="%s" onblur="%s" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>', | |
| // home_url( '/' ), | |
| home_url( '/search/' ), | |
| esc_html( $label ), | |
| esc_attr( $search_text ), | |
| esc_attr( $onfocus ), | |
| esc_attr( $onblur ), | |
| esc_attr( $button_text ) | |
| ); | |
| } | |
| return $form; | |
| } | |
| add_filter( 'genesis_attr_search-form', 'custom_attributes_search_form' ); | |
| /** | |
| * Add attributes for search form. | |
| * | |
| * @since 2.2.0 | |
| * | |
| * @param array $attributes Existing attributes. | |
| * | |
| * @return array Amended attributes. | |
| */ | |
| function custom_attributes_search_form( $attributes ) { | |
| $attributes['action'] = home_url( '/search/' ); | |
| return $attributes; | |
| } |
Step 3
Create a file named say, template_google-cse.php in the child theme directory having the following code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| Template Name: Google Custom Search | |
| Description: Google Custom Search | |
| Created by John Levandowski | |
| Modified by: Rowell Dionicio and Sridhar Katakam | |
| Site: https://rowell.dionicio.net/adding-google-custom-search-to-genesis-framework/, https://sridharkatakam.com/add-google-custom-search-genesis/ | |
| */ | |
| # Force full width content | |
| add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
| # Remove the breadcrumb | |
| // remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); | |
| # Remove the post content | |
| remove_action( 'genesis_entry_content', 'genesis_do_post_content' ); | |
| # Add custom post content | |
| add_action( 'genesis_entry_content', 'custom_do_post_content' ); | |
| /** | |
| * Outputs custom post content | |
| * | |
| * @return void | |
| */ | |
| function custom_do_post_content() { | |
| get_search_form(); ?> | |
| INSERT GOOGLE CUSTOM SEARCH CODE HERE | |
| <?php } | |
| genesis(); |
Switch to the text editor from Step 1, copy all the code just before the beginning of <style type='text/css'>.
Replace INSERT GOOGLE CUSTOM SEARCH CODE HERE with the copied code.
Here’s a full example for your reference:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| Template Name: Google Custom Search | |
| Description: Google Custom Search | |
| Created by John Levandowski | |
| Modified by: Rowell Dionicio and Sridhar Katakam | |
| Site: https://rowell.dionicio.net/adding-google-custom-search-to-genesis-framework/, https://sridharkatakam.com/add-google-custom-search-genesis/ | |
| */ | |
| # Force full width content | |
| add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
| # Remove the breadcrumb | |
| // remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); | |
| # Remove the post content | |
| remove_action( 'genesis_entry_content', 'genesis_do_post_content' ); | |
| # Add custom post content | |
| add_action( 'genesis_entry_content', 'custom_do_post_content' ); | |
| /** | |
| * Outputs custom post content | |
| * | |
| * @return void | |
| */ | |
| function custom_do_post_content() { | |
| get_search_form(); ?> | |
| <div id='cse' style='width: 100%;'>Loading</div> | |
| <script src='//www.google.com/jsapi' type='text/javascript'></script> | |
| <script type='text/javascript'> | |
| google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT}); | |
| google.setOnLoadCallback(function() { | |
| var customSearchOptions = {}; | |
| var orderByOptions = {}; | |
| orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}]; | |
| customSearchOptions['enableOrderBy'] = true; | |
| customSearchOptions['orderByOptions'] = orderByOptions; | |
| var customSearchControl = new google.search.CustomSearchControl('003698980430458114438:pxccgvs_fv0', customSearchOptions); | |
| customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); | |
| var options = new google.search.DrawOptions(); | |
| options.enableSearchResultsOnly(); | |
| options.setAutoComplete(true); | |
| customSearchControl.draw('cse', options); | |
| function parseParamsFromUrl() { | |
| var params = {}; | |
| var parts = window.location.search.substr(1).split('&'); | |
| for (var i = 0; i < parts.length; i++) { | |
| var keyValuePair = parts[i].split('='); | |
| var key = decodeURIComponent(keyValuePair[0]); | |
| params[key] = keyValuePair[1] ? | |
| decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : | |
| keyValuePair[1]; | |
| } | |
| return params; | |
| } | |
| var urlParams = parseParamsFromUrl(); | |
| var queryParamName = 'q'; | |
| if (urlParams[queryParamName]) { | |
| customSearchControl.execute(urlParams[queryParamName]); | |
| } | |
| }, true); | |
| </script> | |
| <?php } | |
| genesis(); |
Step 4
Add the following in child theme’s style.css:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .entry-content .search-form { | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| .search-form input { | |
| float: left; | |
| font-size: 16px; | |
| } | |
| .content .search-form input[type="search"] { | |
| width: 80%; | |
| margin-right: 2%; | |
| } | |
| .search-form input[type="submit"] { | |
| width: 18%; | |
| margin-top: 0; | |
| } | |
| #cse .gsc-control-cse { | |
| padding: 0; | |
| border: none; | |
| } | |
| #cse .gsc-above-wrapper-area { | |
| border-bottom: none; | |
| padding: 0; | |
| } | |
| #cse table { | |
| line-height: 1; | |
| margin-bottom: 0; | |
| } | |
| #cse tbody { | |
| border-bottom: none; | |
| } | |
| #cse .gsc-selected-option-container { | |
| max-width: none; | |
| } | |
| #cse .gsc-result .gs-title { | |
| height: auto; | |
| } | |
| @media only screen and (max-width: 661px) { | |
| .search-form input { | |
| float: none; | |
| } | |
| .search-form input[type="search"] { | |
| width: 100%; | |
| margin-right: 0; | |
| margin-bottom: 10px; | |
| } | |
| .search-form input[type="submit"] { | |
| width: auto; | |
| } | |
| } |
Step 5
Create a static Page titled Search, apply Google Custom Search template and publish it while making sure that the slug (the last part of permalink) is search.
References:
genesis/lib/structure/search.php
genesis/lib/functions/markup.php
Uh oh, looks like the Dionicio link is now dead. Is there any other place to find the code / instructions from it?
Try https://web.archive.org/web/20140902011354/https://rowell.dionicio.net/adding-google-custom-search-to-genesis-framework/
I shall update my tutorial and add all the steps in a couple of days.
This was easy to follow and made it all a lot easier for me. Thank you!
Does this show the normal Google search ads, as well as the posts from the site? I can’t tell from the sample I set up for a sandbox site.
It looks like all the Google ads are showing now, so maybe it just took time. Thank you!!
Hi there,
I used to implement GCSE in another way on one of my WPMS installs, and I’d have it all built in to a plugin. This method is great because it adds accessibility to it, and makes use of the genesis_attr_search-form filter. I’ve made a few alterations to meet my specific needs, but this saved me a lot of time, and it’s much appreciated.
I’m wondering if it’s possible to use the section below in a plugin. the action attribute doesn’t seem to override unless it’s in the theme’s function.php file. I’ve used other filters like this in plugins (nav filters, for example) and they seem to override just fine. Not sure why this one doesn’t unless it’s in the theme’s functions.php. Any ideas?
`
add_filter( ‘genesis_attr_search-form’, ‘custom_attributes_search_form’ );
function custom_attributes_search_form( $attributes ) {
$attributes[‘action’] = home_url( ‘/search/’ );
return $attributes;
}
`
When in a plugin, it still pulls the default $attributes[‘action’] = home_url( ‘/’ ); from markup.php.
One thought I had is that maybe it only works in a plugin if you’re adding a new attribute instead of overriding an existing one.
Once again, thanks!
Looks like Google no longer supports this method, meaning Google no longer shows any V1 code. In fact, it shows the following error:
Unauthorized access to internal API. Please refer to https://support.google.com/customsearch/answer/4542055
I might be wrong, but you might want to look into this.
Thanks,
This is a great tutorial, but, unfortunately, I dound hard to implement it along with better designs Sridhar has in other tutorials, like this one: https://sridharkatakam.com/how-to-add-a-search-form-in-nav-menu-in-genesis/
Struggling to design GCS better, but with no luck as of now..
I have managed to do it for my Magazine pro, though with some restrictions. Did everything as in tutorial.
But also added to functions.php (after what is told in this tutorial):
/——Add search to menu ——-/
// Add search form to secondary navigation in genesis.
add_filter( ‘wp_nav_menu_items’, ‘g_search_right_nav’, 10, 2 );
function g_search_right_nav( $menu, stdClass $args ){
if ( ‘secondary’ != $args->theme_location )
return $menu;
if( genesis_get_option( 'nav_extras' ) )return $menu;
$menu .= sprintf( '<li class="menu-item">%s</li>', __( genesis_search_form( $echo ) ) );
return $menu;
}
Also added to style.css:
/* search styling */
.genesis-nav-menu .search-form input {
background-color: #ffffff; !important
border: 1px solid #a5a5a5; !important
color: #000000; !important
text-transform: uppercase;
width: 150px;
}
.genesis-nav-menu .search-form input:focus {
border: 1px solid #000000;
}
.genesis-nav-menu .search-form ::-moz-placeholder {
color: #000000; !important
}
.genesis-nav-menu .search-form ::-webkit-input-placeholder {
color: #000000; !important
}
It works. What I don’t like is that it looks as one more section of menu – was not able to move it to the right. Also, I was not able to style it nicely. I guess my styling is wrong or not complete. Anyway, my main purpose was to move search to secondary menu and remove it from sidebar (since it’s inconvinient to scroll to it on mobile). Also, the colors are blavk on mobile – didn’t find a way to change it. Otherwise it works. You can check how it looks as of now at classicalmusicnews.ru.
Once again, Sridhar, thanks for sharing and giving info to dig through and find a way!