Embed Divi Layouts

This Code has multipe functionalities and requires the Premium-Theme Divi.

  1. Adds a shortcode in the admin area in the Divi Library Row, displayed in a row.
  2. Enables all Divi Layouts, Designs, Sections, and Rows, to be inserted anywhere on the website.

Add to your functions.php, f.ex. through Code Snippets. Then, visit Divi > Divi Library and copy the shortcode next to the design you wish to embed.

// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');

// Add shortcode for Divi Library layouts, sections, rows, and modules
function custom_divi_design_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'id' => '',
            'type' => 'section', // Default to section if not specified
        ),
        $atts,
        'divi_design'
    );

    // Check if ID is provided
    if (empty($atts['id'])) {
        return 'Please provide the ID of the Divi design.';
    }

    // Render Divi design based on type
    ob_start();
    switch ($atts['type']) {
        case 'layout':
            echo do_shortcode('[et_pb_section global_module="'.$atts['id'].'"][/et_pb_section]');
            break;
        case 'section':
            echo do_shortcode('[et_pb_section global_module="'.$atts['id'].'"][/et_pb_section]');
            break;
        case 'row':
            echo do_shortcode('[et_pb_row global_module="'.$atts['id'].'"][/et_pb_row]');
            break;
        case 'module':
            echo do_shortcode('[et_pb_module global_module="'.$atts['id'].'"]');
            break;
        default:
            return 'Invalid Divi design type. Supported types are: layout, section, row, module.';
    }
    return ob_get_clean();
}
add_shortcode('divi_design', 'custom_divi_design_shortcode');

// Add a row in the Divi Library overview list for the shortcode
add_filter('manage_et_pb_layout_posts_columns', 'custom_divi_design_columns');
function custom_divi_design_columns($columns) {
    $columns['shortcode'] = 'Shortcode';
    return $columns;
}

add_action('manage_et_pb_layout_posts_custom_column', 'custom_divi_design_column_content', 10, 2);
function custom_divi_design_column_content($column, $post_id) {
    if ($column === 'shortcode') {
        echo '[divi_design id="' . $post_id . '" type="layout"]'; // You can change the type here if needed
    }
}

Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *