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