Divi social media icons

The Divi theme is a popular WordPress theme that includes a built-in feature for adding social media icons to your website. These icons can be displayed in the header, footer, or anywhere else on your site using the Divi Builder.

To add social media icons to your Divi website, you can use the et_get_option() function provided by the Divi theme. This function retrieves the value of a specific option from the Divi theme settings.

Here’s an example code snippet that demonstrates how to retrieve and display social media icons using the et_get_option() function:

<?php
function wpsnippets_display_social_icons() {
    $social_icons = et_get_option( 'divi_social_networks' );

    if ( $social_icons ) {
        echo '<ul class="social-icons">';

        foreach ( $social_icons as $network ) {
            echo '<li><a href="' . esc_url( $network['url'] ) . '"><i class="fab ' . esc_attr( $network['icon_class'] ) . '"></i></a></li>';
        }

        echo '</ul>';
    }
}

In this code snippet, we define a custom function called wpsnippets_display_social_icons(). Inside this function, we first retrieve the social media icons data using the et_get_option() function with the divi_social_networks option.

Next, we check if the social icons data exists. If it does, we loop through each social network and output the corresponding HTML markup for the icon. We use the esc_url() and esc_attr() functions to sanitize the URL and icon class values, respectively.

Finally, we close the <ul> element and complete the function.

To display the social media icons on your website, you can call the wpsnippets_display_social_icons() function in your theme files or using a shortcode.

Note: This code assumes that you have already set up the social media icons in the Divi theme settings. You can do this by going to “Divi > Theme Options” in your WordPress admin dashboard and adding the desired social media profiles.

Examples

Example 1: Adding custom social media icons to the Divi theme header

This use case demonstrates how to add custom social media icons to the header of a Divi theme using a child theme.

function wpsnippets_add_custom_social_icons() {
    $social_icons = array(
        'facebook' => array(
            'url' => 'https://www.facebook.com/your-facebook-page',
            'icon' => 'fab fa-facebook-f',
        ),
        'twitter' => array(
            'url' => 'https://www.twitter.com/your-twitter-page',
            'icon' => 'fab fa-twitter',
        ),
        'instagram' => array(
            'url' => 'https://www.instagram.com/your-instagram-page',
            'icon' => 'fab fa-instagram',
        ),
    );

    return $social_icons;
}
add_filter( 'et_pb_font_icon_args', 'wpsnippets_add_custom_social_icons' );

This code adds custom social media icons to the Divi theme header by hooking into the et_pb_font_icon_args filter. The function wpsnippets_add_custom_social_icons returns an array of social media icons, each with a URL and an icon class. The icons are then displayed in the header using the Font Awesome icon library.

Example 2: Changing the order of social media icons in the Divi theme footer

This use case demonstrates how to change the order of social media icons in the footer of a Divi theme.

function wpsnippets_change_social_icons_order( $icons ) {
    $new_order = array( 'facebook', 'twitter', 'instagram' );

    $ordered_icons = array();
    foreach ( $new_order as $icon ) {
        if ( isset( $icons[ $icon ] ) ) {
            $ordered_icons[ $icon ] = $icons[ $icon ];
        }
    }

    return $ordered_icons;
}
add_filter( 'et_pb_font_icon_args', 'wpsnippets_change_social_icons_order', 20 );

This code changes the order of social media icons in the Divi theme footer by hooking into the et_pb_font_icon_args filter with a priority of 20. The function wpsnippets_change_social_icons_order takes the existing array of icons as an argument and returns a new array with the icons in the desired order.

Example 3: Adding custom social media icons to the Divi theme sidebar

This use case demonstrates how to add custom social media icons to the sidebar of a Divi theme using a custom widget.

function wpsnippets_add_custom_social_icons_widget() {
    register_widget( 'WPSnippets_Custom_Social_Icons_Widget' );
}
add_action( 'widgets_init', 'wpsnippets_add_custom_social_icons_widget' );

class WPSnippets_Custom_Social_Icons_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpsnippets_custom_social_icons_widget',
            'Custom Social Icons',
            array( 'description' => 'A widget for displaying custom social media icons.' )
        );
    }

    public function widget( $args, $instance ) {
        // Widget output code here
    }

    public function form( $instance ) {
        // Widget form code here
    }

    public function update( $new_instance, $old_instance ) {
        // Update widget code here
    }
}

This code adds a custom social media icons widget to the Divi theme sidebar. The wpsnippets_add_custom_social_icons_widget function registers the custom widget. The WPSnippets_Custom_Social_Icons_Widget class extends the WP_Widget class and defines the widget’s constructor, widget output code, form code, and update code.