[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 10 posts - 16 through 25 (of 25 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!

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