Detecting if Divi Builder is Running

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() { ?>
	function divi_builder_is_active() { 
		return $('#et_pb_toggle_builder.et_pb_builder_is_used').length; 
	// periodically log the divi builder status
		if (divi_builder_is_active()) { 
			console.log('Divi Builder is active');
		} else { 
			console.log('Divi Builder is not active');
	}, 1000);

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.

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

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


  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.

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

  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

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


Submit a Comment

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