Prevent script loading in Oxygen Builder editor mode

If you’ve ever ran across issues with Oxygen Builder getting stuck on the preloading screen, you know how frustrating it can be. Custom scripts that work perfectly on the frontend can sometimes conflict with Oxygen Builder’s editor.

In this post, we'll show you how I solved this issue my modifying the script so that it won't run in the oxygen builder editor.

The Problem

Oxygen Builder can occasionally run into conflicts with custom scripts added because the builder renders the front end in the editor.

The Solution

The solution is to conditionally load your custom scripts based on the URL parameters that Oxygen Builder uses when the editor is active. Specifically, Oxygen Builder appends ?ct_builder=true&ct_inner=true to the URL when the editor is running. By checking for these parameters, we can ensure that our custom scripts only load when the editor is not active.

Step-by-Step Guide

1. Identify the conflicting snippet

First, find the snippet causing issues with Oxygen Builder. You can do this by deactivating each snippet one by one until you find the one causing the issue.

function add_custom_script_to_head() {
    //custom snippet;
}

2. Conditionally Load the Script

Next, create a function that checks the URL parameters. If the Oxygen Builder editor is not active, hook your custom script function to wp_head:

function conditionally_add_custom_script() {
    // Check if the URL parameters ct_builder and ct_inner are not set,
    // indicating that the Oxygen Builder editor is not active.
    if ( !isset($_GET['ct_builder']) && !isset($_GET['ct_inner']) ) {
        // If the parameters are not set, hook the add_custom_script_to_head function to wp_head.
        add_action('wp_head', 'add_custom_script_to_head');
    }
}

// This hooks the conditionally_add_custom_script function to the init action,
// which runs early in the WordPress initialization process.
add_action('init', 'conditionally_add_custom_script');

Explanation

1. Check URL Parameters: The function conditionally_add_custom_script checks if the URL parameters ct_builder and ct_inner are not set. This indicates that the Oxygen Builder editor is not active.
2. Hook Custom Script: If the Oxygen Builder editor is not active, it hooks the add_custom_script_to_head function to the wp_head action, ensuring the script is only loaded on the frontend.
3. Early Execution: The add_action('init', 'conditionally_add_custom_script') line ensures that the conditional check happens early in the WordPress initialization process.

Full code example

function add_custom_script_to_head() {
    // Custom Snippet
}

function conditionally_add_custom_script() {
    // Check if the URL parameters ct_builder and ct_inner are not set,
    // indicating that the Oxygen Builder editor is not active.
    if ( !isset($_GET['ct_builder']) && !isset($_GET['ct_inner']) ) {
        // If the parameters are not set, hook the add_custom_script_to_head function to wp_head.
        add_action('wp_head', 'add_custom_script_to_head');
    }
}

// This hooks the conditionally_add_custom_script function to the init action,
// which runs early in the WordPress initialization process.
add_action('init', 'conditionally_add_custom_script');