Integrate Google Search With Joomla And WordPress - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Websites should offer the best possible user experience for visitors. In this case, website should allow visitors to find what they're looking for without frustrations. The easiest way to frustrate visitor who is using site search is not to serve the relevant results or to serve relevant results lower in the search results page. Visitors will need to browse the long list of irrelevant results and try to find relevant results themselves. It's actually OK to show as much results as possible, but the most relevant results must be on top!

This is not easy because computers are not human beings and they can't guess what visitor is looking for just like that. In example, if somebody is trying to find template for Kindergarten on our site, it would be easy because our site contains only one page that contains the keyword "kindergarten". But, if somebody's trying to find how to change template on existing Joomla site populated with content, that wouldn't be so easy. No matter what keyword or keywords s/he enters, the list of results will be long because so many pages are using words like "joomla", "existing", "site", and so on. This is where artifical intelligence starts and this is where it's really hard to guess what the visitor is really searching for.

Having in-site search is recommended for all web masters who are trying to increase user experience of their websites. However, both Joomla and WordPress don't have so strong search algorithms. And it's not case just with these CMS platforms... How many times you failed trying to find a great App from Apple Store using their search system with commonly used keywords? There are many other examples.

The company that has the strongest top-secret search algorithm is, you guess, Google! This search algorithm converted a small company into the global scale giant. It sounds weird, but Google will search your website better that yourself, or than CMS you are using. It will (almost) always put the most relevant search results on the top of the search page. Amazingly, Google (almost) always can "guess" what your visitors are searching for. Therefore, using Google for searching in-site is the best possible way to get relevant search results.

Joomla's and WordPress' core search algorithms will never beat Google in relevance of search results. However, we can integrate Google's search engine into our Joomla or WordPress sites and use Google's search algorithm rather than using our CMS's search component. However, it has price. Google will show search results that leads only to your site's pages, but beside that, it will also show ads that could lead to other websites. If you have AdSense account, you can gain some money when somebody clicks these links. But you could also lose potential customers if you are running an e-commerce site! The ads can't be disabled! Google allows disabling of these ads only for non-profit organizations. However, the ads are not always between search results mostly because some keywords are not interesting for advertisers.

Create Google Custom Search For Your Site

The first step is to visit Google Custom Search and create a new search engine. You can add your entire site by entering "*.yoursite.com". After that, you would see option to get the code, as well as new link to your site's search engine the engine's control panel where you can change settings. Click "Get The Code" button and you will get a code snippet. You can integrate this code, but it will show the search form and the results in the same place, actually in the same DIV container. Therefore, if you publish this into a Joomla module position or a WordPress widget position, you'll have problems with layout.

google search create new search engine
google search create new search engine done

Therefore, we suggest you to go to Edit Search Engine > Look and Feel in order to tweak your search engine a little bit. On this page, there are several options for your search engine's layout. One is very interesting for CMS - Overlay. This option allows you to publish the search form anywhere (including module and widget positions), but to show search results in pop-up overlay window, which is responsive by the way. So, the search form (search field and button) will go anywhere you like, but when someone type keyword and click Search button, the results will be shown in overlay pane. You just need to select Overlay and click Save and Get Code button.

tweak google in-site search engine
get the code for in-site search

Integrate Google Search With Joomla

First, you should disable HTML filtering is Joomla. If you don't do that, the code snippet from Google could be filtered out by Joomla's editor. Also, it's recommended to disable WYSIWYG editor from Global Configuration of Joomla.

Now, go to Extensions > Module Manager and click New. Select "Custom HTML" for module type to create new HTML module. Select appropriate module position for the search form according to the module positions chart of your Joomla template. You can decide yourself will you publish the module name or not and what pages the search module will be published on (it's recommended to publish it on all pages). Finally, paste the code from Google that you got in the previous step. Save the module and you are done! It's also possible to paste the code inside article's content. This will publish the search form in the article's body.

Integrate Google Search With WordPress

If you paste the code that you got from Google into the post's or the page's body, the search form will be published as a part of your post or page. You should use Text tab (not Visual tab) of your editor when you paste code for search. However, it's probably not what you needed. In most occasions, you need to publish the search form as an integral part of your WordPress site which is present on all pages. In this case, you can use widgets. Go to Appearance > Widgets and select the widget position where you will put the search form, according to widget positions chart of your theme. Open this widget position and drop the Text widget (from the tab of "Available Widgets") in it. Now, open the Text widget and paste the code from Google in it. You can enter Title, but this is optional.

Styling The Search Form And Testing

It's possible to style the search form. You can use Google Chrome Inspector or Firebug to inspect the search form that appears on your site now. You will see that all form elements contain classes. You can add your own styling for these classes in your template's CSS file. It's possible to define elements size, colors, font, etc.

Let's test this! With Google Search on our site, when someone submit "change existing", the page that explains how to change template of existing site appears on the top of search results. Very smart! However, when we enter the same keywords in Joomla Search component, the most relevant page will not be even between the first 20. Very odd! Luckily, integration of Google search is not though, as you could see.

testing google in-site search

Links, Partners and Social Media