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.
  • 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>
Adding new Google Custom 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
CSE created
  • Go to “Look and Feel
  • Select Two Pages layout
  • ๐Ÿ’พ Save & Get code
Two Page Layout
Two Page Layout

Configure Search URL Parameters

  • In Search Results Details, set Search Results page URL and Query parameter.
setup search param urls
  • 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

Setup code inside WordPress

Elements
  • Create a new Hook
Hook
  • Name it ‘Custom Search Engine (English)’ and paste the JS that you copied in step 7.
cse script
  • 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

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>
Adding element

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 via Real Time Find and Replace Plugin.WordPress Search CSE

Thanks for reading.

Any question? Please ask at Gulshan Forum.

35 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
  4. 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?

    Reply
  5. 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?

    Reply
    • 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.

      Reply
      • 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 ..

        Reply

Leave a Comment