Site-Wide Search Now Available
Posted by Hans de Ruiter
This website now features a search function which can be found in the left column. I have opted to use Google custom search since I have found that Google's search engine often is better at locating information than a website's own search engine. Google's search technology is simply far superior to many of the other search engines provided with various Content Management Systems (CMS). Adding search functionality was relatively easy, although it did require that I create a custom page type for the search results page. The reason for using a custom page type is because the HTML insert functionality in the Silverstripe CMS won't embed the Google search results page code properly; it performs some sort of operation after closing the HTML edit window that destroys it.
Creating the custom search results page can be done as follows:
- Create the file mysite/code/SearchResultsPage.php containing the following:
<?php
class SearchResultsPage extends SiteTree {
static $db = array(
);
static $has_one = array(
);
}
class SearchResultsPage_Controller extends ContentController {
function init() {
parent::init();
Requirements::themedCSS("layout");
Requirements::themedCSS("typography");
Requirements::themedCSS("form");
}
}
?>
Create a new style file called themes/<mytheme>/templates/Layout/SearchResultsPage.ss (replace <mytheme> with the directory containing the theme that your site is using)
SearchResultsPage.ss should contain a modified version of your site template that does not contain any other Google Adsense advertising (assuming that the code was obtained from the Google Adsense for Search service) since this is against the terms of service. It should also contain the Google custom search results code, e.g.:
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<% base_tag %>
$MetaTags
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript"
src="jsparty/htmlparser.js"></script>
<script type="text/javascript"
src="jsparty/xhtml-document-write.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="top-bg"></div>
<div id="header">
<h1 id="logo-text">
<
a href="index.html" title="">Logo<span>Text</span></a></h1>
<p id="slogan">Slogan & here</p>
<div id="header-links">
<p>
<img src="themes/custom/images/header-small.jpg" width="398"
height="60" alt="header photo small"/>
</p>
</div>
</div>
<div id="nav">
<% include Navigation %>
</div>
<div id="content-wrap">
<div id="search">
<div class="typography">
<a name="TemplateInfo"></a>
<h2>$Title</h2>
%% INSERT GOOGLE CUSTOM SEARCH RESULTS CODE HERE %%
$PageComments
$Form
</div>
</div>
</div>
<div id="footer-wrap">
<div id="footer-bottom">
<% include Footer %>
</div>
<!-- footer ends-->
</div>
<!-- wrap ends here -->
</div>
</body>
</html>
Assuming that the search entry form should appear on every page, the search form code will need to be inserted into one of the main template files. I put it into themes/<mytheme>/templates/Includes/Navigation2.ss,
- Upload all the new and modified files to the server
- Flush the cache, i.e., visit http://<mysite>/?flush=1 (replace <mysite> with the URL of your website),
- Rebuild the database by visiting http://<mysite>/db/build (replace <mysite> with the URL of your website), and
- Now log into the CMS, and create the search results page, ensuring that its URL matches the one provided to Google Adsense for Search as the search results URL.
After following these instructions, the search function should be fully operational. If you do not mind showing the results on Google's own website, then these steps are unnecessary. However, having the search results appear within ones own site looks more professional, so it is well worth the effort.
Blog » Site-Wide Search Now Available
Post your comment
Comments
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments
Blog » Site-Wide Search Now Available