Jul 1, 2017 | Blog

How to Fix Your Divi Plugin If CSS of Custom Modules are Not Loading After Divi 3.0.52 Update

This solution is not for individual sites built using Divi but plugins which are made for Divi.

New version of Divi has added static CSS file generation methodology in which custom CSS of the modules are added in a dynamic file to improve the page load time.

This update of Divi (3.0.52) has made many custom modules and plugins stop working properly. The main issue is seen in form of CSS not being rendered on the page for the custom modules and thus the design on the front end is distorted.

There are many changes in Divi functions in 3.0.52 update and Elegant Themes has added complete new system for generating static CSS file. These changes has stopped setting up style via set_style() function. Earlier this function worked fine but now there are some changes in hierarchy which has stopped the styling to work.

 This function handles the CSS from the modules which stopped working for our Plugin after the Divi 3.0.52 Update. The code is still same in old and new version of Divi but custom Divi plugins needs the updates (below) to be done in order to work with latest static CSS generation feature of Divi.

After going through the Divi changelog for 3.0.52 and 3.0.53 our team at Elicus Technologies have been able to address the issue with our own Plugin Divi Blog Extras. After the Divi 3.0.52 update, the module stopped working properly and was not rendering the CSS and thus the page where the layout was used was failing to display properly.

Based on the findings with our plugin Divi Blog Extras, the main area where a developer of any Divi module can look to fix issue of CSS not being able to rendered for their modules is given below.

To fix this issue we need to add our modules after loading Divi page builder instead of wp or wp_loaded and your styling will start displaying for your module.

Here is a function from our plugin Divi Blog Extras which was using wp and wp_loaded earlier. It does not work anymore with Divi 3.0.52+ release. This caused Divi Blog Extras module to stop rendering CSS after Divi 3.0.53 update.

 

To fix this issue, we modified code of our plugin to load after the Divi builder by making the following changes which is highlighted in the code below.

This is an overall case study based solution for fixing most of the Divi module based plugins. It could serve as a hint for developers so that they can look into their code and update it accordingly and get their plugin work with Divi 3.0.52+

If you are a Divi Plugin developer and have similar issue with your plugin/module after the Divi 3.0.52 update, you can try to load your module after Divi builder using. $action_hook = ‘et_builder_ready’;

Feel free to contact us if you have a question or would like us to look into your plugin.

Posted By:
Mohd Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 8 years experience in the WordPress development industry.

2 Comments

  1. Mark

    Where to find this line of code?

    Reply
  2. Mark Idio

    Where to find this line of code? I cannot change it. 😀

    Reply

Submit a Comment

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

2 Comments

  1. Mark

    Where to find this line of code?

    Reply
  2. Mark Idio

    Where to find this line of code? I cannot change it. 😀

    Reply

Submit a Comment

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

How to add Google reCAPTCHA in Contact Form 7 in easy steps

How to add Google reCAPTCHA in Contact Form 7 in easy steps

It’s a must that a contact form should have Google reCAPTCHA or any other security options enabled on it. Well, reCAPTCHA is most recommended. It protects your contact forms from getting filled out by bots or spams. And if you want to add reCAPTCHA on your contact...

Divi Content Toggle to display key information in compact manner

Divi Content Toggle to display key information in compact manner

Having long pages with detailed information can delight Google bots, however, for users, it can be a bulky experience. They might find themselves overwhelmed or either confused when looking over pages overtaken by content. Then there comes the Divi Content Toggle...

Create Divi structured data pages easily for Google rich snippets

Create Divi structured data pages easily for Google rich snippets

Having Divi structured data markup pages can help you and your website in many ways. It not only features your web pages as Google rich snippets. But it brings a valuable amount of organic traffic. And it can be done for any website of any CMS, such as WordPress,...

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!