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.

Follow below Steps to use CSE in GeneratePress

    1. Add a new page with Title "Search Results" and permalink "search" in your WordPress.
    2. Then, add below CSE code in the Text mode to display Search Results only.
    3. Sign in to CSE website
    4. Add a new Search Engine
    5. Provide the URL of site in the wildcard format (ending with *) to display it in the Search results.

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

    6. Click Create button, you will see a message: Congratulations! You've successfully created your Custom search engine.
    7. Next, go to Control Panel
    8. Go to "Look and Feel" and select Two Pages layout and click Save & Get code button.
    9. Important step: Click on "Search Results Details" button and set proper Search Results page URL and query parameter.
    10. 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.
    11. Enable Elements module which is available in the Premium version
    12. Create a new Hook
    13. Name it 'Custom Search Engine (English)' and paste the JS that you copied in step 7.
    14. 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.
    15. Use wp_head hook with highest priority value 0 to ensure script get placed at the top section of head in the HTML.
    16. 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.
    17. 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.
    18. Generally, WordPress display Search results at

      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.
    19. 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.

Now you can see Search Query in Title and Heading.

FAQs

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

  • Go to Search Features
  • Click on Advanced
  • Set Link Target to _self and save changes.

Thanks for reading.

7 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

Leave a Comment