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'));
}
}Related Post: Adding PHP to the Divi Theme
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>Related Post: Adding JavaScript / jQuery to Divi.
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!
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!
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!
thank you for this was exactly what I was searching for
Great to hear it helped you out, Vassilis :)
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'
);
}
}
add_action('wp_enqueue_scripts', 'steady_enqueue');
Can you help me?
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!
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.
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!
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!