Broken Divi Theme Options Page

Here is how to fix your broken Divi Theme Options page

You just noticed that you have a broken Divi theme options page. Some of the sections are okay, but some are not the usual style. And, it looked like the style for the page was over-ruled by other stylesheets or scripts.

The main reason for this is when a new plugin was installed and that plugin loaded a CSS file or JS file to your WordPress back-end that created a conflict and broke your Divi theme options page style. This CSS file or JS file might be essential for your plugin to work properly. So, let’s just fix the issue ONLY when we are at Divi theme options page.

We can do this by removing CSS file or JS file that triggered the conflict using the following function ‘ wp_dequeue_style();.’ We’ll take advantage of the wp_dequeue_style() since the conflict is only present at WordPress Dashboard and not on the Front-end of the website. We will only touch the CSS file or JS file that are loaded in WP Dashboard or Admin area of WordPress.

The following is a step by step guide to fix your Broken Divi Theme options page.

Always backup your website just to make sure you get your website back if something weird will happen.

1. Identify which plugin causes the conflict.

Try deactivating your installed plugin and check your Divi theme options page for changes. This will help us identify which plugin triggers the conflict. You have to do this one plugin at a time.

When you Identify which plugin did the conflict. You need to check which CSS file or JS file that triggered the conflict from that plugin. You can check this by going to developer’s tools of your browser and try removing the stylesheet or script of the plugin in the dev tool and check for changes when it does you can then proceed.

2. Paste the code.

Once you identify which plugin and CSS file or JS file caused the conflict, you can then paste the following code to your functions.php inside your child theme folder.

In my case, it was the jquery-ui-style.css that had a conflict on Divi theme options page. I just needed to get the name of the enqueued style of my plugin which in my case was jquery-ui-style. Then, I placed it inside the $handles array. You can add multiple CSS or JS if needed. Just add comma after the name of your CSS name.

// REMOVE STYLE THAT HAS CONFLICT TO DIVI THEME OPTION SCREEN
add_action( 'admin_enqueue_scripts', 'remove_conflict_divi_theme_option_page', 20 );

function remove_conflict_divi_theme_option_page(){
  global $pagenow;

  // CHECK IF AT DIVI THEME OPTION PAGE 'et_divi_options' you can check the url
  if( 'admin.php' == $pagenow && ! empty( $_GET['page'] ) && 'et_divi_options' == $_GET['page'] ){
      
    $handles = array(
      'jquery-ui-style'
      // YOU CAN ADD OTHER CSS INSIDE THIS ARRAY SEPARATED BY COMMA
    );
    
    foreach( $handles as $handle ){
      wp_dequeue_style( $handle );
    }
  }
}

Create a function remove_conflict_divi_theme_option_page(). Then, check if the page is in Divi Theme Options page. Then, use the name of the script. And, finally dequeue the script that has conflict to Divi Theme Options page. Save the functions.php and check.

That’s it!

The issue was gone and the Divi Theme Options page is back to its normal style.

Summary

First, Identify which plugin and CSS file or JS file over-ruled the Divi’s style. Then, create a function and use the WordPress hook add_action(); to target the admin_enqueue_scripts. Then, use the name of the CCS file to avoid it from loading at Divi Theme Options page specifically. Read more about the wp_dequeue_style() function on WordPress Codex page.