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

Stay up to date with all things Laravel, Tailwind, WordPress & PHP

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

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

  • mark

    November 10, 2021

    Hey Ralph, Perfect! Your documentation is more helpful than Elementor's ;-) Thanks a ton, Mark

    • Ralph Smit

      November 10, 2021

      Thanks Mark! Haha, yes that's (unfortunately) true!😄

  • 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 *

Close
Do you want more articles like this delivered straight to your inbox?

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.