How To Add More Social Media Icons to Divi’s Header and Footer

**Video Included!**

Divi provides a tremendous amount of capabilities out of the box, but often we need to find ways to extend or improve upon what is provided by default.

In this particular case a client asked to add Yelp along side the other social media share icons showing in their secondary header and footer. By default, Divi offers Facebook, Twitter, Google plus and RSS, which can be toggled on and off in the theme Options. Since Yelp isn’t available in the Theme Options and isn’t part of the standard Divi icon font list I had to seek out an alternative method which opened up a huge range of options… enter Font Awesome.

For those of you who aren’t familiar with Font Awesome, it is a resource library of hundreds (almost a thousand) of free vector icons and logos that can be easily enqueued for use in websites. These icons can then be placed in web pages, posts, inside navigation menus and in this particular case along side the default Divi social media icons in the header and footer.

Sounds pretty cool, right? Let’s get started.

 

First and foremost you will need a child theme for your site so that the changes we are going to make aren’t overridden by a Divi theme update. I am not going to go into full detail of how to create a child theme in this post, but there are many options out there like Divi Space’s Child Theme Builder or you can refer to this post here: https://aspengrovestudios.com/everything-you-need-to-know-about-using-a-child-theme-with-wordpress-and-divi/

 

Now that we have a child theme we need to create an “includes” folder via FTP or cPanel and place within it the “social_icons.php” file from the Divi theme. To do this, extract the Divi theme file downloaded from the Elegant Themes Website, locate the “includes” folder and “social_icons.php” file and then upload it to the “includes” folder of your child theme via FTP or cPanel. The final structure will look like this: wp-content > themes > your-child-theme > includes > social_icons.php

 

Next, let’s enqueue the Font Awesome Free CDN library into our Divi Site. To do this go to Divi >> Theme Options >> Integration and place the below script in the “Add code to the < head > of your blog” section

 

  • Google+
  • Facebook
  • Twitter
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">

You are now ready to use Font Awesome on your site. That was easy, right? Now head on over to the free font awesome library and locate/click on the icon you are wanting to use… we will come back to this momentarily https://fontawesome.com/icons?d=gallery&m=free

Let’s now navigate back over to the social_icons.php file we uploaded into our child theme earlier and get to work there. As mentioned the client I was working with requested Yelp integration, so I am going to use that as an example here. You can follow this same process using any of the Font Awesome icons. Below you will see the code I used and there are two areas that you will have to pay attention to: the url leading to the desired social media page of your choice and the Font Awesome icon class. Paste this . code right before the closing </ul> tag and then change accordingly:

 

<li class="et-social-icon"><a href="https://www.yelp.com/"><i class="fab fa-lg fa-yelp"></i></a></li>
  • Google+
  • Facebook
  • Twitter

Below is a breakdown of the code. You will change the URL and individual icon class according to your needs:

 

  • Google+
  • Facebook
  • Twitter

To find the individual icon class, head on over to Font Awesome, search for and click on the desired icon and then copy the unique image class (like fa-yelp) as seen in the image below:

 

Now that we have completed these steps (and possibly cleared the browser cache) your new social media icon linked to a URL of your choice should now be active as seen in the image below! You can duplicate the code in social_icons.php to set multiple custom icons of your choice.

 

  • Google+
  • Facebook
  • Twitter

Video Tutorial

Let us know how you utilized this tutorial and feel free to leave any questions or comments you may have below:

Cory Jenkins

I am a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.

Previous post
Next post

16 Comments

  1. Ken Stuczynski

    For those of us who don’t use child themes, a plugin with this functionality would be nice.

    Reply
    • Cory Jenkins

      Thanks ken, we will definitely look into this as an option 🙂

  2. Kimberly

    Ugh! This process is the bane of my existence. I’ve honestly spent hours trying to sort this to no avail. Whatever I do, the site doesn’t seem to recognise what I have going on through the PHP file on the child theme, and I’m so sick and tired of trying. I have no more patience for this. Programming is not my forte, and this method seems well beyond my skillset to troubleshoot. Getting this email today has just aggravated me further that I still can’t manage to sort it. Divi, why am I limited to 4 social media icons? People have been demanding a fix on this for years, seriously, I’ve been Googling to try to sort this since the beginning of the year!

    Reply
    • Cory Jenkins

      hi Kimberly, we certainly did not mean to aggravate you, we are simply trying to help fellow Divi users. It sounds like perhaps your theme isn’t being enqueued properly or perhaps the scoial_icons.php isn’t located within the “includes folder. If you want to send me an email with your login credentials I would be more than happy to take a look for you 🙂 cory@divi.space

      Thanks!

    • Cory Jenkins

      Hi Scott, yes but then you are limited to Divi’s library of icons, which doesn’t include yelp for example.

  3. Benny

    Hey Cory, how do I enqueue the Font Awesome 5 in my functions. The way I did it with Version 4 (see code) doesn’t seems to work with Awesome 5. Am I missing something?

    // FONTAWESOME 4 INTEGRATION
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
    function enqueue_load_fa() {

    wp_enqueue_style( ‘load-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css’ );

    }

    Reply
    • Cory Jenkins

      hi benny, I would recommend the method I use in this tutorial that requires no code in functions.php… I believe this is an older method you are using

  4. Chris Pervelis

    Hi Cory,

    Great post, but somehow its not working for me either. I followed all your steps and even just copying your code directly with no alteration…nothing. Any guesses?

    Reply
    • Cory Jenkins

      Hello, the other commenter that had trouble is dealing with another section not relevant to this tutorial (the sidebar widget). It is hard for me to tell why it is not working on your end but a few things to make sure of are that you have cleared your cache, that the social_icons.php file is in a folder named “includes” and that you are not missing any closing tags in the copied code. If you want to send me login creds to the site I can take a quick look… cory@divi.space

      Thanks!

    • Chris Pervelis

      I sent you my credentials. Thanks for any help in advance.

  5. Erling McCracken

    Brilliant piece Cory, well done it worked for me. Thank you

    Reply
  6. Marmop

    Hi Corey, I have closely followed you instructions to add a linked logo to the header and footer but no matter what I do: it does not seem to appear? Could you help me out and have look? Not sure what I’m doing wrong…. Thanks

    Reply
    • Cory Jenkins

      Hello there, this could be due to a number of things. If you want to shoot me an email with your website credentials I can take a closer look. cory@divi.space

  7. Jan

    Hello,
    great tutorial! Worked like a champ. Thanks! I would like to a new tab be opened when clicking on the social media icon. How can this be done?
    Many Thanks!

    Reply
    • Cory Jenkins

      Hello, for this use can use the blank target attribute:

Submit a Comment

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