Divi Theme Social Icons

As a WordPress developer, I’ve had my fair share of experiences with hundreds of WordPress themes over the years. One of my favorite premium WordPress themes is Divi. The Divi theme has a great page builder, perfect for building landing pages and just about anything else you need to know without knowing HTML, CSS or Javascript. When our clients want a website that they can customize and make changes to, I usually suggest WordPress and Divi.

While Divi is a great WordPress theme to work with, you still need to make custom changes to get the exact look you want. One of those changes is adding social icons to the Divi theme. Preset, the Divi theme only comes with Facebook, Twitter, Google+ and RSS icons. There’s no LinkedIn, no Pinterest, no YouTube. If you want more social icons with Divi, you’ll have to add them yourself. In order to add them, we’ll need to get into your files and add some new codes. Don’t worry though, I already have the codes for you. All you have to do is copy and paste, it’s really an easy change to make.

Do you like this theme I’m working with? Check out Divi theme for WordPress.

How To Add Social Icons To Divi Theme

First, you want to go to your left hand menu and select “Appearance.” Then go to “Editor” From here, I want you to go to the right hand side files and look for the file that says social_icons.php. Please click on the file. If you don’t know code, don’t worry, I’m going to walk you through the process. Very simple.

Copy The Code Below

<?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>

The code above is your first Divi social icon, which is what’s responsible for showing the Facebook icon on your website. Below this code, you’ll see the same type of code for Twitter, Google+ and your RSS feed. The only difference in each code is the social icon that appears.

Now, in order to add a new Divi social icon to your website, you need to copy the code above and we’ll have to place this code between the Google+ social icon code and the RSS icon code.

Notice, the beginning of the code starts with <?php and the end of the code is </li>  You have to make sure you copy this “as-is” because one small missing mark will mess your code up. In fact, before you get started, open up Wordpad and copy the whole file. Copy and paste it on a blank sheet just in case, Make sure you copy the entire code on the page, top to bottom. You always want to do this just in case.

Change The Facebook In The Code To The Social Icon You Want

There’s (4) different areas in the copied code that you’ll need to change. You can look at the screenshot to see where all four are. Make sure that you only change the social platform in the code. Be extremely careful. You don’t want to erase something you shouldn’t erase, so make sure you only change what is marked.

Place Your New Divi Social Icon Code Between These Two Marks

Available Social Icons Divi Theme For WordPress

There’s several different social media icons that Divi recognizes. All you have to do is continue the process I showed you above.

.et-social-facebook
.et-social-twitter
.et-social-google-plus
.et-social-pinterest
.et-social-linkedin
.et-social-tumblr
.et-social-instagram
.et-social-skype
.et-social-flickr
.et-social-myspace
.et-social-dribbble
.et-social-youtube
.et-social-vimeo
.et-social-rss

Adding Your Social URL To The Buttons

Ok, now you’re ready to add your social URL to the buttons. Go back to the social icon php file. Let’s review the code again.

<?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>

The highlighted # will be removed and here you will place your social URL. Save and you should be all set.

For more WordPress and Divi tricks and resources, be sure to join our mailing list.