Please note: With tthe release of Divi 4, you can now easily add social media icons using the Theme Builder.  However, if you are still using prior versions of Divi, or still using the Divi’s basic header, then tutorial is for you.

Let’s face it, in today’s digitally driven world, social media is important. And right out of the box, Divi let’s you add some of the major ones, but not all. But never fear, adding additional ones is possible. There’s even a plugin, Divi Booster, that’ll help make the process an easy one. But don’t worry, if you’d rather spend the extra time than a few extra dollars on a plugin, then I will show you how to add the social media icons manually too.

As with most of my tutorials, there is a video on my YouTube Channel if you’d rather watch it. So without further ado, here’s the video (or you can scroll past it and read the instructions).

Using Divi Booster to Add Social Media Icons

This is what I like to call the “easy way.” Instructions for the hard (well, harder) way are down below. Divi Booster is a Divi plugin that just makes your life as a website developer easier. It adds about 50 functions to the already impressive Divi WordPress theme. It does cost a bit ($29), but it adds so many functions the cost is well worth it. You can purchase it here (not my site). Let’s get to the instructions.

(The following instructions are assuming you’ve already purchased Divi Booster, installed and activated it.)

Step 1: Under the Divi link on the left hand side, click on Divi Booster to bring up the settings page (can also do this from the plugin page).

Step 2: Click on “Site-wide Settings” and then “Icons”.

Step 3: Check the box for “Add more social media icons (enter URL)”.

Step 4: Add your social media website links in the appropriate boxes.

Step 5: If you want them to open in a new tab, check the “Open social media icon links in a new tab” box.

Step 6: Save changes.

That’s it. For instructions on how to do it manually, look below. Or watch the video above. (choices, choices, choices …)

Adding Social Media Icons Manually

Step 1: Go to Theme Options and enable the icons you want (i.e. Facebook, Twitter, Google+) and enter in the correct URL in the provided fields. Save changes.

Step 2: Go to Theme Customizer > Header & Navigation > Header Elements and make sure the Show Social Icons box is checked. Save changes.

Step 3: To add other icons not listed (i.e. Pinterest, YouTube). Add the social_icons.php to your child theme. If you do not have a child theme, you will need one. See this page for more information.

Step 4: Go to Appearance. In the right hand corner, make sure under Select Theme to Edit that your Divi child theme is selected. Under Templates, click on social_icons.php.

Step 5: Copy the code that starts with  <? php if ( 'on' == et_get_option … and ends with<--?php endif; ?-->. It should be about 7 lines.

Step 6: Paste what you copied where you want the icon to go (i.e. in between Facebook and Twitter).

Step 7: Now change the icons to the ones you want. You will find a list of the social media icons fonts that comes with Divi here (scroll down to bottom). For instance, if you copied the Facebook icon in step 5 above, and you want to change it to YouTube, then replace the word Facebook with the word Youtube.(except in the line that starts with <a href=). We’ll do that in Step 8.

Step 8: Look for the line that starts with < a href= and in between the quotation marks you’ll want to enter your social media link. So it will look like this. <a href="http://www.yourSocialMediaSiteHere.com" class="icon"></a>

Step 9: Click the Update File button.

Opening Icons In New Tab

Step 10:  In the following code <a href="http://www.yourSocialMediaSiteHere.com" class="icon"></a> add target=”_blank” between the website and the class so it looks like this: <a href="http://www.yourSocialMediaSiteHere.com" target="_blank" class="icon"></a>

Step 11: Click the Update File button.

That’s it. You should have now have social media icons on the top bar of your page.