Elementor

Elementor is a popular page builder. It works rather well with Relevanssi.

Using Relevanssi with Elementor Live Results

Elementor has a feature for custom Query Filters. These can be used to connect Relevanssi with the Elementor Live Results and the Elementor Search Widget.

First, you need to add this function to your site:

function my_relevanssi_results( $query ) {
  $query->set( 'relevanssi', true );
  $query->set( 'orderby', 'relevance' );
}
add_action( 'elementor/query/my_relevanssi_results', 'my_relevanssi_results' );

Then, follow these instructions from Elementor:

Assuming you have already added and configured the Search widget in a document like your Header Template, open that document, select the Search widget, and in the Content tab, scroll down to the “Results” section, and set the “Live Results” to “Show”. Select your Loop Item template from the Dropdown, set your preferred options, and open the “Query” section. The last setting is where we do our magic! Add the text below to the “Query ID” field: my_relevanssi_results

For an added functionality, if you have created a Search Results Archive page using the Loop Grid, set to Current Query, you can apply the same query filter, and the results will appear there in the same order as well.

Highlight in documents breaks entrance animations

In some cases enabling Relevanssi in-document highlighting breaks pictures with entrance animations. You can add this function to your site to fix the problem.

add_filter( 'relevanssi_clean_excerpt', function( $content ) {
    if ( preg_match_all( '/data-settings="(.*?)"[ >]/', $content, $matches ) ) {
        $source  = array();
        $replace = array();
        foreach ( $matches[1] as $match ) {
            $source[]  = $match;
            $replace[] = str_replace( '"', '"', $match );
        }
        $content = str_replace( $source, $replace, $content );
    }
    return $content;
} );

Conditional and Inline CSS Load Experiment

Elementor has this new experimental feature. For some reason, using it with Relevanssi may cause the inline CSS to disappear from the search results page, leading to broken layouts. Disabling the experimental feature solves this problem.