How to create custom Divi module? How to create custom Divi module? wordpress wordpress

How to create custom Divi module?


Most other solutions here are way too complex. The simplest way is to load your custom module in the divi specific action hook et_builder_ready, like this:

add_action( 'et_builder_ready', 'evr_initialize_divi_modules' );function evr_initialize_divi_modules() {    if ( ! class_exists( 'ET_Builder_Module' ) ) { return; }    class EVR_Builder_Module_Testimonial extends ET_Builder_Module {        function init() {            $this->name       = esc_html__( 'Testimonial', 'evr' );            $this->slug       = 'evr_pb_testimonial';            $this->fb_support = true;            // ...        }    }}

You can find the full demo-code on github. Along with some instructions how to get it work in the all new Divi 3 frontend builder:

https://github.com/stracker-phil/divi3-vb-custom-modules/


Place below in your functions.php file. The include file (I called it custom-modules.php) will be a class that extends ET_Builder_Module (which is very similar to WP_Widget). Just open the file from Divi>>includes>>builder>>main-modules.php. Use any of the preexisting modules as an example or basis for your new one. Copy and paste into your custom-modules.php. New class names, make edits as needed, etc.

function doCustomModules(){ if(class_exists("ET_Builder_Module")){    include("custom-modules.php"); }}function prepareCustomModule(){ global $pagenow; $is_admin = is_admin(); $action_hook = $is_admin ? 'wp_loaded' : 'wp'; $required_admin_pages = array( 'edit.php', 'post.php', 'post-new.php', 'admin.php', 'customize.php', 'edit-tags.php', 'admin-ajax.php', 'export.php' ); // list of admin pages where we need to load builder files $specific_filter_pages = array( 'edit.php', 'admin.php', 'edit-tags.php' ); // list of admin pages where we need more specific filtering $is_edit_library_page = 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && 'et_pb_layout' === $_GET['post_type'];    $is_role_editor_page = 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'et_divi_role_editor' === $_GET['page'];    $is_import_page = 'admin.php' === $pagenow && isset( $_GET['import'] ) && 'wordpress' === $_GET['import']; // Page Builder files should be loaded on import page as well to register the et_pb_layout post type properly    $is_edit_layout_category_page = 'edit-tags.php' === $pagenow && isset( $_GET['taxonomy'] ) && 'layout_category' === $_GET['taxonomy']; if ( ! $is_admin || ( $is_admin && in_array( $pagenow, $required_admin_pages ) && ( ! in_array( $pagenow, $specific_filter_pages ) || $is_edit_library_page || $is_role_editor_page || $is_edit_layout_category_page || $is_import_page ) ) ) {    add_action($action_hook, 'doCustomModules', 9789); }}$theme_data = wp_get_theme();$parent_data = $theme_data->parent();if(version_compare((string)$parent_data->Version, "2.5.9", ">")) {    add_action('et_builder_ready', 'doCustomModules');} else {    doCustomModule();}


Important note: The slug for your custom module must contain the string et_pb_, or it will be filtered out by the function et_pb_allowed_modules_list().

I was able to add a new Divi module using the following code (requires PHP 5.3+ for the anonymous function):

add_action(is_admin() ? 'wp_loaded' : 'wp', function() {  require __DIR__ . '/custom-divi-module.php';}, 20);

Inside the included file, copy and paste a class from the wp-content/themes/Divi/includes/builder/main-modules.php file, then modify to suit your needs. See the example below (copy an actual class from the file mentioned to get the content of each method listed below… I like the ET_Builder_Module_Code class for simplicity's sake):

class YOUR_MODULE_NAME extends ET_Builder_Module {  function init() {    // Name, slug, and some other settings for the module go here  }  function get_fields() {    // This method returns an array of fields that the module will    // display as the module settings  }  function shortcode_callback($atts, $content = null, $function_name) {    // This method returns the content the module will display  }}new YOUR_MODULE_NAME;