• Facebook Icon Link
    • Instagram Icon Link

    How to Add Social Media Icons to Divi.


    add social media icons to divi graphic

    Tutorial Overview.

    This tutorial will explain how to add and edit social media icons in the Divi theme, how to add social media icons with Divi Booster and FontAwesome, how to install Divi Booster and will provide full code examples. I will also explain how to add social media links and icons to the secondary menu bar and to the footer of your Divi site.

    If your secondary menu bar is not visible, go to Appearance > Customize in the admin sidebar. Click on Header & Navigation and then Header Elements. Select the box next to Show Social Icons and they will appear in the secondary menu bar.

    Quickies.

    Is Social Media Important to My Website?

    I cannot overstate the importance of social media marketing for the success of your website. Using your social media connections on your website will help boost SEO, increase traffic, and help target your audience among many other benefits. Divi is an extremely popular WordPress theme but it only comes with three social media icons out of the box: Facebook, Twitter, and Instagram. If you are using social media correctly, you will need more than these three social media icons on your website.

    divi theme ad

    How to Edit the Default Social Media Links in Divi.

    1. Login to the WordPress Dashboard.
    2. Click on Divi in the admin sidebar.
    3. Scroll down a bit and you will see the social media controls.
    4. You can turn them on and off here and enter the URL’s for each account.

    How to Add Social Media Icons to Divi.

    There are a couple of ways to add social media icons to your WordPress website if you are using the Divi theme. You can either edit the code or use a plugin. I will show you how to do it both ways.

    How to Add Social Media Icons to Divi with a Plugin.

    This is the easier of the two options that I am going to cover. There are a few plugins out there that will add social media icons to the Divi theme. The one that I have used and like the most is Divi Booster. This plugin has a ton of capabilities other than what I am going over in this post so check it out here: Divi Booster. The plugin is about 20 bucks but it is more than worth it. I would pay 20 bucks just for the social media part! Ok, go buy the plugin already! Once you download the plugin you need to install it on your website.

    divi booster banner

    How to Install the Divi Booster Plugin in WordPress.

    You must have the Divi theme for this plugin to work.

    1. Purchase and download the plugin. This file should be in .zip format.
    2. Login to the WordPress Dashboard.
    3. Go to: Plugins > Add New > Upload Plugin.

    upload wordpress plugin

    1. Upload the .zip file.
    2. Activate the plugin.

    install divi booster

    How to Add Social Media Icons with Divi Booster.

    1. Once you have installed and activated Divi Booster go to Divi > Divi Booster in the admin sidebar.

    divi booster menu

    1. Go to Site-wide Settings > Icons and enter your links.

    divi booster social media settings

    1. Save your changes

    How to Edit Social Media Icons in Divi Programmatically with Font Awesome.

    You should never edit the core files in any theme or in WordPress. You should always use a Child Theme to do this. If you need to make a child theme, check out this tutorial: How to make a WordPress Child Theme.

    1. Create a new folder in the child theme and name it includes.
    2. Copy the social_icons.php file from your Divi theme. Path: Divi > includes > social_icons.php
    3. Place the social_icons.php file in the includes folder you just made in your child theme. Path: YourChildTheme > includes > social_icons.php
    4. Go to the Font Awesome website and get a CDN link.

    It will look something like this:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOBxxxb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
    
    1. In the WordPress Dashboard, go to Divi > Theme Options > Integration
    2. Add your Font Awesome CDN link to the area labeled Add code to the < head > of your blog.
    3. Save your changes.
    4. Open the social_icons.php file that you put in your child theme in a text editor.

    The code in this file will look like this:

    <ul class="et-social-icons">
    
    <?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-facebook">
    		<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    <?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-twitter">
    		<a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    <?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-google-plus">
    		<a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    <?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
    <?php
    	$et_rss_url = '' !== et_get_option( 'divi_rss_url' )
    		? et_get_option( 'divi_rss_url' )
    		: get_bloginfo( 'rss2_url' );
    ?>
    	<li class="et-social-icon et-social-rss">
    		<a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
    			<span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    
    </ul>
    
    
    1. Add the following code to the above file. You will need to add this code between the two icons where you want your new icon to appear. I want my new icon to appear after the Facebook icon so that is where I put it in the code. I am going to use Reddit as an example.
    <li class="et-social-icon"><a href="https://www.reddit.com/"><i class="fab fa-reddit"></i></a></li>
    

    There are two parts of this piece of code to pay attention to:

    URL: This is the URL to the social media page you want this icon to link to. If you want this icon to link to your Reddit account then you need to put your Reddit URL here.
    class: This is the Font Awesome icon class. Go to Font Awesome to find the icon you want to use and copy the class. Replace the fa-reddit class with the one you want to use.

    Here is a Full Example of the Code.

    <ul class="et-social-icons">
    
    <?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-facebook">
    		<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    
    <li class="et-social-icon"><a href="https://www.reddit.com/"><i class="fab fa-reddit"></i></a></li>
    
    <?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-twitter">
    		<a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    <?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
    	<li class="et-social-icon et-social-google-plus">
    		<a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
    			<span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    <?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
    <?php
    	$et_rss_url = '' !== et_get_option( 'divi_rss_url' )
    		? et_get_option( 'divi_rss_url' )
    		: get_bloginfo( 'rss2_url' );
    ?>
    	<li class="et-social-icon et-social-rss">
    		<a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
    			<span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
    		</a>
    	</li>
    <?php endif; ?>
    
    </ul>
    
    1. Save your changes.
    2. Go to the front of your website, clear your browser cache, and you will see the new icon in the secondary header and the footer.

    SiteGround Web Hosting Banner

     

    Additional Posts.

    2 comments
    1. Diseño web Sevilla
      Diseño web Sevilla
      July 29, 2020 at 10:18 am

      Thanks. Only a question. In my web nosunelanube.com the social icons have rel= dofollow. How can I put as nofollow.

      Reply
      • Tyler Norquist
        Tyler Norquist • Post Author •
        July 29, 2020 at 11:56 pm

        Put it in the anchor tag like this: <a href=”https://www.reddit.com/” rel=”nofollow” target=”_blank”>

        Reply
    Leave a Reply

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

    Pin It on Pinterest

    Share This