Divi social share module code

The Divi theme is a popular WordPress theme that includes a variety of modules to enhance the functionality of your website. One of these modules is the social share module, which allows you to add social sharing buttons to your posts or pages.

To add the Divi social share module to your website, you can use the following code snippet:

function wpsnippets_add_divi_social_share_module() {
    if ( function_exists( 'et_pb_social_media_follow' ) ) {
        echo et_pb_social_media_follow();
    }
}
add_action( 'wp_footer', 'wpsnippets_add_divi_social_share_module' );

This code snippet creates a custom function called wpsnippets_add_divi_social_share_module that checks if the et_pb_social_media_follow function exists (which is the function responsible for generating the social share module). If it exists, the function is called and its output is echoed to the footer of your website using the wp_footer action hook.

By adding this code to your theme’s functions.php file or a custom plugin, the Divi social share module will be displayed on your website, allowing visitors to easily share your content on various social media platforms.

Please note that this code assumes you have the Divi theme installed and activated on your WordPress website.

Examples

Example #1: Adding Custom Social Share Icons to Divi Social Share Module

This use case demonstrates how to add custom social share icons to the Divi Social Share module in WordPress using custom PHP functions and CSS.

function wpsnippets_add_custom_social_icons($icons) {
    $icons['linkedin'] = array(
        'title' => 'LinkedIn',
        'icon' => 'et-pinterest',
        'url' => 'https://www.linkedin.com/shareArticle?mini=true&url=' . get_permalink(),
    );
    return $icons;
}
add_filter('et_pb_font_icon_symbols', 'wpsnippets_add_custom_social_icons');

In this code example, we define a custom PHP function wpsnippets_add_custom_social_icons that adds a new social share icon for LinkedIn. We specify the icon title, CSS class for the icon, and the URL for sharing the current post on LinkedIn. The function is then hooked into the et_pb_font_icon_symbols filter to include the custom icon in the Divi Social Share module.

Example #2: Changing the Order of Social Share Icons in Divi Social Share Module

This use case demonstrates how to change the order of social share icons in the Divi Social Share module by modifying the array of icons.

function wpsnippets_change_social_share_order($icons) {
    $new_order = array(
        'facebook',
        'twitter',
        'pinterest',
        'linkedin',
    );
    $ordered_icons = array();
    foreach ($new_order as $icon) {
        if (isset($icons[$icon])) {
            $ordered_icons[$icon] = $icons[$icon];
            unset($icons[$icon]);
        }
    }
    return array_merge($ordered_icons, $icons);
}
add_filter('et_pb_font_icon_symbols', 'wpsnippets_change_social_share_order');

In this code example, we define a custom PHP function wpsnippets_change_social_share_order that changes the order of social share icons in the Divi Social Share module. We create a new array $new_order with the desired order of icons and iterate through it. For each icon, we check if it exists in the original $icons array, move it to the $ordered_icons array, and remove it from the original array. Finally, we merge the $ordered_icons array with the remaining icons to maintain the original icons’ order.

Example #3: Customizing the Appearance of Social Share Icons in Divi Social Share Module

This use case demonstrates how to customize the appearance of social share icons in the Divi Social Share module using CSS.

/* Custom CSS for Divi Social Share module */
.wpsnippets-custom-social-icons .et-share-icon {
    font-size: 24px;
    color: #ff0000;
    margin-right: 10px;
}

In this code example, we provide a CSS snippet to customize the appearance of social share icons in the Divi Social Share module. We target the icons using the .et-share-icon class within the container element with the .wpsnippets-custom-social-icons class. We then apply custom styles such as font size, color, and margin to modify the appearance of the icons.