How to check whether the Elementor editor is active

Published February 12, 2021
How to check whether the Elementor editor is active

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 ✌️👇

Image Ralph J. Smit
Ralph is a designer gone developer. He happily lives in the Netherlands. His passion for good design drove him towards development, because he felt that no-code tools were too limiting. On this blog, Ralph writes the articles he would've wanted to have during his continual developer journey. → Follow on Twitter

Comments

  • Vishal

    March 11, 2021

    This is indeed a helpful and easy way to check out elementor active or not. Thanks for helping out Ralph!

  • Jackson Monichan

    February 28, 2021

    Hello Ralph, This is an awesome article. Also I was checking some other articles on your website - you really have unique and awesome articles that are problem solving solutions in wordpress development world. Thank You. Keep up the good work buddy!! Would like to subscribe to your newsletter and learn from you in future as well.

    • Ralph Smit

      March 1, 2021

      Hey Jackson, Thank you for your kind words! I'm working on a newsletter, will keep you posted ✌️

Leave a reply

Your email address will not be published. Required fields are marked *