Google Custom Search using main menu search option

Hi there,

GP has a searchform.php file which you can copy and add to your child theme, then make your changes.

Are you trying to integrate this into our Navigation Search option?

Where is the results page coming from? Is this a custom page you need to create?

Are there some instructions I can look at somewhere maybe?

First to thank you for your time and help. For what it’s worth, if the GeneratePress performs well (so far quite good and fast), I’m planning to get the “pro” version.

Digression:
Child themes are for now beyond my grasp – I understand it’s the proper way of editing themes, but for the past three years, the minimal number of edits I’ve made was executed by copying original files (with the .orig extension added), then editing them and keeping the edited copies along. Keeping the list of the few edited files (and directory structure).

Adding comments of my edits – so when a theme is updated, I can easily re-do the needed edits.

If a child theme is necessary, I’d need to spend some days learning about that – it’s not a “deal breaker”, just something I’d still like to avoid for now, unless it’s much harder doing it without a child theme.

Google Custom Search:
I’ve set up a custom search engine with Google, using instructions that look very much like these (not sure of the particular how-to link I had originally used, wasn’t wise enough to write it down):
https://www.wpbeginner.com/wp-tutorials/how-to-add-google-search-in-a-wordpress-site/

The section “Method 2: Manually Adding Google Search in WordPress” sums up the way I had implemented it, but in the theme I’ve been using, it had worked for the main menu search button as well.

In short, made a page called SearchResults, that had text: “Search results:” and then, in the “text” editing mode of the page (not the WYSIWYG) I copy/pasted the code provided by Google:

<gcse:searchbox-only></gcse:searchbox-only>

Then I copied the searchform code into the searchform.php, so that the code is all there is in the searchform.php:

<script>
(function() {
var cx = ‘partner-pub-SOME_NUMBERS’;
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>

This is the way search works on the English website version (different theme, separate WordPress installation on a subdomain: bike.bikegremlin.com), but it won’t work implemented the same way in the Serbocroatian site version, using GeneratePress (bikegremlin.com). The idea is to get it all to work, then switch to GeneratePress “completely”.

Made it work, if there’s a better solution, please let me know. This is in case there isn’t one and anyone else has a similar problem.

For a full disclosure: I have NO IDEA how WordPress works. The methods for making this work was page-inspection and clicking on GeneratePress site version relevant icons and a different theme that did work icons, comparing, figuring out the names and what is used for what, with a help of a friend who’s also got no idea about WordPress but has some php and css experience. Took us a few hours to make it work, and I’m far from convinced it’s the best, fastest and the most elegant solution.

1) First thing to note
From what I found out, GeneratePress doesn’t use the searchform.php for main menu search button searches (final test of this was completely removing the searchform.php, making sure any page caching is avoided and then seeing that the function still worked perfectly).

2) Finding where the search is “defined”.
Turns out the main menu search is set at this directory (within the themes directory, of course):
generatepress/inc/structure/navigation.php

3) Editing the navigation.php

if ( ! function_exists( ‘generate_navigation_search’ ) ) {
add_action( ‘generate_inside_navigation’, ‘generate_navigation_search’ );
/**
* Add the search bar to the navigation.
*
* @since 1.1.4
*/
function generate_navigation_search() {
$generate_settings = wp_parse_args(
get_option( ‘generate_settings’, array() ),
generate_get_defaults()
);

if ( ‘enable’ !== $generate_settings[‘nav_search’] ) {
return;
}

// BEGINNING OF CUSTOM SEARCH CHANGES
// SNIPPED PART
/*echo apply_filters( ‘generate_navigation_search_output’, sprintf( // WPCS: XSS ok, sanitization ok.
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_search_query() ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
));
*/
// THE END OF SNIPPED PART – DIDN’T DELETE IT, JUST TURNED IT INTO A COMMENT, TO BE MORE CLEAR
// CUSTOM SEARCH PART ADDITION
// “MOJ” MEANS MINE IN SERBIAN, HENCE “mojs”

$mojs=” <script>
(function() {
// BEGGINING OF COPY-PASTED GOOGLE PROVIDED CODE
var cx = ‘partner-pub-MY_GOOGLE_NUMBER:MORE_GOOGLE_NUMBERS’;
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>
<gcse:searchbox-only></gcse:searchbox-only>”;
// END OF COPY-PASTED GOOGLE PROVIDED CODE

echo apply_filters( ‘generate_navigation_search_output’, sprintf( // WPCS: XSS ok, sanitization ok.
‘<form method=”get” class=”search-form navigation-search” action=”%1$s” >
<input type=”search” style=”display:none” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
%4$s
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_search_query() ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ ),
$mojs
));

// THE END OF CUSTOM SEARCH ADDITION

}
}

4) Making it all look not too bad on desktops and mobiles:
Some Additional CSS added for this purpose. Without the padding the Google search button would overlap with the hteme’s button for closing the search. This was as god as I could make it.
Would have preffered to have the Google searc button always below, but without moving it a bit to the right, it looks bad/overlaps on smaller screens for some reason. Will play with it a bit more.

#___gcse_0{
margin-top:60px;
background-color: #222;
}

.gsc-search-button{
/*padding-left:0px;*/
/*height:60px;*/
/*width:60px;*/
padding-right:60px;
}
.gsc-input{
/*padding-right:0px !important ;*/
}

5) Potential problems:
If google changes their code, this implementation won’t work. So if gsc-search-button (Google Search Custom? ) becomes some other name, the solution won’t work.

• This reply was modified 6 years, 1 month ago by Relja.

Hi there,

Glad you got it working!

Instead of editing that core file, you can do this:

add_filter( 'generate_navigation_search_output', function() {
    $mojs = 'your Google provided code here';

    return sprintf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" style="display:none" class="search-field" value="%2$s" name="s" title="%3$s" />
            %4$s
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        $mojs
    );
} );

That can be added using one of these methods: https://docs.generatepress.com/article/adding-php/

Thank you very much.
Made a mental note – now in writing ?? to add “excellent support” when I do the theme reveiw.

Thank you! Let me know if you need anything else ??

Just to give feedback and in case anyone else finds it useful:

Your code works well. I did eventually test and implement the child-theme route. It is more elegant – both for custom CSS, for this function, along with some other functions I had previously implemented editing header.php etc.

My first obstacle, what code to include in the child’s function.php was solved by GeneratePress offering already finished GeneratePress child theme (template).

That solved the “should I include style.css, or rtl.css, or both…” dilema.

Took some trial and error, googling – but child theme is worth the bother, thanks for pointing in that direction.

I can also say that “preliminary” test results (just one week for now) show GeneratePress to give about 1 second faster page load times on average (3 compared to 4, on a very slow, shared hosting server) – same site, similar number of visits. Will write a “full review” of the theme (+ stars) after a few more weeks of testing.

Thanks again – great support, and a pretty good them you’ve made. ??

Thanks so much! That’s great to hear ??

Really appreciate the feedback!