It's still annoying, a theme like Divi that allows you to display in the footer only Facebook, Twitter, Google+ and RSS icons... What about other social networks? Don't you want to add the Instagram icon or the YouTube icon for example? I suspect so, otherwise you wouldn't be reading this article! Indeed, it is possible to add icons in Divi's footer but not in a native way...

It will be necessary to modify the code a little with the help of a child theme. In this article, we will detail all the steps to achieve this... and you will be proud to be 😉

Also to be read: how to reveal the footer to the mouse scroll?

 

Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.

 

1 - Divi natively embeds 15 social network icons

It should be noted that Divi comes with 15 social media icons that you can include in your footer or any other place. Divi's style.css file, located in the theme directory, shows us exactly how many social media icon possibilities the theme includes by default:

 
 .et-social-facebook a.icon:before { content: '\e093'; }
 .et-social-twitter a.icon:before { content: '\e094'; }
 .et-social-google-plus a.icon:before { content: '\e096'; }
 .et-social-pinterest a.icon:before { content: '\e095'; }
 .et-social-linkedin a.icon:before { content: '\e09d'; }
 .et-social-tumblr a.icon:before { content: '\e097'; }
 .et-social-instagram a.icon:before { content: '\e09a'; }
 .et-social-skype a.icon:before { content: '\e0a2'; }
 .et-social-flikr a.icon:before { content: '\e0a6'; }
 .et-social-myspace a.icon:before { content: '\e0a1'; }
 .et-social-dribbble a.icon:before { content: '\e09b'; }
 .et-social-youtube a.icon:before { content: '\e0a3'; }
 .et-social-vimeo a.icon:before { content: '\e09c'; }
 .et-social-rss a.icon:before { content: '\e09e'; }

This means that these icons are already embedded and that it will not be complicated to use them.

 

2 - How to add icons in Divi's footer like Instagram, Pinterest, YouTube, Linkedin etc.?

In the article on the general Divi optionswe had seen how to activate Facebook, Twitter, Google+ and RSS icons for your site. To add other icons, you will have to put your hands a little bit in the code using the information seen in the previous paragraph... Nothing very complicated if you follow these steps :

  1. First of all, you're going to have to create a child theme
  2. Then, you will open the folder of your Divi theme (the original theme) to find the folder named includes.
  3. Once this folder includes located, you will copy the file named social_icons.php to paste it into your child theme (at the root)
  4. Edit this file named social_icons.php to add icons in Divi's footer. You can open it using a text editor such as Brackets or SublimText for example.
  5. For each social network you wish to add, you will need to insert the following lines, knowing that each element in red must be modified according to your needs:
  6. and-social-networks-at-your-choice"> url-of-your-profile"class="icon"> SocialNetworks','Divi'); ?

To better understand, here are the codes associated with each social network:

  • To add the Instagram icon to Divi's footer:
  • and social-instagram"> https://www.instagram.com/?hl=en"class="icon"> Instagram','Divi'); ?
  • To add the Pinterest icon to Divi's footer:
  • and-social-pinterest"> https://www.pinterest.fr/"class="icon"> Pinterest','Divi'); ?
  • To add the Linkedin icon to Divi's footer:
  • and-social-linkedin"> https://www.linkedin.com/"class="icon"> Linkedin','Divi'); ?
  • To add the YouTube icon to Divi's footer:
  • and-social-youtube"> https://www.youtube.com/"class="icon"> YouTube','Divi'); ?
  • To add the Vimeo icon to Divi's footer:
  • and-social-vimeo"> https://vimeo.com/fr/"class="icon"> Vimeo','Divi'); ?
  • And so on....

 

I want to know more about this Divi theme....

 

3 - Where to insert the code of each social network in the social file_icon.php?

You will have to insert the codes of each network imperatively between the tags

    and
. Be aware that the order in which you insert your icons will be the order in which they appear in the footer of your site.

Where to add new icons in Divi's footer

Where to add the new icons in Divi's footer? Be careful not to break the existing code

In the screenshot above, I have indicated with arrows the places where you can add the code of additional icons.

For example, if you want your new icons to be added after the RSS icon, you will need to add the code between line 35 and line 37.

As well as if you want them to appear before Facebook's, you will need to insert the code between line 1 and line 3.

In the next screenshot, I inserted the code at the end of the file, just before closing the tag :

add icons in Divi's footer

Add icons in Divi's footer, just after the RSS icon

 

4 - Last step: modify the file footer.php

For now, the code has been added for your new icons. Now we have to make them appear. For that you will have to make one last small modification:

  1. In the file of your Divi parent theme, copy the file named footer.php
  2. Paste this file into your child theme (it's the same manipulation as for the social_icons.php file)
  3. Edit this file using a text editor
  4. In line 44 (since version 3.18.2 of Divi), you will have to change the path to reach the file social_icons.php that you have just inserted in your child theme
  5. The new path will have to be "social_icons instead of "includes/social_icons
  6. To better understand, look at the screenshot below:

Divi footer icons

Now your new icons should appear in the footer of your Divi site.

Result on the Front-End side of adding a Divi icon

On the Front-End side, here is the result of adding icons

 

In conclusion....

The Divi theme is versatile and easy to modify, you've seen it, it was very easy to add icons in Divi's footer. There is always a solution when customizations are not available from the options available in the administrator part. Some other WordPress themes are much more complicated to modify - believe me - it's also one of them of why I like using Divi... If you want more tips to customize your Divi theme, I'll give you an appointment here!

 

How to add icons in Divi's footer

How to add icons in Divi's footer - Say it on Pinterest!

felis id Sed pulvinar suscipit sed justo tempus

Pin It on Pinterest

Shares
Share This