How to check whether the Elementor editor is active | RJS

How to check whether the Elementor editor is active

Ralph J. Smit Laravel Software Engineer

Elementor is a great page builder, but integrating it in your theme can sometimes come with a few hurdles. One of those is checking whether the editor is active – or if the page is being edited. Depending on that, you might want to load or not load certain stylesheets or scripts. Or perhaps you've an other use case. Anyway, checking this is really easy.

To check this, Elementor has a handy function built in, called is_preview_mode(). This function checks whether the page is shown through an <iframe> in the editor.

Using this comes down to the following. We use the function to check whether the preview is on and we save that in a variable.

$elementor_preview_active = \Elementor\Plugin::$instance->preview->is_preview_mode();

Now we can use this variable in many ways. One of that is to use it in an if-condition. If you want an if-condition to output different HTML, use one of these:

<?php if ($elementor_editor_active) : ?>
<p>Elementor editor is active</p>
<?php else : ?>
<p>Elementor editor is not active</p>
<?php endif; ?>
<?php if ($elementor_editor_active) : ?>
<p>Elementor editor is active</p>
<?php endif; ?>
<?php if (!$elementor_editor_active) : ?>
<p>Elementor editor is not active</p>
<?php endif; ?>

If you want the if-condition only in PHP, use this:

if ( \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
//do something
} else {
//do something

Adding a specific page id

There is one more step to take if you want to go deepπŸ˜‰πŸ˜Š. The is_preview_mode() function also takes one parameter, which is the page id. So you can check whether the

  1. Elementor preview mode is active;

  2. on a specific page.

Use it like this.

$page_id = 90; //This is an integer so no apostrophes
$elementor_preview_active = \Elementor\Plugin::$instance->preview->is_preview_mode($page_id);

Wrapping up

As you've seen, it's really easy to check whether the Elementor editor is active or not. Or at least whether the page is being previewed through the Editor. I hope this has been useful for you and do tell me your use cases in the comments βœŒοΈπŸ‘‡

Published by Ralph J. Smit on in Elementor. Last updated on 11 March 2022.

Like what you read?

Get notified when I publish something new, and unsubscribe at any time.