Strattic Developers by Elementor

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

Strattic Search works via a dynamically generated WordPress page in your site which injects it’s content via a tag with ID of #strattic-search-results. This uses your default WordPress page template, but if you wish to use an entirely separate template for your Strattic Search page, you can do this by creating a strattic-search.php file and putting it in your theme or child theme directory. It could 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, where would 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 main PHP template file goes, that’s really all there is to it. On to the Strattic Search 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}}}
  • {{search_results_count}}
  • 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.

Listing taxonomy terms

Taxonomy terms are often used in search results, for example when showing all of the categories a particular search result is in. To do this, you can use the {{terms_category}} tag, where “category” is the name of the taxonomy you wish to query. In the following example, adding .length to the tag allows for a basic conditional check to avoid loading an empty <ul> tag. Then # before the tag label starts a loop and / before the tag label ends the loop. Within the loop you can access any of the sub-properties of the {{terms_category}} tag (these can be seen when directly viewing the raw Algolia request on your website).
{{#terms_category.length}}
<ul>
	{{#terms_category}}
	<li>
		<a href="{{home_url}}/category/{{slug}}/">
			{{{name}}}
		</a>
	</li>
	{{/terms_category}}
</ul>
{{/terms_category.length}}

Access a single taxonomy term

Sometimes you may wish to access only a single taxonomy term rather than looping through all of them. This can be achieved by adding dot followed by a number, followed by another dot, followed by whatever property you wish to access from it. The following example lists the first category term slug within a class name.
<article class="category-{{terms_category.0.slug}}">
	<h1>{{title}}</h1>
	<p>{{excerpt}}</p>
</article>

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.

Limiting the number of posts

Sometimes you may wish to set the number of posts to display per page. You can do this by setting the value of the JS object of strattic_algolia.hitsPerPage as in the code example below.
/**
 * Only show 10 posts per search page.
 */
add_action(
	'wp_head',
	function() {
		echo '
<script>
	var strattic_algolia = [];
	strattic_algolia.hitsPerPage = 10;
</script>
';

	}
);

Detecting presence of the Strattic search page

When customising your Strattic search page, you may need an equivalent of the is_search() function but for the Strattic search page. For this, you can use the is_strattic_search() function provided below. It works in the same way as the native is_search() WordPress function, but for the Strattic search page.
/**
 * Is this a Strattic search page?
 * Doesn't use Strattic_Search_Settings() because it is not always loaded yet.
 *
 * @return bool True if on a search page.
 */
function is_strattic_search() {
	$slug = strattic()->search->settings->get_option( 'search-page-slug' );

	if (
		'/' . $slug . '/' === substr( $_SERVER['REQUEST_URI'], 0, strlen( $slug ) + 2 )
		||
		'/' . $slug === substr( $_SERVER['REQUEST_URI'], 0, strlen( $slug ) + 1 )
	) {
		return true;
	}

	return false;
}

No search page present?

Sometimes you may only require specific post-types to be displayed in your search results. You can achieve this via the following code, which modifies the post-types sent to Algolia for indexing.

Body classes

Sometimes, the styling for a search page comes from CSS classes added to the body class itself. You can copy the CSS classes from the WordPress search page over to the new Strattic search page instead. This is a common problem on sites running the Elementor plugin.
/**
 * Change body clases on the search page.
 */
add_filter(
	'body_class',
	function( $classes ) {
		if ( is_strattic_search() ) {
			$classes = explode( ' ', 'search search-results elementor-template-full-width elementor-kit-5805 elementor-page-6040' );
		}

		return $classes;
	}
);

Strattic Search with Elementor

Unfortunately, we have found that many (but not all) Elementor sites apply styling to their WordPress search pages which can not be easily copied over to the Strattic Search page. This results in some very odd behaviour, with our Strattic search pages looking very strange by default, often without things like headers in place and most of their styling being missing. In order to fix these issues, you may need to take drastic steps such as manually injecting hard coded content into the page via output buffering.

Template specific stylesheets

The search results pages for some sites include huge amounts of page or template specific CSS. When trying to replicate the styling of the WordPress search page into a static page, it may be necessary to copy those custom stylesheets over to your new page. Note that if the stylesheets were added via a plugin such as Elementor, then changes to that plugin in future may break the stylesheets added to your Strattic search page.