Originally posted by melat0nin at plastikwrap.co.uk

I’ve just succeeded in adding Google Site Search to my concrete5 site and I thought I’d share how. This is for sites where you want a search box on every page (for example in the sidebar or header), and the results to display on their own page. Here’s an example:

Google site search works very well, which isn’t really surprising given Google’s core business. Things like internal PDF/DOC/ODT searching and whatnot are helpful too, especially if you’re building a site with a lot of document downloads (as I am).

Here’s what I did:

1. First you need a Google site search account, which you can get here:www.google.com/cse.

When setting up the custom search engine, limit searching to only sites that you select, then add your domain to the text box. You can add more than one if necessary (maybe you’re building a site for a company has multiple product or service domains?)

Choose either the free or Site Search editions. The latter will remove ads for $100 a year, or if you’re building for a non-profit, government or university site you can choose the first one and there will be no ads once you’ve told them as such.

2. Select the ‘Iframe’ option at the top of the page, then design your form and results pages by choosing colours etc. Choosing the Iframe option means the results will be embedded into an existing c5 page. I’ll be using the /search/search-results page, because it is helpfully included in the default installation of c5, but you can use any page you like.

3. Get the code. Once you have designed your form and results on the ‘Look and feel’ page, click the Get Code… button. You will then be presented with three sections. One where you specify the URL of your search results page, one containing the code for your search form and another containing the code which will actually display the search results.

3.1 In the first box (‘Specify search results details’), enter the full URL of your results page – for example “http://www.mysite.com/searc/search-results” (without quotes). If you want your results to appear on a different page in your c5 hierarchy, put that here instead. It can be anything you like.

3.2 The code in the second block represents the search form which will appear on all your pages. You can paste it into your theme’s code directly and it will work fine. Applying CSS styles and layouts will allow you to integrate it properly into your site’s design.

Alternatively, you could go add an HTML block to concrete5′s Scrapbook, into which you’d paste that code. You’d then be able to add the search form wherever you liked on your site within c5′s WYSIWYG interface, clicking ‘Add From Scrapbook’ whenever you go to add a block. You could also use the Defaults button in Page Types in the Admin interface, which would allow you to place this block permanently in the place of your choice for a given page type. It depends how comfortable you feel with editing the HTML code directly, and with giving editors the chance to remove the search form from a given page (which they can do if you have it inserted as a default block, assuming there are no advanced permissions set up).

3.3 Once your form is in place, you then need to edit the page specified above at 3.1. Navigate to that page in c5, then go into edit mode. Add an HTML block to the page, then paste in the code from the ‘Search results code’ box on the Site Search control panel. Once you’ve done that, publish you search results page.

4. You should now be finished! Try searching for something in the form and see if the search results page appears with the correct results, like this:

Good luck!