Use Google Custom Search Engine in GeneratePress WordPress Theme

There are two reasons why you may want to replace the default WordPress search to 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.

Steps for adding Google Custom Search

Add a new page with Title “Search Results” and permalink “search” in your WordPress.
Noindex Search Results page following instructions from your SEO plugin.

noindex search results page — Can’t find? Re-setup RankMath with Advanced mode

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

<gcse:search enablehistory="false"></gcse:search>

Sign in to CSE website
Add a new Search Engine

Provide the URL of site in the wildcard format to display it in the Search results
Take care of www or non-www as per your canonical 😉

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

Congratulations! You’ve successfully created your Custom search engine.
Go to Control Panel

Go to “Look and Feel”
Select Two Pages layout
💾 Save & Get code

Configure Search URL Parameters

In Search Results Details, set Search Results page URL and Query parameter.

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.

Setup code inside WordPress

Enable Elements module which is available in the GeneratePress Premium.

Create a new 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.

Hide Advertisement of Google Custom Search Results

Similarly, using a new Hook add below inline CSS for good design of Search Results page. It 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>

We know WordPress display search results at https://www.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' ) 
); 
} );
// Other theme? Use Real Time Find and Replace Plugin

Correct JSON path

// For Yoast SEO
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' );

// For Rankmath
function gk_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'rank_math/json_ld/search_url', 'gk_change_json_ld_search_url' );

Display the Page Title and Heading as per Search Query

Thanks to James Hibbard who provided 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.

FAQs

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

Set Link Target to _self

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

Replace name and action parameter as per CSE setup via Real Time Find and Replace Plugin.

Thanks for reading.

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

Rajdeep Das

I want to show ads in search results but also want the CSS design, what Should I remove from the “HideAdvertisement of Google Custom Search Results” CSS code to display search results?

Is it just these 2 ?

.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%;
}
Effat

I follow this method and add it to my website but suddenly it is not working. Search page shows empty! Can you help to solve this!!
Mark

Thank you so much Sir Gulshan Kumar! I have successfully implemented it on my site https://www.teacherph.com/

It works well paired with GeneratePress theme.
- Gulshan Kumar
  
  Good to know. Thanks for your kind feedback.
Mahi

Can i change ” Correct JSON path” permanently without this plugin?
- Gulshan Kumar
  
  Hi Mahi, Yeah, same snippet can be added in Theme functions.php last line but it’s a poor idea. When theme will update, that will be lost. That’s a reason, I have recommended Code Snippets plugin way. It’s a reputed plugin with decent support from author. Use it with confidence.
  - Mahi
    
    Thank you for your prompt response. I have successfully setup it by watching your tutorial. But sometimes it doesn’t work in mobile view. Sometimes I open the search page directly but the search box doesn’t show ..
Arjun Reddy

I’m using Hueman Theme. Any alternative code for this.
- Gulshan Kumar
  
  Please check with that Theme Author.
Anon

How to increase the maximum text length of the snippet??
- Gulshan Kumar
  
  CSE doesn’t offer a way to increase meta description length.
Ankit Kumar

Hi Gulshan, Thanks for this post. It’s worked and I loved the method. I wanna ask how can I hide the page which we have created in the beginning for search results.

What did you do with the page? I can’ find it on your website.

can I delete that “search page” from my site?
- Anirban Roy
  
  Ankit, that’s the page where the code to display the search results has to be put. When someone searches something, he/she is taken to that page and that’s where the search results appear.
- Gulshan Kumar
  
  Set noindex.
  - Ankit
    
    Okay, thanks.
Anirban Roy

Thank you for the great article, Gulshan! I am actually using the Rank Math plugin. Can you show me how to change the searchAction target from /?s= to /search/?q=

I can change it by directly editing the plugin file, which is located at includes > modules > schema > snippets > class-website.php file, but in that case, the change will again be restored in case there’s a new update to the plugin.

Is there a permanent solution?
- Gulshan Kumar
  
  Just updated my article, it has snippet for RankMath.
  - Anirban
    
    Thanks, it works!
Milind Sahu

The awesome tutorial I have integrated Custom search results on my site, what you have shown is entirely unique. Thanks for this tutorial.
- Gulshan Kumar
  
  Glad to hear. Thank you Milind.
Wasim Akram

How can i enable this in my newspaper theme?
- gulshankumar
  
  Try using Real Time Find and Replace Plugin to update Search Box. Rest process is same.
  - wasim akram
    
    In generatepress you have used elements to hook the JS. How can I do it in newspaper theme to hook that JS?
    - gulshankumar
      
      You can use Theme Options (Header/Footer) field for adding that code or manually place inside page where required using HTML tag.
      - Wasim Akram
        
        Ok thank you for this. O will try to do it.
Raj

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.
- Gulshan Kumar
  
  I have updated my article with video. Please find in this tutorial.
Anoop Vaish

A lot of useful information is shared for people like us. Thanks for sharing
- Gulshan Kumar
  
  Good to know. Thanks for your kind feedback. 😊
Whois Games

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.
- Gulshan Kumar
  
  Hi, I have updated this article.
  
  Convert Widget Search Box to CSE
  
  Let me know if you have any additional queries.
  
  Thanks & Regards,
  Gulshan
Aliii

👏👏👏👏
Abhishek

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.
- Gulshan Kumar
  
  This Filter works in GeneratePress. Please check with Genesis developer to find relevant code.
  - Abhishek
    
    Thanks, got it working. Thank you for the great tutorial 🙂
Abhishek

How to modify snippets at step 18 for the same? I’m stuck. Please help.
- Gulshan Kumar
  
  May I know please what specific thing you wish to modify? Is it Search Results slug /search/ or what? Please elaborate.
  Thank you.
Abhishek

Can I add this to Genesis theme?
- Gulshan Kumar
  
  Of course, yes.