How to replace “Search Form WP” with “Google Search”

We would like to replace the “Search Form WP” module with “Google Search”

Hi @musicletter if you want to add Google Search to your site I would suggest using a plugin. You can go over the list below and see which one has the options you prefer:

https://www.ads-software.com/plugins/search/google+search/

Dear @thelmachido

we would like a practical (easy) one due to our scarce technological knowledge and not very invasive, in order not to weigh down the site.

We’ll take a look. We look forward to other solutions, advice …

Thank you
Staff

Hi @musicletter sounds great, feel free to check a few and see which one is suitable for you. Let me know how that goes.

In the meantime, I will mark this issue as resolved.

Hello. We tried to install the most used plugin (WP Google Search), even if not updated, but we couldn’t configure it as the main search engine on our site’s home page [ redundant link removed ]. Works olny as an add-on widget.

To replace the search form with a custom one, you’d need to open twentytwenty/template-parts/modal-search.php (better yet, copy this file to the same location in a child theme). Then, locate these lines of code (lines 17-23) in the file:

<?php
get_search_form(
	array(
		'aria_label' => __( 'Search for:', 'twentytwenty' ),
	)
);
?>

Delete that code and replace with your own. You may need to add custom CSS to handle the styling.

Ideally, you’d install a search plugin for this that automatically overwrites the search form.

HI.

What you told me for the “modal-search.php” file, I did previously with the “searchform.php” file. With this configuration the Google search engine works but it is not formatted correctly.

If instead I make the same change on the file you indicated, it doesn’t work!

What am I supposed to do?

Thank you

Replacing the code in searchform.php would be even better. As I mentioned in my earlier reply, though, you’ll probably need some custom CSS to get the style right.

I or someone else might be able to help with that if you’ll share the new search form code.

Ciao @greenshady

So, as we said, we modified the original Twenty Twenty template searchform.php file by replacing the entire content with our Google code:

<script async src="https://cse.google.com/cse.js?cx=5d81e0421a23eb25a"></script><div class="gcse-searchbox-only"></div>

After that, if you go to the [ redundant link removed ], a functioning but not well-formatted box appears (the search button cannot be read, the box iis too small…), while it should be like this: see this link.

https://cse.google.com/cse?cx=5d81e0421a23eb25a#gsc.tab=0

We look forward to your advice.
Thank you

Thanks for sharing the code. With that, I got something working. Here’s some custom CSS that you can put in your theme’s style.css that should make it usable:

div[id*="___gcse"] {
	width: 100%;
	margin: 2rem 0;
}

.gsc-search-box tr,
.gsc-search-box td,
.gsc-search-box table {
	border: none !important;
}

.gsc-search-box table {
	margin: 0;
}

td.gsc-search-button {
	width: revert;
	padding: 0;
}

Of course, you might want to make other CSS adjustments to get exactly the design you’re after.

Thank you, @greenshady – Can you tell us exactly where we need to put the code, where in the “style css” file?

We figured out where to put it, it works! Now we need to fix it. We would like it to be bigger, the full width of the screen, when one clicks “search”. A thousand thanks!

Furthermore, if there was an easy way, we would ultimately also want to replace these https://www.musicletter.it/home/?s= results with those of “google”

Hey there @musicletter – glad you figured out where to put the CSS that Justin provided!

Please keep in mind that a child theme is the recommended way to make major changes to a theme, as Justin mentioned earlier. If you went ahead and modified PHP and CSS files in the theme directly, all your changes will be overwritten and lost every time the theme is updated, so please be mindful if that’s what you did, so you don’t get any unexpected surprises.

We would like it to be bigger, the full width of the screen, when one clicks “search”.

Since the Google search box is third-party code and not part of this theme, detailed customization help isn’t something we’d normally provide here in the Twenty Twenty forum. To help point you in the right direction beyond what Justin already provided as a courtesy, something like this might help stretch out the search box, but you’ll want to be sure to test that on different sizes of devices to make sure it scales well at different sizes.

.gsib_a {
  width: 2000px;
}

Furthermore, if there was an easy way, we would ultimately also want to replace these https://www.musicletter.it/home/?s= results with those of “google”

This doesn’t sound like something that would be done in the theme. You might look into using a redirection plugin like this one with a regular expression to dynamically swap out the portion of the URL that you want.

Ciao @zoonini, first of all thank you for your kind support.

One question, should your code .gsib_a { width: 2000px; } be placed in the same place where I entered @greenshady ‘s code?

• This reply was modified 1 year, 4 months ago by musicletter.

Well, you didn’t mention where you added the previous code. ??

The two recommended places to add custom CSS in this theme are either:

• If using a child theme, in your child theme’s style.css file, or
• Appearance > Customize > Additional CSS

Both methods will preserve your custom CSS even when Twenty Twenty releases a new version and you update.