Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Some boilerplate to create an instantsearch.js search experience in your WordPress theme. This works in combination with the Algolia Search plugin for WordPress.
#ais-wrapper {
display: flex;
}
#ais-main {
padding: 1rem;
width: 100%;
}
#ais-facets {
width: 40%;
padding: 5%;
padding: 1rem;
}
.ais-facets {
margin-bottom: 2rem;
}
.ais-clearfix {
clear: both;
}
#algolia-search-box {
position: relative;
margin-bottom: 2rem;
}
.ais-search-box--input {
/* search input */
}
.ais-search-box--powered-by {
font-size: .8em;
text-align: right;
margin-top: 2px;
}
.ais-search-box--powered-by-link {
display: inline-block;
width: 45px;
height: 16px;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
background-image: url("data:image/png;base64,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");
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.ais-stats {
position: absolute;
bottom: 0;
font-size: .8rem;
}
.ais-stats--header {
/* widget header */
}
.ais-stats--body {
/* widget body */
}
.ais-stats--time {
/* processing time */
}
.ais-stats--footer {
/* widget footer */
}
.ais-sort-by-selector--item {
/* selector item */
}
.ais-hits__empty {
/* empty container */
}
.ais-hits--item {
/* hit item */
margin-bottom: 2rem;
}
.ais-hits--item h2 {
margin-bottom: .75rem;
}
.ais-hits--categories {
margin-bottom: 1rem;
}
.ais-hits--category {
background: #F2F2F2;
padding: 0.5rem 1rem;
border-radius: 3px;
display: inline-block;
margin-right: .5rem;
margin-bottom: .5rem;
}
.ais-hits--item em, .ais-hits--item a em {
font-style: normal;
background: #21A4D7;
color: #FFFFFF;
}
.ais-hits--thumbnail {
float: left;
margin-right: 2rem;
}
.ais-hits--content {
overflow: hidden;
}
.ais-hits--thumbnail img {
border-radius: 3px;
}
.ais-pagination {
margin: 0;
}
.ais-pagination--item {
/* pagination item */
display: inline-block;
padding: 3px;
}
.ais-pagination--item__disabled {
/* disabled pagination item */
display: none;
}
.ais-pagination--item__active {
/* active pagination item */
}
.ais-pagination--item__first {
/* first pagination item */
}
.ais-pagination--item__previous {
/* previous pagination item */
}
.ais-pagination--item__page {
/* page pagination item */
}
.ais-pagination--item__next {
/* next pagination item */
}
.ais-pagination--item__last {
/* last pagination item */
}
.ais-pagination--link {
/* pagination link */
}
.ais-refinement-list--header {
/* widget header */
}
.ais-refinement-list--body {
/* wudget footer */
}
.ais-refinement-list--list {
/* item list */
}
.ais-refinement-list--item {
/* list item */
}
.ais-refinement-list--item__active {
/* active list item */
}
.ais-refinement-list--label {
/* item label */
}
.ais-refinement-list--checkbox {
/* item checkbox */
}
.ais-refinement-list--count {
/* item count */
display: none;
}
.ais-refinement-list--footer {
/* widget footer */
}
/* Sub block for the show more of the refinement list */
.ais-show-more__active {
/* Show more button is activated */
}
.ais-show-more__inactive {
/* Show more button is deactivated */
}
.ais-menu--header {
/* widget header */
}
.ais-menu--body {
/* widget body */
}
.ais-menu--list {
/* item list */
}
.ais-menu--item {
/* list item */
}
.ais-menu--item__active {
/* active list item */
font-weight: bold;
}
.ais-menu--link {
/* item link */
}
.ais-menu--count {
/* item count */
display: none;
}
.ais-menu--footer {
/* widget footer */
}
.ais-toggle--header {
/* widget header */
}
.ais-toggle--body {
/* wudget body */
}
.ais-toggle--list {
/* item list */
}
.ais-toggle--item {
/* list item */
}
.ais-toggle--item__active {
/* active list item */
}
.ais-toggle--label {
/* item label */
}
.ais-toggle--checkbox {
/* item checkbox */
}
.ais-toggle--count {
/* item count */
}
.ais-toggle--footer {
/* widget footer */
}
.ais-hierarchical-menu--header {
/* widget header */
}
.ais-hierarchical-menu--body {
/* widget body */
}
.ais-hierarchical-menu--list {
/* item list */
}
.ais-hierarchical-menu--list__lvl0 {
/* item list level 0 */
}
.ais-hierarchical-menu--list__lvl1 {
/* item list level 1 */
margin-left: 10px;
}
.ais-hierarchical-menu--list__lvl2 {
/* item list level 0 */
margin-left: 10px;
}
.ais-hierarchical-menu--item {
/* list item */
}
.ais-hierarchical-menu--item__active {
/* active list item */
}
.ais-hierarchical-menu--link {
/* item link */
}
.ais-hierarchical-menu--count {
/* item count */
}
.ais-hierarchical-menu--footer {
/* widget footer */
}
.ais-range-slider--target {
position: relative;
direction: ltr;
background: #F3F4F7;
height: 6px;
margin-top: 2em;
margin-bottom: 2em;
}
.ais-range-slider--base {
height: 100%;
position: relative;
z-index: 1;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
border-left: 2px solid #DDD;
border-right: 2px solid #DDD;
}
.ais-range-slider--origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.ais-range-slider--connect {
background: #46AEDA;
}
.ais-range-slider--background {
background: #F3F4F7;
}
.ais-range-slider--handle {
width: 20px;
height: 20px;
position: relative;
z-index: 1;
background: #FFFFFF;
border: 1px solid #46AEDA;
border-radius: 50%;
cursor: pointer;
}
.ais-range-slider--handle-lower {
left: -10px;
bottom: 7px;
}
.ais-range-slider--handle-upper {
right: 10px;
bottom: 7px;
}
.ais-range-slider--tooltip {
position: absolute;
background: #FFFFFF;
top: -22px;
font-size: .8em;
}
.ais-range-slider--pips {
box-sizing: border-box;
position: absolute;
height: 3em;
top: 100%;
left: 0;
width: 100%;
}
.ais-range-slider--value {
width: 40px;
position: absolute;
text-align: center;
margin-left: -20px;
padding-top: 15px;
font-size: .8em;
}
.ais-range-slider--value-sub {
font-size: .8em;
padding-top: 15px;
}
.ais-range-slider--marker {
position: absolute;
background: #DDD;
margin-left: -1px;
width: 1px;
height: 5px;
}
.ais-range-slider--marker-sub {
background: #DDD;
width: 2px;
margin-left: -2px;
height: 13px;
}
.ais-range-slider--marker-large {
background: #DDD;
width: 2px;
margin-left: -2px;
height: 12px;
}
.ais-range-slider--marker-large:first-child {
margin-left: 0;
}
.ais-star-rating--header {
/* widget header */
}
.ais-star-rating--body {
/* wudget footer */
}
.ais-star-rating--list {
/* item list */
}
.ais-star-rating--item {
/* list item */
vertical-align: middle;
}
.ais-star-rating--item__active {
/* active list item */
font-weight: bold;
}
.ais-star-rating--star {
/* item star */
display: inline-block;
width: 1em;
height: 1em;
}
.ais-star-rating--star:before {
content: '\2605';
color: #FBAE00;
}
.ais-star-rating--star__empty {
/* empty star */
display: inline-block;
width: 1em;
height: 1em;
}
.ais-star-rating--star__empty:before {
content: '\2606';
color: #FBAE00;
}
.ais-star-rating--link {
/* item link */
}
.ais-star-rating--link__disabled {
/* disabled list item */
}
.ais-star-rating--link__disabled .ais-star-rating--star:before {
color: #C9C9C9;
}
.ais-star-rating--link__disabled .ais-star-rating--star__empty:before {
color: #C9C9C9;
}
.ais-star-rating--count {
/* item count */
}
.ais-star-rating--footer {
/* widget footer */
}
.ais-price-ranges--header {
/* widget header */
}
.ais-price-ranges--body {
/* widget body */
}
.ais-price-ranges--footer {
/* widget footer */
}
.ais-price-ranges--list {
/* item list */
}
.ais-price-ranges--item {
/* list item */
}
.ais-price-ranges--item__active {
/* active list item */
}
.ais-price-ranges--link {
/* item link */
}
.ais-price-ranges--form {
/* custom form */
}
.ais-price-ranges--label {
/* custom form label */
}
.ais-price-ranges--currency {
/* currency */
}
.ais-price-ranges--input {
/* custom form input */
}
.ais-price-ranges--separator {
/* custom form separator */
}
.ais-price-ranges--button {
/* custom form button */
}
.ais-clear-all--header {
/* widget header */
}
.ais-clear-all--body {
/* widget body */
}
.ais-clear-all--link {
/* widget link */
}
.ais-clear-all--footer {
/* widget footer */
}
.ais-current-refined-values--header {
/* widget header */
}
.ais-current-refined-values--body {
/* widget body */
}
.ais-current-refined-values--clear-all {
/* widget clearAll link */
}
.ais-current-refined-values--list {
/* widget list */
}
.ais-current-refined-values--item {
/* widget item */
}
.ais-current-refined-values--link {
/* widget link */
}
.ais-current-refined-values--count {
/* widget count */
}
.ais-current-refined-values--footer {
/* widget footer */
}
.ais-root__collapsible .ais-header {
cursor: pointer;
}
.ais-root__collapsed .ais-body, .ais-root__collapsed .ais-footer {
display: none;
}
jQuery(function() {
if(jQuery('#algolia-search-box').length > 0) {
/* global instantsearch */
var search = instantsearch({
appId: algolia.application_id,
apiKey: algolia.search_api_key,
indexName: algolia.indices.searchable_posts.name,
urlSync: {
mapping: {'q': 's'},
trackedParameters: ['query']
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#algolia-search-box',
placeholder: 'Rechercher un article...',
wrapInput: false,
poweredBy: true
})
);
search.addWidget(
instantsearch.widgets.stats({
container: '#algolia-stats'
})
);
var hitTemplate = jQuery("#tmpl-hit").html();
var noResultsTemplate =
'Aucun post ne correspond à la recherche "<strong>{{query}}</strong>".';
search.addWidget(
instantsearch.widgets.hits({
container: '#algolia-hits',
hitsPerPage: 10,
templates: {
empty: noResultsTemplate,
item: hitTemplate
}
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#algolia-pagination'
})
);
search.addWidget(
instantsearch.widgets.menu({
container: '#facet-post-types',
attributeName: 'post_type_label',
sortBy: ['isRefined', 'count:desc', 'name:asc'],
limit: 10,
templates: {
header: '<h3 class="widgettitle">Type</h3>'
},
})
);
search.addWidget(
instantsearch.widgets.menu({
container: '#facet-categories',
attributeName: 'taxonomy_category',
sortBy: ['isRefined', 'count:desc', 'name:asc'],
limit: 10,
templates: {
header: '<h3 class="widgettitle">Catégories</h3>'
},
})
);
search.addWidget(
instantsearch.widgets.refinementList({
container: '#facet-tags',
attributeName: 'taxonomy_post_tag',
operator: 'and',
limit: 15,
sortBy: ['isRefined', 'count:desc', 'name:asc'],
templates: {
header: '<h3 class="widgettitle">Tags</h3>'
}
})
);
search.addWidget(
instantsearch.widgets.menu({
container: '#facet-users',
attributeName: 'post_author.display_name',
sortBy: ['isRefined', 'count:desc', 'name:asc'],
limit: 10,
templates: {
header: '<h3 class="widgettitle">Auteurs</h3>'
}
})
);
search.templatesConfig.helpers.relevantContent = function() {
var attributes = ['content', 'title6', 'title5', 'title4', 'title3', 'title2', 'title1'];
var attribute_name;
for ( var index in attributes ) {
attribute_name = attributes[ index ];
if ( this._highlightResult[ attribute_name ].matchedWords.length > 0 ) {
return this._snippetResult[ attribute_name ].value;
}
}
return this._snippetResult[ attributes[ 0 ] ].value;
};
search.start();
jQuery('#algolia-search-box input').attr('type', 'search');
}
});
<?php
// functions.php file of your theme.
function theme_name_scripts() {
wp_enqueue_style( 'theme-name-ais-page', get_template_directory_uri() . '/css/ais-wp.css' );
wp_enqueue_script( 'theme-name-ais-page', get_template_directory_uri() . '/js/ais-wp.js', array( 'algolia-instantsearch', 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
<?php
/**
* The template for displaying instantsearch results pages
*/
get_header(); ?>
<div id="ais-wrapper">
<main id="ais-main">
<div id="algolia-search-box">
<div id="algolia-stats"></div>
</div>
<div id="algolia-hits"></div>
<div id="algolia-pagination"></div>
</main>
<aside id="ais-facets">
<section class="ais-facets" id="facet-post-types"></section>
<section class="ais-facets" id="facet-categories"></section>
<section class="ais-facets" id="facet-tags"></section>
<section class="ais-facets" id="facet-users"></section>
</aside>
</div>
<script type="text/html" id="tmpl-hit">
<article itemtype="http://schema.org/Article">
{{#thumbnail_url}}
<div class="ais-hits--thumbnail">
<a href="{{ permalink }}" title="{{ post_title }}">
<img src="{{ thumbnail_url }}" alt="{{{ post_title }}}" title="{{{ post_title }}}" itemprop="image">
</a>
</div>
{{/thumbnail_url}}
<div class="ais-hits--content">
<h2 itemprop="name headline"><a href="{{ permalink }}" title="{{ post_title }}" itemprop="url">{{{ _highlightResult.post_title.value }}}</a></h2>
<div class="ais-hits--categories">
{{#taxonomy_category}}
<span class="ais-hits--category">{{.}}</span>
{{/taxonomy_category}}
</div>
<div class="excerpt">
<p>
{{#helpers.relevantContent}}{{/helpers.relevantContent}}
</p>
</div>
</div>
<div class="ais-clearfix"></div>
</article>
</script>
<?php get_footer(); ?>
@amitramani

This comment has been minimized.

Copy link

@amitramani amitramani commented Aug 7, 2016

Woohoo!! Thank you for this awesome and simple to follow guide! I was just able to implement Instant Search on my site. The speed of the results is unbelievably fast! Great job. Special Thanks to @rayrutjes

@rayrutjes

This comment has been minimized.

Copy link
Owner Author

@rayrutjes rayrutjes commented Aug 21, 2016

Wow didn't see your comment here @amitramani, thank you for the kind words.

If you have any suggestion on how when could simplify this even more, feel free to share!

@amitramani

This comment has been minimized.

Copy link

@amitramani amitramani commented May 16, 2017

@rayrutjes
I understand this is off-topic, but any ideas on how to send search query data to Google Analytics?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.