Detecting if Divi Builder is Running

This post may contain referral links which may earn a commission for this site

I've spent a lot of time posting tips to help Divi users make the most out of the Divi Theme. Now, that there are an ever-growing number of developers working on some damn cool Divi plugins, I've decided to start posting tips for Divi developers too. To kick things off, here is a simple way to check whether or not the Divi Builder editor is active on the post / page edit screen.

function dfd_example() { ?>
<script>
jQuery(function($){
	
	function divi_builder_is_active() { 
		return $('#et_pb_toggle_builder.et_pb_builder_is_used').length; 
	}
	
	// periodically log the divi builder status
	setInterval(function(){
		if (divi_builder_is_active()) { 
			console.log('Divi Builder is active');
		} else { 
			console.log('Divi Builder is not active');
		}
	}, 1000);
	
});
</script>
<?php
}

add_action('admin_head-post.php', 'dfd_example');
add_action('admin_head-post-new.php', 'dfd_example');

The detection is done using the divi_builder_is_active() function, and in this example, the function is called once every second and the result logged to the JavaScript console.

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. 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
  2. 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

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