Divi
October 5, 2021

Create Custom Divi Builder Module

Easy way to create Module for Divi Builder. Create wc-custom-divi-module.php file and include its to functions.php file(This file is located in your theme folder). You can use below code to include file wc-custom-divi-module.php.

Module settings are defined in the get_fields() method.

include ‘wc-custom-divi-module.php’;

name = et_builder_i18n( ‘Logo Slider’ );
$this->plural = esc_html__( ‘Logo Slider’, ‘et_builder’ );
$this->slug = ‘et_pb_logo_slider’;
$this->vb_support = ‘on’;
}
public function get_fields() {
return array(
‘src’ => array(
‘label’ => et_builder_i18n( ‘Logo Image’ ),
‘type’ => ‘upload-gallery’,
‘option_category’ => ‘basic_option’,
‘upload_button_text’ => et_builder_i18n( ‘Upload an image’ ),
‘choose_text’ => esc_attr__( ‘Choose an Image’, ‘et_builder’ ),
‘update_text’ => esc_attr__( ‘Set As Image’, ‘et_builder’ ),
‘hide_metadata’ => true,
‘affects’ => array(
‘alt’,
‘title_text’,
),
‘description’ => esc_html__( ‘Upload your desired image, or type in the URL to the image you would like to display.’, ‘et_builder’ ),
‘toggle_slug’ => ‘main_content’,
‘dynamic_content’ => ‘image’,
‘mobile_options’ => true,
‘hover’ => ‘tabs’,
),

‘wc_autoplay’ => array(
‘label’ => esc_html__( ‘AutoPlay’, ‘et_builder’ ),
‘description’ => esc_html__( “Disabling AutoPlay will remove the autoplay in slider.”, ‘et_builder’ ),
‘type’ => ‘yes_no_button’,
‘option_category’ => ‘basic_option’,
‘options’ => array(
‘on’ => et_builder_i18n( ‘Yes’ ),
‘off’ => et_builder_i18n( ‘No’ ),
),
‘default_on_front’ => ‘on’,
‘toggle_slug’ => ‘elements’,
‘affects’ => array(
‘bullet_color’,
),
‘mobile_options’ => true,
‘hover’ => ‘tabs’,
),
‘wc_loop’ => array(
‘label’ => esc_html__( ‘Loop’, ‘et_builder’ ),
‘description’ => esc_html__( “Disabling Loop will remove the loop in slider.”, ‘et_builder’ ),
‘type’ => ‘yes_no_button’,
‘option_category’ => ‘basic_option’,
‘options’ => array(
‘on’ => et_builder_i18n( ‘Yes’ ),
‘off’ => et_builder_i18n( ‘No’ ),
),
‘default_on_front’ => ‘on’,
‘toggle_slug’ => ‘elements’,
‘affects’ => array(
‘bullet_color’,
),
‘mobile_options’ => true,
‘hover’ => ‘tabs’,
),
‘time_duration’ => array(
‘label’ => esc_html__( ‘Time Duration’, ‘et_builder’ ),
‘type’ => ‘text’,
‘option_category’ => ‘basic_option’,
‘description’ => esc_html__( ‘Enter Time Duration.’, ‘et_builder’ ),
‘toggle_slug’ => ‘main_content’,
),
);
}
public function render( $unprocessed_props, $content = null, $render_slug ) {
ob_start();
$attachment_ids = $this->props[‘src’];
$time_duration = $this->props[‘time_duration’];
if(!empty($time_duration)){
$time_duration = $time_duration;
}else{
$time_duration = ‘5000’;
}
$autoplay = $this->props[‘wc_autoplay’];
if($autoplay == ‘on’){
$autoplay = ‘true’;
}else{
$autoplay = ‘false’;
}
$loop = $this->props[‘wc_loop’];
if($loop == ‘on’){
$loop = ‘true’;
}else{
$loop = ‘false’;
}
$attachment_ids = explode(“,”,$attachment_ids);
if(!empty($attachment_ids)){
?>