~Just the Facts~

ADD SOCIAL MEDIA ICONS TO DIVI

written by Divi Dude

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 …)

Add Social Media Icons with Divi Booster

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.

Add Social Media Icons to Divi

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.

Change Social Media Icons in Divi

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.


Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Build Better Websites

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Subscribe

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Favorite WordPress Theme

Divi WordPress Theme

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission. Thank you for your support.

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This