[Resolved] Google Site Search/Custom Search implementation

Home Forums Support Google Site Search/Custom Search implementation

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #263743
    morriscountynj

    How would you best recommend I integrate Google Site Search into the GP theme?

    I currently have a custom search implementation for DigitalGov (the Federal search engine that was originally provided to state and local agencies), but that service is being shut off as of Feb 28, so I’ll need to switch to something else soon! That will likely be Google Site Search.

    For reference, you’d directed me to insert the following into my functions.php to make DigitalGov work. It looks like it’s 1) code to disable the built-in search, then 2) the custom code from DigitalGov. How would I do this with Google Site Search?

    <?php
     
    /**
     * Changes the nav to be usa search
     */
    if ( ! function_exists( 'generate_remove_default_navigation_search' ) ) :
    	add_action( 'after_setup_theme','generate_remove_default_navigation_search' );
    	function generate_remove_default_navigation_search()
    	{
    		remove_action( 'generate_inside_navigation','generate_navigation_search');
    	}
    endif;
    
    if ( ! function_exists( 'generate_usasearch_navigation_search' ) ) :
    	add_action( 'generate_inside_navigation','generate_usasearch_navigation_search');
    	function generate_usasearch_navigation_search()
    	{
    		$generate_settings = wp_parse_args( 
    			get_option( 'generate_settings', array() ), 
    			generate_get_defaults() 
    		);
    		
    		if ( 'enable' !== $generate_settings['nav_search'] )
    			return;
    			
    		?>
    		<form accept-charset="UTF-8" role="search" method="get" id="search_form" class="search-form navigation-search" action="http://search.usa.gov/search">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="✓" /></div>
        <input id="affiliate" name="affiliate" type="hidden" value="morriscountynjgovernment" />
    <label class="screen-reader-text" for="query">Enter Search Term(s):</label>
    			<input type="search" class="search-field" id="query" name="query" >
    			<input type="hidden" name="submit" value="Search" name="commit" />
    		</form>
     
    		<?php
    	}
    endif;
    ?>
    #263789
    Tom
    Lead Developer
    Lead Developer

    You can probably use the default navigation search and just install a plugin.

    This is one of many I found: https://en-ca.wordpress.org/plugins/wp-google-search/

    #264998
    morriscountynj

    ok, i’ll give that a try

    #265425
    morriscountynj

    tried that plugin (and another couple). what they seem to do is allow for the adding of shortcodes or widgets with GSE to the website. they do NOT replace the current wordpress search.

    an issue seems to be that the default GP search is your typical search form (<form>, <input>, all that, with distinct classes). however, the GSE code is just a piece of JS, and a placeholder tag:

    <script>
      (function() {
        var cx = '003330494988585920849:5b1g6iezugw';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
      })();
    </script>
    <gcse:searchbox-only></gcse:searchbox-only>

    I’m not sure how to integrate one into the other. Is it possible?

    #265609
    Tom
    Lead Developer
    Lead Developer

    I’m not sure if it’s possible to integrate that with the navigation search I’m afraid.

    I would assume that the GS plugins would just replace the search results page with Google search results? In that case, the appearance/location of the form itself shouldn’t matter.

    #265883
    morriscountynj

    Playing around with this and noticed something interesting.

    Via this gist, replacing the default search with another one in functions.php: gist

    If I add the following code

    <form class="form search-form navigation-search" >
    <gcse:searchbox-only></gcse:searchbox-only>
    </form>

    The search box then appears in the proper place, in the nav bar.

    It appears that having a <form> tag is the trigger. If I wrap the GSE code in a <div>, for example, the search box doesn’t appear.

    That means that there end up being 2 <forms>, one nested in the other. (The GSE code renders out, of course, as a <form>)

    My question is — what file has that <form> trigger? And can I edit it to be a div, or a class, or ANYTHING else? I would ideally do something like

    <div class="form search-form navigation-search" >
    <gcse:searchbox-only></gcse:searchbox-only>
    </div>

    Does this make any sense? I can post this somewhere if you want to see.

    #266033
    Tom
    Lead Developer
    Lead Developer

    If you’re overwriting that function, then you should be able to change the <form> to a <div> like your last example.

    You most likely can’t change the form tag inside the gcse code, as that would be rendered by Google.

    #665350
    Andrew

    is there any update to this? i was to use gse but use the built in nav bar search.

    #665631
    Tom
    Lead Developer
    Lead Developer

    I don’t believe so, but it depends on if Google allows you to use your own search bar to open their results.

    If that’s possible then we should be able to integrate it.

    #668652
    Andrew

    yes, i have created my own search bar based upon their documentation, I think the trick is being able to rename the search box and being able to set a custom form action. Below is a working example of my search box i have on my site, i have edited some code for privacy.

    ************search box code in a wordpress widget area********************
    <style type=”text/css”>
    @import url(//www.google.com/cse/api/branding.css);
    </style>

    <style type=’text/css’>
    button{
    background-color:#003057;
    color:#ffffff;
    border-color:#000000;

    }
    button:hover {
    background-color:#e5e5e5;
    color:#003057;
    border-color:#000000;
    }
    </style>
    ************end search box code***************

    **********results page code*******************

    <script>
    (function() {
    var cx = ‘XXXXXXXXXX1757984194:t_vasmjo-mm’;
    var gcse = document.createElement(‘script’);
    gcse.type = ‘text/javascript’;
    gcse.async = true;
    gcse.src = ‘https://cse.google.com/cse.js?cx=&#8217; + cx;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(gcse, s);
    })();
    </script> <style type=”text/css”>
    @import url(//www.google.com/cse/api/branding.css);<br /> </style>

     

    <style type=’text/css’>
    table, th, td {<br />
    border: 1px solid #ffffff;<br />
    }<br />
    </style>
    ***********end results page code*******************

    #668909
    Tom
    Lead Developer
    Lead Developer

    You could try a function like this:

    add_filter( 'generate_navigation_search_output', function() {
        return sprintf( // WPCS: XSS ok, sanitization ok.
            '<form action="https://mysite.com/search-results/" id="cse-search-box2" class="search-form navigation-search">
                <input type="hidden" name="cx" value="XXXXXXXXXX1757984194:t_vasmjo-mm" />
                <input type="hidden" name="ie" value=”UTF-8″ />
                <input type="search" class="search-field" value="%2$s" name="q" title="%3$s" />
             </form>',
             esc_url( home_url( '/' ) ),
             esc_attr( get_search_query() ),
             esc_attr_x( 'Search', 'label', 'generatepress' )
        );
    } );
    #669271
    Andrew

    the only problem i see with the code you attached is that it creates an additional input box in the nav bar above my menu items and the embedded search doesnt function properly. however if you enter a query string in the new box and press enter it goes to the right location. any other suggestions?

    #669430
    Tom
    Lead Developer
    Lead Developer

    It shouldn’t create an extra input – those are hidden input types, so they don’t display. Can you show me?

    #669437
    Andrew
    #669458
    Tom
    Lead Developer
    Lead Developer

    I just edited the code above – can you give it another try?

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