5

I developed a custom simple module for Divi builder. It shows correctly in the backend and frontend editor.

The problem is that it won't save at all in the backend or frontend editor. When I place it into the backend editor and save the post, then it will lost after reloading the backend editor!

Here is my module class:

class My_Custom_Module extends ET_Builder_Module
{
    public function init()
    {
        $this->name = __('My Custom Module', 'wpl');
        $this->slug = 'CUSTOM_SLUG';
    }
}

new My_Custom_Module();

I followed this article https://jonathanbossenger.com/building-your-own-divi-builder-modules/ and How to create custom Divi module? and some other articles that I found by Google.

I already tried to put some fields in get_fields function but it didn't help too.

Also to make sure, it's not a conflict, I disabled all other plugins but it didn't fix so it's not related to a conflict.

Hossein
  • 2,592
  • 4
  • 23
  • 39
  • There is a comment Update under the tutorial, did you check it : UPDATE: During preparation of this article I discovered that my custom modules weren’t always loading into the Page Builder. I couldnt figure out why until I found out how the Divi Page Builder caching works. So make sure you check that as well. – IqbalBary May 16 '17 at 06:07
  • Yes, I checked it. – Hossein May 19 '17 at 08:03
  • I found the solution myself. Please check my own answer. – Hossein May 19 '17 at 10:07

2 Answers2

6

I finally found the problem myself and I'm sharing it here to help others if they face a same problem.

The simple module in the question doesn't save because its slug, which is missing the et_pb_ prefix. It works fine when I change $this->slug = 'custom_module' to $this->slug = 'et_pb_custom_module'.

I didn't see this rule in their documentation but I hope they mentioned it somewhere.

Here is the working code for a simple Divi custom module:

function custom_divi_register_modules()
{
    if(class_exists('ET_Builder_Module'))
    {
        class custom_divi_module extends ET_Builder_Module
        {
            public function init()
            {
                $this->name = __( 'Custom Module', 'et_builder' );
                $this->slug = 'et_pb_custom_module';
                $this->fb_support = true;
            }
        }

        new custom_divi_module;
    }
}
add_action('et_builder_ready', 'custom_divi_register_modules');
aalaap
  • 4,145
  • 5
  • 52
  • 59
Hossein
  • 2,592
  • 4
  • 23
  • 39
  • Confirmed...the slug of a custom module requires an `et_pb_` prefix in the slug in order for Divi to save the module. Not sure why or how this works exactly, but this is important information if you're building custom Divi modules. – braican Nov 06 '17 at 23:11
  • I followed a tutorial online to create a custom module but was getting a Fatal error stating that the 'ET_Builder_Module_Type_PostBased' class didn't exist. Encapsulating the custom module class in a function and calling via the hook: `add_action('et_builder_ready', 'custom_divi_register_modules');` fixed the issue I was having – Mat Dec 22 '17 at 21:20
  • @Hossein Can you post more code in to the working example above? The snippet does register the module and it shows up in the builder, but I'm looking for a simple example that shows how to set a field value in the builder and have it show up in the page. – aalaap Feb 23 '18 at 08:20
-1

That shouln't be happening. There might be a conflict caused by other plugins in wordpress. What I would do is do a fresh install of wordpress, apply Divi theme, try to save module. If it does save. Then you can isolate the problem and know which plugin is causing the issue by installing the plugins back in one by one.

Rodney Zanoria
  • 494
  • 1
  • 4
  • 19