Adding search to SilverStripe

Whilst it’s relatively easy to add a site search function to SilverStripe, quite a bit of tweaking is required to make it perform as it should. Here are some simple instructions.

These days, it’s expected that a website should have some sort of search function. In the case of a database-driven website, such as one run on SilverStripe, this is relatively easy. In fact, the search function comes ‘out of the box’ and just has to be activated. I implemented search on a SilverStripe website recently and decided to document the steps that I undertook to customise it for the benefit of others. Before you commence, make sure that you’re logged-in to the SilverStripe CMS.

1. Activate Search

Open the file at /mysite/_config.php and insert the following line:

FulltextSearchable::enable();

2. Rebuild the database

Go to http://yourdomain.com/dev/build/ to rebuild the database.

3. Add a dedicated search page type and template

The official instructions state that a search form is located in the header of the default theme. But who uses the default theme? Almost no-one, so lets look at making site search work with your theme.

In my case, I wanted a dedicated search page. To do this, I needed to make a search page template. First, I created a file called SearchPage.php and saved it in the /mysite/code/ folder. The code for SearchPage.php follows:

<?php
class SearchPage extends Page {
}
class SearchPage_Controller extends Page_Controller {
}

Next, create another file, called SearchPage.ss and save to /yourtheme/templates/layout/. The absolute minimum code required for this page would be:

<h1>$Title</h1>
$Content
$SearchForm

Be aware that depending on your theme, you may require other elements to be included here. As a general rule-of-thumb, SearchPage.ss should almost be identical to Page.ss except for the inclusion of $SearchForm.

4. Create results page templates

Create another template file in which to display the search results. Call it Page_results.ss and save to /yourtheme/templates/layout/.

The official instructions provide some template code, but I found this not to be to my liking for the following reasons:

1. I wanted to include a “Search Again” button.
2. The navigation at the bottom of the search page was confusing (“Next 1 2 3” as well as “Page 1 of X”)
3. I was not happy with the summaries for each search result.

Therefore, I changed the code to that below (bear in mind that you may need to wrap this in other elements depending on your template, as per Step 3).

<h1>$Title</h1>

    <% if $Query %>
        <p class="searchQuery"><strong>You searched for "{$Query}"</strong></p>
    <% end_if %>

    <% if $Results %>
    <ul id="SearchResults">
        <% loop $Results %>
        <li>
            <h2><a class="searchResultHeader" href="$Link">
                <% if $MenuTitle %>
                $MenuTitle
                <% else %>
                $Title
                <% end_if %>
            </a></h2>
            <p>$Content.Summary()</p>
            <a class="readMoreLink" href="$Link" 
                title="Read more about "{$Title}""
                >Read more about "{$Title}"...</a>
        </li>
        <% end_loop %>
    </ul>
    <% else %>
    <p>Sorry, your search query did not return any results. Please <a href="/search/">try again</a>.</p>
    <% end_if %>

    <% if $Results.MoreThanOnePage %>
    <div id="PageNumbers">Navigate search results: 
        <% if $Results.NotLastPage %>
        <a class="next" href="$Results.NextLink" title="View the next page">Next</a>
        <% end_if %>
        <% if $Results.NotFirstPage %>
        <a class="prev" href="$Results.PrevLink" title="View the previous page">Prev</a>
        <% end_if %>
        <span>
            <% loop $Results.Pages %>
                <% if $CurrentBool %>
                $PageNum
                <% else %>
                <a href="$Link" title="View page number $PageNum">$PageNum</a>
                <% end_if %>
            <% end_loop %>
        </span>
        <p>Page $Results.CurrentPage of $Results.TotalPages</p>
    </div>
    <% end_if %>
	
	<a href="/search/" class="search-more-button">Search Again</a>

Most notably, I replaced the suggested $Content.LimitWordCountXML with $Content.Summary() so that the first paragraph of each page would be displayed in the search results rather than a string of words of defined length. I also found that $Content.LimitWordCountXML would display the words that made up the URL before any other text which was confusing and messy.

The end result should look like this:

If you intend inserting a search form on the HomePage, save Page_results.ss as HomePage_results.ss so that you have two identical files. This ensures that search results that are derived from the home page match those from any other page. (Of course, if you want these to differ, simply alter HomePage_results.ss accordingly.

Using FTP, upload all of the files to the server in their correct locations:

• /mysite/_config.php
• /mysite/code/SearchPage.php
• /yourtheme/templates/layout/SearchPage.ss
• /yourtheme/templates/layout/Page_results.ss
• /yourtheme/templates/layout/HomePage_results.ss

5. Rebuild the database

Go to http://yourdomain/dev/build/ to rebuild the database.

6. Create the search page in the CMS

Log into the SilverStripe CMS and create the search page by clicking on “New” and then creating the page of type “Search”. Whatever name you choose for this is up to you, but I recommend http://yourdomain.com/search/ as that’s most logical.

If you wish to include any instructions above the search, type them in and then publish the page.

7. Adjust styling with CSS

Inevitably, the search page won’t look quite as it should insofar as it fits within your theme. Adjust the CSS file at /yourtheme/templates/css/layout.css as required. Don’t forget that you may need to periodically ?flush=1 whilst working on the styling.

Have Your Say

Δ