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.
Relevanssi is providing search results as expected; however when I try to customize the search results page it stops working.
In Elementor, I go to: Theme Builder > Search Results and add a custom theme to control the display of my search results; however, when I do this I no longer get search results.
I don’t know how Elementor works, so I can’t help with this, unfortunately. It’s possible the Elementor custom theme is incompatible with Relevanssi; I can’t say for sure, because I have no idea how it works.
There seem to be more conflicts between Relevanssi and Elementor than those referenced above. The issues I am seeing are on the search results page.
For instance, when Relevanssi is activated, the Elementor search form has a ‘hidden’ class inserted ().
The animation issue applies to any element on the page that has an entrance animation activated – it never shows up.
Not sure if it is the same issue but the Elementor mega menu completely stops working as well.
When the Relevanssi plugin is deactivated all of these items work as expected.
Yes. Elementor has all sorts of features and all of them are not compatible with Relevanssi.
I don’t know why Elementor hides the search form when Relevanssi is active. You need to ask Elementor support about that; Relevanssi certainly doesn’t do anything to Elementor search forms.
Does disabling the in-document highlighting remove the problems? I had to change that feature recently to block a vulnerability, and that made the feature less useful. It now conflicts with many other things. Unfortunately, that is the cost of making it safe.