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

30 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:

  8. Rolando

    I’d prefer to put host the social icons that I will add to my footer on my server, not a third-party. Where are the actual social icon images in Divi stored? Or can I create an icon and just place it on my server and use that path to pull the image?

    Reply
    • Cory Jenkins

      By default they are icon fonts and not images.

  9. Sarah

    For the love of God, Elegant Themes. ADD the instagram icon to the DIVI theme!!! Your techs give us a work around to add an Instagram icon, then you update the theme, then something goes wrong. The Instagram icon either doesn’t work or it disappears altogether. This has happened 4 TIMES in 5 months. MILLIONS OF PEOPLE USE INSTAGRAM. You’re charging your customers to use this theme – save EVERYONE time and frustration and just build in the instagram icon!!

    Reply
    • Erika Stauffer

      Sarah, that’s how I feel about Pinterest. I don’t know how to code so I’m stuck without an icon to my biggest traffic driver until I’m ready to pay someone to do it for me.

  10. Kevin

    Hi Corey. One of the most infuriating point in web development for me is that I am not good at code scripting csss code or similar as that is really why you are the experts.

    Surely with such advanced tech skills which you have a simple plug is much easier, avoids having to create a child theme and for beginners is a must.

    To add even a popular list of social media icons in the divi header and footer area is not asking too much.

    Reply
  11. Brittany Martincic

    Hi Cory,

    I followed the tutorial step by step and it did not work. Can you please advise.

    Reply
  12. Laura

    Hi! Thanks!
    How to make it work on mobile?

    Reply
  13. Neil John Dan Fedillaga

    This is an awesome tutorial! Although many WordPress users especially bloggers and business owners don’t have the basic web development skills, this might be a very good and easy well-documented tutorial but this is still way to hard to accomplish for most. It would be nice if you can make a plugin for this.

    Reply
  14. ykm1961

    This is a really good tutorial . 🙂

    Reply
  15. ErnestPH of radiocastvps

    Hey Cory!

    I have to say that this tutorial is much cleaner to implement. I saw some other tricks where you have to override the existing codes but this one is the best so far.

    Thanks!
    ErnestPH

    Reply
  16. Will

    Thank you

    Reply

Submit a Comment

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


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.