[Resolved] Google Site Search/Custom Search implementation

Home Forums Support [Resolved] Google Site Search/Custom Search implementation

Home Forums Support Google Site Search/Custom Search implementation

Viewing 15 posts - 16 through 30 (of 40 total)
  • Author
    Posts
  • #669461
    Andrew

    it works! Thank you very much!

    #669828
    Tom
    Lead Developer
    Lead Developer

    You’re very welcome πŸ™‚

    #1654294
    acela

    There are two search forms in GeneratePress – main/desktop and sticky/mobile – so you’d have to do this twice if your site uses them both (adding both a generate_navigation_search_output filter and a generate_inside_navigation hook)… You’d also have to be careful to preserve the screen-reader-text and other source code, so as not to impact GP’s operation and styling of the functions.

    I’m facing the same issue as I’m porting over to GP from a theme that offered Google Custom Search Engine built-in (aka Programmable Search), right from the theme settings… All it took was entering your unique “CX” field in the theme’s customization, which would automatically enable CSE as the default WordPress search facility when set.

    I checked into WordPress plugins, but none of them do this. When the author of the WP Google Search plugin was asked if it replaced the default WP search, he responded: “It is a theme-dependent question; different themes have different solutions for replacing search boxes.”

    This happens in the theme’s search.php file, including in GeneratePress. So I think a cleaner way of doing it is to use a child theme and then tweak this one file.

    All you have to do is switch out the code in search.php having to do with the WP loop, and replace the ‘while’ loop with the site’s Custom Search Engine call, e.g.:

    <div class="cse">
        <script async src="https://cse.google.com/cse.js?cx=123456789012345678901:abcdefghijk"></script>
        <div class="gcse-search" data-queryParameterName="s" enableAutoComplete="true"></div>
    </div>

    The result: the default WP search function is quietly upgraded behind the scenes, and no other work or rerouting or separate search pages is necessary.

    This elegant technique is outlined in more detail here:

    https://techwelkin.com/use-search-box-of-wordpress-to-send-query-to-google-cse

    It would be really simple and lightweight for GeneratePress to offer this feature built-in, with almost no code at all… Just switch it based on an optional field in settings, as my previous theme did.

    This is an important question because the default WordPress search is very weak – and it would make upgrading your site’s search seamless and super easy. What do you think?

    #1654557
    David
    Staff
    Customer Support

    Hi there,

    maybe the generate_do_template wrapper will help – heres Tom explaining how you can replace a core template with your own content:

    https://generatepress.com/forums/topic/question-about-gp-3-0-and-generate_do_template_part/#post-1429909

    #1654705
    acela

    Hey David, thanks so much for your fast response!

    This new function is very powerful; it looks like it was added in GP 3.0.

    But, will it work for these purposes? It appears to run inside the while ( have_posts() ) loop in GeneratePress’ theme files, including search.php.

    Meaning, the code I put in there is called and displayed repeatedly on the search results page… I tried it with a code snippet similar to Tom’s example you reference, instead of using a GP child theme.

    But the problem was that I got 10 duplicate copies of the search results (in a row) on my site’s search page.

    Instead, the Custom Search Engine code needs to be called just once in the search.php template, not in a loop.

    Any way around this?

    #1654730
    David
    Staff
    Customer Support
    #1654741
    acela

    OK, but that would add content – not replace it, right?

    I could try that, but I suspect it would add the custom search engine results at the bottom of the default WordPress search results…

    There would need to be some structure in GeneratePress’s search.php template that would support a wholesale swapping out of the search results (including the loop) with custom code. In other words, a straight replacement of the default search code, rather than a supplement.

    Or am I missing something?

    Thank you again!

    #1655219
    David
    Staff
    Customer Support

    This function will remove the default loop content.:

    // Disable the core template part on the blog page.
    add_filter( 'generate_do_template_part', function( $do ) {
        if ( is_home() ) {
            return false;
        }
        return $do;
    } );

    You can then hook into generate_after_loop to add your custom search.

    #1656373
    acela

    OK, gotcha!

    So, we need to combine the two techniques – the first to disable the default loop content, and the second to hook in our own HTML in its place.

    And… it works! Beautiful. And no child theme is actually necessary. Here is the final code snippet that others can use:

    // Seamlessly replace WordPress' default search with our own custom search engine instead.
    
    // Disable the core template part on the search page (including the loop).
    add_filter( 'generate_do_template_part', function( $do ) {
        if ( is_search() ) {
            return false;
        }
        return $do;
    } );
    
    // Add our own content there to run/use a custom search engine instead.
    add_action( 'generate_after_loop', function() {
        if ( is_search() ) : ?>
    		<div class="cse">
    			<script async src="https://cse.google.com/cse.js?cx=123456789012345678901:abcdefghijk"></script>
    			<div class="gcse-search" data-queryParameterName="s" enableAutoComplete="true"></div>
    		</div>
        <?php endif;
    } );

    [replace the CX parameter value above with your own]

    Also add the following CSS to disable GeneratePress’ paging and use Google’s built-in page nav instead:

    body.search-results nav.paging-navigation {
    	display:none;
    }

    You might consider adding this to your documentation for other customers who’d like to use GeneratePress to easily replace the weak WordPress default search with something much better…

    It’s fantastic that GP 3.0 is so tremendously customizable. Thank you!

    #1656714
    David
    Staff
    Customer Support

    Awesome – yes its incredibly customisable – good to see this being used like this πŸ™‚

    We’re hoping to add some more documentation for the do_template_part hook. Ill mark this topic as a good example of its use – thanks for sharing your final snippet!

    #1856098
    Sukalery

    @acela

    Hello, I tried this code but with no success, when you search with generatepress search bar you will get a page with site header, sidebar, and blank content space without search results, may I ask about your configuration for the look and feel section in google cse?

    screenshot: https://ibb.co/njDzWMW


    @David
    can you share with us your insights into this problem?

    Thanks

    #1856182
    Elvin
    Staff
    Customer Support

    Hi @sukalery,

    Did you replace parameters with the ones appropriated to your site? You should check that. I believe you’ll need your own CX id.

    You’ll have to replace this part of the code. <script async src="https://cse.google.com/cse.js?cx=123456789012345678901:abcdefghijk">

    Change the cx=xxxxxxxxxxxxxxx with your CX id.

    #1856751
    Sukalery

    Hi Elvin,

    it works after changing the cx id only.

    previously I changed all the script code.

    Thank you.

    #1857607
    Elvin
    Staff
    Customer Support

    Glad you got it sorted. No problem. πŸ˜€

    #1909094
    Leslie

    Hi Acela, thanks a million for pasting your code snippet. It’s extremely helpful. I’m using GPT-3 search and am having the exact same problem with replacing the default search loop. With so many amazing search options out there for websites, theme developers should definitely make it easier, or at least more transparent, how to alter search results within their themes. Alternatively, the community needs to press WP to build in a solution for external search. Or plugin developers should do it one-by-one for CSE, GPT-3 etc. I love GP but if I was selecting a theme now, one of my top criteria would be ease of integration with external search engines. Anyway, I have a question about your discussion with David. You said that no child theme is needed. So where did you put your code? My understanding is that functions.php and search.php, like other theme files, should not be altered directly but changes made in a child theme file. Did you nonetheless simply alter search.php directly? Wouldn’t that cause problems when GP is updated? Or did you build a plugin for your code or use one of GP’s hook elements? Thanks again for your insight. Leslie

Viewing 15 posts - 16 through 30 (of 40 total)
  • You must be logged in to reply to this topic.