- This topic has 39 replies, 6 voices, and was last updated 2 years, 2 months ago by Brian.
-
AuthorPosts
-
January 13, 2017 at 7:22 am #263743morriscountynj
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; ?>
January 13, 2017 at 9:50 am #263789TomLead DeveloperLead DeveloperYou 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/
January 17, 2017 at 8:04 am #264998morriscountynjok, i’ll give that a try
January 18, 2017 at 8:08 am #265425morriscountynjtried 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?
January 18, 2017 at 7:55 pm #265609TomLead DeveloperLead DeveloperI’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.
January 19, 2017 at 12:51 pm #265883morriscountynjPlaying 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.
January 19, 2017 at 11:29 pm #266033TomLead DeveloperLead DeveloperIf 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.
August 31, 2018 at 8:54 am #665350Andrewis there any update to this? i was to use gse but use the built in nav bar search.
August 31, 2018 at 5:16 pm #665631TomLead DeveloperLead DeveloperI 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.
September 4, 2018 at 12:25 pm #668652Andrewyes, 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><form action=”https://mysite.com/search-results/” id=”cse-search-box2″><input type=”hidden” name=”cx” value=”XXXXXXXXXX1757984194:t_vasmjo-mm”/>
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”20″ aria-label=”Search” placeholder=”Search. . .”/><button type=”submit”>[icon name=”search” class=”” unprefixed_class=”” alt=”search”]</button></form>
<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=’ + 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><form id=”cse-search-box1″ action=”https://mysite.com/search-results/”><input name=”cx” type=”hidden” value=””XXXXXXXXXX1757984194:t_vasmjo-mm”/” />
<input name=”ie” type=”hidden” value=”UTF-8″ />
<input name=”q” size=”98″ type=”text” value=”"<?php” placeholder=”Search. . .” />”/><button type=”submit”>[icon name=”search” class=”” unprefixed_class=””]</button></form>
<style type=’text/css’>
table, th, td {<br />
border: 1px solid #ffffff;<br />
}<br />
</style>
***********end results page code*******************September 4, 2018 at 7:44 pm #668909TomLead DeveloperLead DeveloperYou 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' ) ); } );
September 5, 2018 at 6:40 am #669271Andrewthe 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?
September 5, 2018 at 8:10 am #669430TomLead DeveloperLead DeveloperIt shouldn’t create an extra input – those are
hidden
input types, so they don’t display. Can you show me?September 5, 2018 at 8:17 am #669437September 5, 2018 at 8:26 am #669458TomLead DeveloperLead DeveloperI just edited the code above – can you give it another try?
-
AuthorPosts
- You must be logged in to reply to this topic.