Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

Although FlatPress includes a search feature, I found it to be quite limited, so I had a look at adding Google search to a theme in FlatPress and found that to be quite easy to do. There is some tinkering with the FlatPress code itself, however the end result is a fully working search for FlatPress that is backed by the power of Google.

This article will not go into the details of how to create the Custom Search Engine (CSE). Google has a good tutorial on that already. Check it out here. The prerequisite for this post is that you have created and configured the CSE as a results only page.

The first thing to do is create a template file that will display the results page. Below is a sample without any styling. The file name is search.tpl, this is placed along with the rest of the .tpl files in the theme directory. Add the CSE code between the comments. This has to be included between the literal tags since it contains JavaScript.
 $ Template file: search.tpl
{include file=header.tpl}
<div>Search Results</div>
<!-- Start CSE code -->
<!-- End CSS code -->
{include file=footer.tpl}

After the template page is created, the index.php file from FlatPress needs to be modified. Below are the modified lines from the file, with the original include call and return statement commented out. The return statement is changed to set the module variable to the name of the template file. This has the effect of rendering the search results page whenever the 'q' URL parameter is specified. Since CSE uses 'q' as the default parameter, this works right out of the box.
 $ FlatPress file: index.php
} elseif (!empty($_GET['q'])) {
// include('search.php');
return $module = 'search.tpl'; //search_main();
} else {

Now to finish it all off is the search form itself. This can be added anywhere in the existing theme. In my case, I added it to the header.tpl file so that it is rendered as a part of the menu. The code below populates the search form with the previous search parameters and sets the submit action to the FlatPress Blog URL so there is no hard-coding anywhere. As a nice feature, some JavaScript is used to submit the form when the user presses the Enter key.
 $ Search Form
<form method="get" action="{$flatpress.www}">
<input type="text" name="q"
value="{php}echo $_GET['q']{/php}"
onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"
placeholder="Search" autofocus/>
<input name="search" type="submit" value="Search" />

That's all there is to it! This small change removes the need to use the default search plugin and gives much better results too. The only downside is that the results take a second or two to render as they are loaded on the client side via JavaScript, so sometimes the search results page looks blank immediately after it is loaded.


A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
Hi! You can search my blog here ⤵
NOTE: (2022) This Blog is no longer maintained and I will not be answering any emails or comments.

I am now focusing on Atari Gamer.