Setting up Google Custom Search

If you intend to produce a lot of content for your site, or are expecting your visitors to have specific questions that they need to find the answers to, then including a search option can greatly increase the site experience. To make setting up a search feature for your site easy, Publii includes support for Google Custom Search, which utilizes the power of Google's search engine but limits the search to your site content only.

To get search working correctly on your site we will need to configure the search in two areas; first, creating the custom search on Google, and second, implementing the created search in the Publii interface. Follow the step-by-step instructions and you'll be ready to go in no time!

Creating your custom search in Google

  1. To begin, head over to the Google Custom Search Homepage and click on the blue Create a custom search engine button.
  2. On the next screen, enter your website's URL into the Sites to search field; this will ensure your entire site is searched. You may also restrict the search to particular areas of your site if you wish, but generally you'll want to have the whole site available for searches.

    Google Custom Search

  3. A name is automatically given to your search based on the URL, but you can modify the Name of the search engine field if you wish; this is only for your benefit as the name is only shown in the Google Custom Search backend. Once named, click the Create button to create the search.
  4. The search is now created, but we have to make a few changes and grab some important information for later when we set-up the search in Publii. Click on the Get code button to be taken to the Edit search engine section.
  5. We don't need to use this code because Publii will take care of it, but we do need a Search engine ID so that Publii knows where to find your custom search. In the left sidebar, click on the Setup option to open a list of basic options.
  6. Now click on the Search engine ID button in the Details section of the options; a pop-up box will open with your search engine's ID inside; save this ID for later.

    Google search engine Id

  7. Next, click on the Look and feel option in the left sidebar. Here you can set how the searches look on your site; click on the Results only layout, then click the Save button. This ensures that the search bar on your site utilizes the Publii layout without additional Google branding.

    Google custom search results only

  8. Once the changes are saved, click on the Setup option in the left-sidebar to go back to the options page, then click on the Get code button to the right of the Search engine ID button we clicked earlier.
  9. We're back on the code screen, but we still don't need this code. Instead, click on the Search Results Details option and check that you have the letter q in the Specify search results details field; this tells the search engine to use the text entered by the user to search the site.

    Note this letter down as we'll need to match the option in Publii. Different parameters can be added here, but this is only really required for advanced users who need to fine-tune their search controls.

The Google side of configuration is now ready to go, so now we just need to add the information we stored into Publii and the search will be all set!

Configuring your search in Publii

The hard part is done, and all we need to do is setup the search in Publii, which takes a matter of moments. Just follow these steps:

  1. Open your site in Publii and click on the Theme option in the left sidebar to open the Theme Settings screen. Then, in the Custom Settings section, click on the Search tab.

    Publii Google Custom Search Settings

  2. In this tab are three options; make sure the Search option is enabled, then add the Search engine ID we saved earlier to the Google Custom Search ID field.
  3. Lastly, make sure that the Search parameter field matches the parameters you set during the search configuration; the default is the letter q, so add this to the field.
  4. We're all done, so click the Save settings button and your search is ready to use; visitors will now be able to utilize the search bar to explore your site content.