Use Google Custom Search Engine in GeneratePress WordPress Theme

There are two reasons why you may want to switch Google Custom Search Engine in GeneratePress Theme.

  • You need a client-side solution for a Static WordPress site.
  • You want to improve the search experience by displaying highly relevant results.

Let’s get straight to the point.

Video Tutorial

Steps for adding Google Custom Search

Add a new page with Title “Search Results” and permalink “search” in your WordPress.

<div class="gcse-searchbox-only"></div>
<div class="gcse-searchresults-only"></div>

Then, add below CSE code in the Text mode to display Search box and results.

Sign in to CSE website

Add a new Search Engine

Adding new Google Custom Search Engine

Provide the URL of site in the wildcard format to display it in the Search results.

sites to search
For example, I wish to display Search result from https://gulshankumar.net/* path

Click Create button, you will see a message: Congratulations! You’ve successfully created your Custom search engine.

Next, go to Control Panel

CSE created

Go to “Look and Feel” and select Two Pages layout and click Save & Get code button

Two Page Layout
Two Page Layout

Important step: Click on Search Results Details button and set your Search Results page URL and query parameter.

configure search result page
Set search details

Click Save & Get Code button. You will see Search Results code.  Ignore the Div part, we have already added in first step. Just copy the JavaScript. We are going to use it with Hook.

Copy CSE JS

Enable Elements module which is available in the GeneratePress Premium.

Elements

Create a new Hook

Hook

Name it ‘Custom Search Engine (English)’ and paste the JS that you copied in step 7.

Place the JS code that you copied in step 9. from Google Custom Search Engine. I have added preload part myself for loading JS quickly in the browser. Make sure to replace the publisher ID.

<link rel="preload" href="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY" as="script">
<script async src="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY"></script>

Use wp_head hook with highest priority value 0 to ensure script get placed at the top section of head in the HTML.

Concerning performance, we can set Display Rules to load this JS only on WordPress Search Results page where it is actually required and non-other page.

Hook Page Rule

Similarly, using a new Hook  add below inline CSS for good design of Search Results page. Below CSS Code will hide annoying advt as well in the free version.

<style>
/* Google search results */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Do no display the count of search results */
.gsc-result-info {
display: none;
}
/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}
/* Hide the thumbnail images in search results */
.gsc-thumbnail {
display: none;
}
/* Hide the snippets in Google search results */
.gs-snippet {
font-size: 16px;
}
/* Change the font size of the title of search results */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Change the font size of snippets inside search results */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Highlight the pagination buttons at the bottom of search results */
.gsc-cursor-page {
font-size: 1.3em;
padding: 4px 8px;
border: 2px solid #ccc;
}
.gsc-adBlockVertical, .gsc-adBlock {
/* this hides both the top and right ad blocks*/
display: none !important;
}
.gsc-thinWrapper {
/* this gives you use of the whole block, as opposed to 69% google gives*/
width: 100%;
}
.gsc-result-info-container {
display: none;
}
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
display: none;
}
td.gsc-configLabelCell {
display: none;
}
.gsc-above-wrapper-area {
border-bottom: 0px solid #E9E9E9!important;
padding: 0px!important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive table {
margin-bottom: 0px !important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive tbody {
border-bottom: 0px solid #ddd !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
border-bottom: 0px solid #4199FB;
}
.gs-webResult {
border: 0px solid #eee !important;
padding: 0em !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
margin-top: 18px !important;
}
div.gcsc-branding {
display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top: 0 !important;
padding-bottom: 30px !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 10px 0 !important;
}
table.gsc-search-box td {
border: 0px !important;
}
.gsc-input-box table {
margin: 0px ;
}
.gcsc-find-more-on-google {
display: none !important;
}
.gsib_a {
padding: 9px 9px 9px 9px !important;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
border-color: #da0000 !important;
background-color: #da0000 !important;
padding: 10px 19px 10px 19px !important;
}
button.gsc-search-button.gsc-search-button-v2 svg {
width: 18px;
height: 13px;
}
.gsc-input-box {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding: inherit !important;
}
</style>

WordPress display search results at https://gulshankumar.net/?s=query

Therefore, it is important to change action path for Search box and Yoast added JSON-LD markup for the Site Search. You should place below snippet using Code Snippet plugin.

// Change Search path in the GeneratePress Theme
add_filter( 'generate_navigation_search_output', function() {
printf( 
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder=" Search" class="search-field" value="%2$s" name="q" title="%3$s" />
</form>', 
esc_url( home_url( '/search/' ) ), 
esc_attr( get_search_query() ), 
esc_attr_x( 'Search', 'label', 'generatepress' ) 
); 
} );
// Change JSON-LD path
function yst_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'wpseo_json_ld_search_url', 'yst_change_json_ld_search_url' );

Bonus Tip: Display Title and Heading dynamically as per user Search Query String. Thanks to James Hibbard who suggested me below snippet which is based on URLSearchParams. This should work for all modern browsers. Make sure to place script with wp_footer hook using GeneratePress Elements specifically for ‘Search Results’ page that we created in first step.

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const searchTerm = urlParams.get('q');
if (searchTerm) {
    const heading = document.querySelector('h1');
    const title = document.querySelector('title');
    heading.textContent = `Search Results for ${searchTerm}`;
    title.textContent = `Search Results for ${searchTerm}`;
}
</script>

Now you can see Search Query in Title and Heading.

Search Query

FAQs

How to force Search Result link to open in same tab?

Set Link Target to _self
force link opening in same tab

How to convert Widget Search Box or Manually to CSE version?

Replace name and action parameter as per CSE setup.WordPress Search CSE

Thanks for reading.

If you've any question related to this blog post, please ask at our Gulshan Forum.

13 thoughts on “Use Google Custom Search Engine in GeneratePress WordPress Theme”

  1. add_filter( ‘generate_navigation_search_output’, function()
    I believe this takes search input and displays the result in /search/ page. This is not working with genesis.

    Reply
  2. Thank you for writing an awesome tutorial.
    I have a few questions
    1. How to include the search box above the result page like yours? ==> https://i.imgur.com/gAvg84e.png
    2. When someone types the wrong URL and then it will get redirected to the 404 pages. There is a search box and that search box is using WordPress default search. so, how to convert that search box too into CSE?
    Thank You.

    Reply
  3. Hi, I followed the above tutorial but the google search is not working on my site. I am using GenertePress Pro.
    Could you please help me out.

    Reply

Leave a Comment