Detecting if Divi Builder is Running

Written by Dan Mossop

The Divi Theme includes a visual page builder, allowing edits to be made directly to the front-end view of the site. When adding custom code to a Divi site, it can sometimes be useful to determine whether or not the visual builder is active on the page. For example, if a script works on the front-end, but causes a conflict with the visual builder, you may wish to have it run on the front-end only if the visual builder is not active. Here's how to detect if the visual builder is currently active.

Check if the Divi visual builder is active using PHP

One way to test if the visual builder is active is to check for the "et_fb" parameter in the URL. For example to run a script on the front-end, but NOT when the visual builder is active, you could do something like this:

add_action('wp_enqueue_scripts', 'dbc_enqueue_non_visual_builder_scripts');

function dbc_enqueue_non_visual_builder_scripts() {
	if (empty($_GET['et_fb'])) {
		wp_enqueue_script('my-script', site_url('/test.js'));
	}
}

The "et_fb" parameter has, I believe, been there since the visual builder was first introduced, so this should work well with both the current and older versions of Divi.

Check if the Divi visual builder is active using JavaScript / jQuery

An easy way test if the visual builder is active using JavaScript / jQuery is to check for the existence of the "et_fb" body class (which is added when the visual builder is active), e.g.

<script>
jQuery(function() {
	if (!$("body").hasClass('et_fb')) {
		// do something
	}	
});
</script>

Supercharge Your Divi Site with AI-Driven CTAs!

Unleash the power of customized, targeted call-to-actions with WP Magic CTAs. Perfectly tailored for Divi users, this AI-driven plugin enhances your WordPress site by seamlessly crafting personalized prompts that guide your audience. Boost engagement and conversions effortlessly and enjoy a special 50% discount before September 5!

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

13 Comments

  1. Hello!

    I came across this page when searching for "check if divi editor running php", and this seems to be the only result that's close to what I want.

    What I'm trying to do is create a shortcode which behaves differently if the page is currently being edited using the visual builder.
    The main reason for this is that the shortcode may display or hide the content based on certain conditions. However, if the user is viewing the page to edit it, it would be helpful if the content would be displayed regardless, along with a note stating what it's display state would otherwise be.

    From my understanding, the purpose of the original code on this page is to determine(through Javascript rather than PHP), whether the Divi builder has been used to create a page, as opposed to the editor currently being used. I did see that you gave someone the code to do the same thing in PHP, but this still isn't exactly what I want.

    Thanks for any help you can provide!

    Reply
    • Oh, and I forgot to mention that I had tried originally to simply use the GET variable that seems to be used by Divi to indicate the editing, "et_fb", but when I check "`isset($_GET['et_fb'])"`, it actually returns false, meaning Divi must unset it at some point.

      I could simply parse the URL to check whether this is set, but this seems really hacky and not a standard or reliable way of doing this.

      Thanks again!

      Reply
      • Hey Zshandi, if you're placing the shortcode in a module (e.g. a text or code module) visual builder retrieves the preview of the module via an ajax request. This is why $_GET['et_fb'] isn't set – the shortcode is rendered during this ajax request, rather than during the generation of the main page. There is a separate $_GET var "et_pb_preview" that you can use to detect when you're in a preview, like so:

        function vbshortcode() {
        	if (!empty($_GET['et_pb_preview'])) {
        		return 'Visual builder notice';
        	}
        	return 'Front-end content';
        }
        add_shortcode('vbshortcode', 'vbshortcode');
        

        There's also a built-in function, is_et_pb_preview(), for checking this variable that you may prefer to use:

        function vbshortcode() {
        	if (function_exists('is_et_pb_preview') && is_et_pb_preview()) {
        		return 'Visual builder notice';
        	}
        	return 'Front-end content';
        }
        add_shortcode('vbshortcode', 'vbshortcode');
        

        Hope that helps!

        Reply
      • thank you for this was exactly what I was searching for

        Reply
        • Great to hear it helped you out, Vassilis :)

          Reply
  2. Hello Dan,
    i too would like to discern if i am on page with page-builder active or not. If would like to enqueue a JS-script only on pages where the page-builder is not active. Or i would dequeue the script on pages where page-builder ist active. I tried something like this in the sub-theme function.php:

    <?php

    function steady_enqueue() {
    if (!divi_builder_is_active()) {
    wp_enqueue_script(
    'steady-js',
    'https://steadyhq.com/widget_loader/xxxxxxxxxxxxxxxxxxx&#039;
    );
    }
    }
    add_action('wp_enqueue_scripts', 'steady_enqueue');

    Can you help me?

    Reply
    • Hey Stephan,

      Divi uses the _et_pb_use_builder post meta key to indicate if a post / page uses Divi Builder.

      This is pretty much how Divi itself checks if Divi Builder is active on a page:

      $is_builder_active = ('on' === get_post_meta( get_the_ID(), '_et_pb_use_builder', true ));
      

      So if you defined your function as:

      function divi_builder_is_active() {
         return ('on' === get_post_meta( get_the_ID(), '_et_pb_use_builder', true ));
      }
      

      That would hopefully get your code working as required. Give me a shout if that doesn't do it. Cheers!

      Reply
  3. I found this blog post via Google trying to understand how in PHP to recognize if Divi and/or Divi Builder plugin is activated. I am maintaining a plugin for a client that has a workaround for Divi but I would like to load it only when Divi is activated.

    Any chance you could suggest how best to do that? Even better if you would be willing to email me that you replied to my comment since I assume your comment section doesn't have email notificiation?

    Thanks in advance.

    Reply
    • Hey Mike, it'll depend on the details of the code your workaround needs to run, but here's a couple of options:

      1) if (defined('ET_CORE_VERSION')) { … } would tell you if the Divi Builder version constant is set, and hence that one of Divi, Extra or the Divi Builder plugin are present.
      2) add_action('et_builder_ready', 'somefunction'); will call somefunction() once the Divi Builder is fully initialized, so indicates its presence and makes its various resources available.

      Hopefully one of those help, but if not, perhaps you can share some details of the workaround code in reply to the email (that I'm about to send you) so that I can offer some more tailored advice. Thanks!

      Reply
  4. Is it possible to make the "Enable Visual Builder" button a different color if the builder is already enabled? This would be when you're logged in and viewing the page/post.

    It's really annoying to have to go to the Edit screen to see this.

    Reply
    • You mean show whether the page is built with a Divi Builder layout vs or standard WP content (i.e. Divi Builder not used for the content)? If so, I think this should work:

      .et_pb_pagebuilder_layout #wp-admin-bar-et-use-visual-builder a {
          color: #00ff00; 
      }
      

      That should show the link as green if the page uses a Divi Builder layout. To reverse the logic and turn the link green if the page does not use Divi Builder, do:

      body:not(.et_pb_pagebuilder_layout) #wp-admin-bar-et-use-visual-builder a {
          color: #00ff00; 
      }
      

      I hope that helps, but let me know if not. Thanks!

      Reply
  5. Hi!

    I'd like to disable some JS files and/or scripts when user clicks on Enable Divi Builder.

    Could you please let me know how to do it?

    Thanks in advance
    Maxime

    Reply
    • Hi Maxime, are you able to give me an example of what you'd like to disable? The code above is a bit old now – it was written for what is now called the "Classic Builder". Am I right in thinking you'd want to disable the JS on activation of the visual builder / backend visual builder? I believe when they are activated they trigger a reload, so it would be enough to test if the visual builder is enabled on the page (no need to try and capture button clicks like I do above). But the best way to do this will probably depend on the JS you want to control – hence if you are able to give me an example / more details of what you're hoping to achieve I can probably advise you better. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.