Strattic Developer Docs

Customizing Search Results, Templates, and Tags

If you’ve worked with custom themes in WordPress, you know that you can typically add a search.php template file to your theme files, and that will produce a custom search results page.

With Strattic, there are a few extra steps you’ll need to do in order to make sure your search results page is customized to your liking.

Search templates page

To start, create a strattic-search.php file and put it in your theme or child theme directory.

It should probably look something like this:

<?php get_header(); ?>

<main id="site-content">

	<div id="strattic-search-results"></div>

</main><!-- #site-content -->

<?php get_footer(); ?>

Depending on the style and setup of your site, your template may vary. This is taken from the twentytwenty theme as an example.

You’ll want the <div id="strattic-search-results"></div> element just inside your main content “wrapper”. This element is what what our JavaScript looks for to start replacing with search results.

And, as far as your PHP files go, that’s really all there is to it.

On to the templates and template tags!

Templates and examples

The search results page pulls in HTML templates with JS. These templates allow for structure, CSS, and JS to interact with search results that are returned from Algolia.

To see these templates, you can go to yoursite.site.strattic.io/wp-admin/admin.php?page=strattic-templates to see the templates. There are five templates we use:

  • Search main template (a single result)
  • Search main template (multiple results)
  • Search results template
  • Search results pagination template
  • Search not found template

There are descriptions for each of these templates on the template page.

While we include some default templates, you can customize the HTML structure of the templates as you like and save them.

For example, you might choose to add the thumbnail and a “Read more…” link to your individual search results. You could do this by modifying the “Search Result Template” to be something like:

<header>
    <h2><a href="{{url}}" rel="bookmark">{{title}}</a></h2>
	<img src="{{{thumbnail_url}}}" alt="{{title}}" />
</header>
<p>{{{excerpt}}}</p>
<a href="{{url}}" >Read more...</a>

Feel free to play around with the structure and content of your search results. You can also add specific HTML id and class tags to your elements as you need them to target for styling (see below).

Search Template Tags

As you can see from the above, there are “template tags” that can be used as placeholders for what you get from the Algolia search results. These tags are Mustache.js-type tags.

There are several template tags to choose from, including:

  • {{search_string}}
  • {{id}}
  • {{url}}
  • {{title}}
  • {{author.name}}
  • {{{thumbnail_url}}}
  • {{{excerpt}}}
  • and more at the top of the Strattic Search Templates page

You can see what’s available to you by exploring the request that comes back from Algolia in the Networking tab of your browser.

For example, if you go to https://developers.strattic.com/search/?q=search you would see a request coming back from Algolia with several “hits”:

Algolia result.

Within each “hit” JSON object, you can see the different properties and values of what is returned:

{
    "id": "111",
    "path": "/doc/customizing-algolia-search-results/",
    "date": "December 23, 2021",
    "time": "5:43 am",
    "modified_date": "April 11, 2022",
    "modified_time": "6:42 am",
    "timestamp": "1640238180",
    "title": "Customizing Algolia Search Results",
    ...
}

If you would like to add to what is returned from Algolia, see our documentation on Customizing Algolia Search Results.

How to style your search results

Since your search results are formatted with HTML markup, you can add any needed custom id or class properties to the HTML elements.

Expanding on the above example:

<header>
    <h2 class="search-result-title"><a href="{{url}}" rel="bookmark">{{title}}</a></h2>
	<img class="search-result-image" src="{{{thumbnail_url}}}" alt="{{title}}" />
</header>
<p class="search-result-excerpt">{{{excerpt}}}</p>
<a href="{{url}}" >Read more...</a>

With the above added classes, you can target these elements with CSS as you normally would.