The Divi theme is a popular WordPress theme that includes a gallery module for creating beautiful image galleries on your website. The gallery module allows you to display multiple images in a grid or carousel format, with various customization options available.
To add a gallery module to your Divi theme, you can use the following code snippet:
function wpsnippets_add_divi_gallery_module() {
if ( class_exists( 'ET_Builder_Module' ) ) {
class ET_Builder_Module_Gallery extends ET_Builder_Module {
public $slug = 'et_pb_gallery';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => 'https://www.elegantthemes.com/gallery/divi/',
'author' => 'Elegant Themes',
'author_uri' => 'https://www.elegantthemes.com/',
);
public function init() {
$this->name = esc_html__( 'Gallery', 'et_builder' );
$this->plural = esc_html__( 'Galleries', 'et_builder' );
$this->slug = 'et_pb_gallery';
$this->vb_support = 'on';
$this->child_slug = 'et_pb_gallery_item';
$this->child_item_text = esc_html__( 'Gallery Image', 'et_builder' );
$this->advanced_setting_title_text = esc_html__( 'New Gallery', 'et_builder' );
$this->settings_text = esc_html__( 'Gallery Settings', 'et_builder' );
$this->main_css_element = '%%order_class%%.et_pb_gallery';
$this->advanced_fields = array(
'fonts' => array(
'gallery_title' => array(
'label' => esc_html__( 'Title', 'et_builder' ),
'css' => array(
'main' => "{$this->main_css_element} .et_pb_gallery_title",
),
'font_size' => array(
'default' => '18px',
),
'line_height' => array(
'default' => '1.5em',
),
),
),
);
}
public function get_fields() {
return array(
'title' => array(
'label' => esc_html__( 'Title', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter a title for this gallery', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'gallery_type' => array(
'label' => esc_html__( 'Gallery Type', 'et_builder' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'grid' => esc_html__( 'Grid', 'et_builder' ),
'slider' => esc_html__( 'Slider', 'et_builder' ),
'masonry' => esc_html__( 'Masonry', 'et_builder' ),
'justified' => esc_html__( 'Justified', 'et_builder' ),
),
'description' => esc_html__( 'Choose the type of gallery to display', 'et_builder' ),
'toggle_slug' => 'main_content',
),
// Rest of the fields...
);
}
// Rest of the module code...
}
new ET_Builder_Module_Gallery;
}
}
add_action( 'et_builder_ready', 'wpsnippets_add_divi_gallery_module' );
This code snippet adds a custom gallery module to the Divi theme. It extends the ET_Builder_Module class and defines various properties and methods to customize the gallery module’s behavior and appearance.
To use this code, you can add it to your theme’s functions.php file or create a custom plugin. Once added, you will see the new “Gallery” module available in the Divi Builder, allowing you to create and customize galleries using the Divi theme’s visual interface.
This code snippet can be useful if you want to extend the functionality of the Divi theme’s gallery module or create your own custom gallery module with specific features and options.
Examples
Example 1: Creating a Custom Divi Gallery Module
This use case demonstrates how to create a custom Divi gallery module using the Divi Builder API. The code example registers a new module with the Divi Builder, adds custom settings, and renders the module’s output.
function wpsnippets_custom_divi_gallery_module() {
if ( class_exists('ET_Builder_Module')) {
class ET_Builder_Module_Custom_Divi_Gallery extends ET_Builder_Module {
public $slug = 'et_pb_custom_divi_gallery';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => '',
'author' => '',
'author_uri' => '',
);
public function init() {
$this->name = esc_html__( 'Custom Divi Gallery', 'et_builder' );
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
$this->advanced_setting_title_text = esc_html__( 'New Gallery Settings', 'et_builder' );
$this->settings_text = esc_html__( 'Gallery 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 for your gallery', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'images' => array(
'label' => esc_html__( 'Images', 'et_builder' ),
'type' => 'multiple_images',
'option_category' => 'basic_option',
'description' => esc_html__( 'Select images for your gallery', 'et_builder' ),
'toggle_slug' => 'main_content',
),
);
}
public function render( $attrs, $content = null, $render_slug ) {
$title = $this->props['title'];
$images = $this->props['images'];
ob_start();
?>
<div class="et_pb_custom_divi_gallery">
<h2><?php echo esc_html( $title ); ?></h2>
<div class="gallery-images">
<?php foreach ( $images as $image ) : ?>
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
<?php endforeach; ?>
</div>
</div>
<?php
return ob_get_clean();
}
}
new ET_Builder_Module_Custom_Divi_Gallery;
}
}
add_action( 'wp_loaded', 'wpsnippets_custom_divi_gallery_module' );
This code example demonstrates how to create a custom Divi gallery module using the Divi Builder API. The ET_Builder_Module_Custom_Divi_Gallery class extends the ET_Builder_Module class and defines the module’s settings and rendering logic. The get_fields() method defines the module’s settings fields, and the render() method outputs the module’s HTML markup.
Example 2: Adding Custom CSS to the Divi Gallery Module
This use case demonstrates how to add custom CSS styles to the Divi gallery module. The code example enqueues a custom CSS file and applies styles to the gallery module.
function wpsnippets_custom_divi_gallery_module_css() {
wp_enqueue_style( 'custom-divi-gallery-module', plugin_dir_url( __FILE__ ) . 'custom-divi-gallery-module.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_custom_divi_gallery_module_css' );
This code example enqueues a custom CSS file custom-divi-gallery-module.css using the wp_enqueue_style() function. The CSS file should be placed in the same directory as the code file. You can add custom CSS styles to the file to modify the appearance of the Divi gallery module.
Example 3: Modifying the Divi Gallery Module Output
This use case demonstrates how to modify the output of the Divi gallery module using a filter hook. The code example modifies the gallery module’s HTML markup.
function wpsnippets_modify_divi_gallery_module_output( $output, $module, $attrs ) {
if ( 'et_pb_custom_divi_gallery' === $module->slug ) {
$output = str_replace( '<h2>', '<h2 class="custom-gallery-title">', $output );
}
return $output;
}
add_filter( 'et_builder_render_module_content', 'wpsnippets_modify_divi_gallery_module_output', 10, 3 );
This code example uses the et_builder_render_module_content filter hook to modify the output of the Divi gallery module. The wpsnippets_modify_divi_gallery_module_output function checks if the module is the custom Divi gallery module and replaces the <h2> tag with a modified version. You can modify the output HTML markup as needed within the function.