The Divi page builder is a popular tool for creating custom layouts in WordPress. Here are some tips to enhance your Divi page builder experience:
- Add a custom module to Divi: You can extend the functionality of Divi by creating your own custom modules. Here’s an example of how to create a custom module called “Testimonial” using the
et_pb_module_shortcode()function:
function wpsnippets_testimonial_module_shortcode($atts, $content = null) {
ob_start();
// Your module code here
return ob_get_clean();
}
add_shortcode('wpsnippets_testimonial', 'wpsnippets_testimonial_module_shortcode');
- Modify the Divi module settings: You can customize the settings of existing Divi modules by using the
et_pb_module_settings_array()filter. Here’s an example of how to modify the settings of the “Text” module:
function wpsnippets_modify_text_module_settings($settings) {
$settings['fields']['text']['default'] = 'Hello, World!';
return $settings;
}
add_filter('et_pb_module_settings_array', 'wpsnippets_modify_text_module_settings', 10, 2);
- Create a custom Divi layout: You can create your own custom layout in Divi by using the
et_builder_add_layout()function. Here’s an example of how to create a layout called “Custom Layout” and add it to the Divi library:
function wpsnippets_add_custom_layout() {
$layout = array(
'name' => 'Custom Layout',
'slug' => 'custom-layout',
'content' => '<h1>Welcome to my custom layout!</h1>',
);
et_builder_add_layout($layout);
}
add_action('wp_loaded', 'wpsnippets_add_custom_layout');
- Disable the Divi page builder on specific pages: If you want to disable the Divi page builder on specific pages, you can use the
et_builder_is_enabled_for_post_type()filter. Here’s an example of how to disable the page builder on a page with the ID 123:
function wpsnippets_disable_page_builder($enabled, $post_type) {
if ($post_type === 'page' && get_the_ID() === 123) {
$enabled = false;
}
return $enabled;
}
add_filter('et_builder_is_enabled_for_post_type', 'wpsnippets_disable_page_builder', 10, 2);
These code snippets can be useful for customizing and extending the functionality of the Divi page builder in WordPress.
Examples
Example 1: Adding a Custom Module to Divi Page Builder
This use case demonstrates how to add a custom module to the Divi Page Builder using the et_builder_register_module hook. The code example below shows how to create a custom module called “Testimonial” with a title and content field.
function wpsnippets_add_testimonial_module() {
if ( class_exists('ET_Builder_Module') ) {
class ET_Builder_Module_Testimonial extends ET_Builder_Module {
public $slug = 'et_pb_testimonial';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => '',
'author' => '',
'author_uri' => '',
);
public function init() {
$this->name = esc_html__( 'Testimonial', 'et_builder' );
$this->type = 'child';
$this->child_title_var = 'title';
$this->advanced_setting_title_text = esc_html__( 'New Testimonial', 'et_builder' );
$this->settings_text = esc_html__( 'Testimonial Settings', 'et_builder' );
}
public function get_fields() {
return array(
'title' => array(
'label' => esc_html__( 'Title', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter the title of the testimonial.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'content' => array(
'label' => esc_html__( 'Content', 'et_builder' ),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter the content of the testimonial.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
);
}
public function render( $attrs, $content = null, $render_slug ) {
$title = $this->props['title'];
$content = $this->props['content'];
return sprintf(
'<div class="testimonial">
<h3>%1$s</h3>
<div class="testimonial-content">%2$s</div>
</div>',
$title,
$content
);
}
}
new ET_Builder_Module_Testimonial;
}
}
add_action( 'et_builder_ready', 'wpsnippets_add_testimonial_module' );
The code above adds a custom module called “Testimonial” to the Divi Page Builder. It registers the module using the et_builder_register_module hook and defines the module’s settings and fields using the init() and get_fields() methods. The render() method is responsible for outputting the module’s HTML markup.
Example 2: Modifying Existing Divi Modules
This use case demonstrates how to modify existing Divi modules by extending their functionality. The code example below shows how to add a custom field to the “Text” module, allowing users to add a custom CSS class.
function wpsnippets_add_custom_css_class_field( $fields ) {
$fields['css_class'] = array(
'label' => esc_html__( 'CSS Class', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter a custom CSS class for the module.', 'et_builder' ),
'toggle_slug' => 'advanced',
);
return $fields;
}
add_filter( 'et_builder_module_fields', 'wpsnippets_add_custom_css_class_field' );
The code above adds a custom field called “CSS Class” to the “Text” module in Divi. It uses the et_builder_module_fields filter to modify the module’s fields array and adds the custom field definition. Users can now enter a custom CSS class for the module in the Divi Page Builder.
Example 3: Customizing Divi Builder Settings
This use case demonstrates how to customize the settings of the Divi Page Builder. The code example below shows how to remove the “Design” tab from the module settings.
function wpsnippets_customize_divi_builder_settings( $settings ) {
unset( $settings['advanced']['tabs']['design'] );
return $settings;
}
add_filter( 'et_builder_settings_init', 'wpsnippets_customize_divi_builder_settings' );
The code above uses the et_builder_settings_init filter to modify the settings array of the Divi Page Builder. It removes the “Design” tab from the module settings by unsetting the corresponding array element. This allows for a more streamlined and customized user interface in the Divi Page Builder.