How to add extra social media icons to Divi

Divi allows you to add social media icons with links to your social media profiles in the header and footer areas.

These social icon links are activated in the Divi Theme Options dashboard.

By default, Divi only comes with 3 social media icons to choose from which are Facebook, Twitter, and Instagram.

You can add the Divi footer social icons and Divi header social icons via the Theme Options.

There are no built-in options to add more social media icons/links.

To add more social media icons to your default header and/or footer area in Divi you can;

• Build your Divi header and footer using the DIvi Theme Builder and add any number of social media icons
• Create a child theme and add the extra icons using PHP code – Quite a pain
• You can also use a 3rd party icon plugin – Can be buggy

1. Add extra social media icons to Divi using the Theme Builder

The introduction of the Divi Theme Builder allows you to build your Divi header and footer from scratch using the default Divi modules.

This is the easiest way to build your social media header icons if you need more than the default Facebook, Twitter and Instagram included in the default Divi header and footer.

The Divi Social Media module can easily be added to your Theme Builder header and allows you to add pretty much any social media icon that you may need.

Just navigate to WordPress Admin > Divi > Theme Builder > Add Global Header > Build Global Header and you can build your Divi header using any of the Divi modules.

The Social Media module has 51 social media and community website icons available to choose from and you can add as many as needed.

2. Steps to manually add extra social media icons to Divi

1. You will need to have a child theme installed and activated. You can learn how to add a child theme in the F.A.Q. section of the Divi Child Theme page or just download a blank child theme here, upload it via your WordPress dashboard and hit activate.
   
2. Using FTP or cPanel file manager create a new sub-folder named includes In your Divi child theme folder,
3. Using FTP or cPanel file manager copy wp-content\themes\Divi\includes\social_icons.php file and paste it into the includes sub-folder you just created.
   
4. Using FTP or cPanel file manager op wp-content\themes\Divi-Child\includes\social_icons.php file.
5. At the end of the file, before the </ul> tag, paste the following code:

   <li class="et-social-icon et-social-linkedin">
   <a href="https://linkedin.com/yourprofileurl/‎" class="icon">
   <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
   </a>
   </li>

   Replace LinkedIn and LinkedIn with the new social network’s name, and replace the full URL with your own profile link.

6. You will also need to disable the Dynamic Icons option in Theme Options > General > Performance > Dynamic Icons
7. And finally, you will need to add the CSS for each icon used in your Theme Options Custom CSS box. Use the following for each associated social icon;

   .et-social-linkedin a.icon:before {
   content: "\E09D";
   }

   To find the icon code for your added icon you can view this article and right-click on the icon to inspect its code.

8. Save the file and preview your new icon on the front end.

You can add any of the following social media icons using this method as they are included within the Elegant Themes icon set.

• Divi Facebook icon – .et-social-facebook
• Divi Twitter icon – .et-social-twitter
• Divi Pinterest icon – .et-social-pinterest
• Divi Linkedin icon – .et-social-linkedin
• Divi Tumblr icon – .et-social-tumblr
• Divi Instagram icon – .et-social-instagram
• Divi Skype icon – .et-social-skype
• Divi Flikr icon – .et-social-flikr
• Divi Myspace icon – .et-social-myspace
• Divi Dribbble icon – .et-social-dribbble
• Divi Youtube icon – .et-social-youtube
• Divi Vimeo icon – .et-social-vimeo
• Divi RSS icon – .et-social-rss

There are of course many social media websites and apps and not all of them are in the Elegant Themes icon set. Most of them are but as you can see from the list below there are a few big ones that are missing.

• WhatsApp – 2.0 Billion Active Users
• Facebook Messenger – 1.3 Billion Active Users
• WeChat – 1.213 Billion Active Users
• TikTok – 689 Million Active Users
• Telegram – 500 Million Active Users
• Snapchat – 498 Million Active Users
• Reddit – 430 Million Active Users

If the social network is not on the list then you will need to add the icon manually using the following code instead;

<li class="et-social-icon et-social-linkedin">
<a href="https://linkedin.com/yourprofileurl/‎" class="icon">
<img src="https://yoursite.com/icon.png" alt="LinkedIn">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>

Replace LinkedIn and LinkedIn with the new social network’s name, and replace the full URL with your own profile link.

You will also need to upload a new icon file and replace the image URL with the icon.png.

Use an image that has the same size & style as the other icons.

How to open Divi social media links in a new window

The social icons in Divi’s header and footer will open in the same tab by default. This is bad for UX and SEO so you may want to change them to open in a new tab. To do this you will need to add the following code into Divi > Integration > Add code to the < body > (good for tracking codes such as google analytics):

<script>
(function($) {
$(document).ready(function() {
$('.et-social-icons .et-social-icon a').attr( 'target', '_blank');
});
})(jQuery);
</script>

3. Add extra social media icons to Divi using a plugin

With the Divi Theme Builder option allowing you to build your own header and footer and the Social Media module giving you 51 icons to choose from this plugin is not as necessary as it once was. But if you want to use the default Divi header and footer and don’t want to use a child theme for coding then it can still be useful.

You can use a 3rd party Divi header plugin such as Divi Icon Party to add extra social media icons to your Divi header and/or footer.

The Divi Icon Party plugin adds 50 new social media icons to Divi for use in menus, headers, and footers. Icons can be enabled or disabled using the Divi theme options.

• Includes 50 extra social media icons
• Add more social media icons in the Divi menus, headers, and footers
• Enable or disable social media icons in the Divi theme options
• Add more social media icons to the Divi Social Media Follow module
• Add a clickable phone and/or email Icon

This product is available to buy via the Elegant Themes marketplace or via the developers’ website at Divi Space.

Buy via the Elegant Themes official marketplace;

• This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $75.
• The price includes 1 year of updates and support.
• There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
• Released under GPL license

Final thoughts on adding social media icons to Divi

With Divi only coming with 3 social media icons (now Google+ has finally been removed) by default, the chances are that you are going to need to add more to your Divi website.

Whilst using the default Divi header and footer is much easier, especially for beginners, the Theme Builder does offer a lot more freedom to add whatever you like in your header and footer. The built-in header and footer social media icons also have no easy way to make them no follow links.

There really should be more social media icons included by default, Hopefully, a future Divi update will cover this so users do not need to edit PHP code or resort to using a 3rd party plugin.