Divi allows you to add social media icons with links to your profiles in the header and footer areas.
These social icon links are activated in the Divi Theme options. By default, Divi only comes with four social media icons to choose from which are Facebook, Twitter, Google+, and Instagram.
There are no built-in options to add more social media icons/links.
To add more social media icons into your header and/or footer area in Divi you will need to create a child theme to add code to the theme or use a 3rd party icon plugin.
5 steps to manually add extra social media icons to Divi
- You will need to have a child theme installed and activated. You can learn how to add a child theme in the F.A.Q. section of the Divi Child Theme page or just download a blank child theme here, upload it via your WordPress dashboard and hit activate.
- Using FTP or cPanel file manager create a new sub-folder named includes In your Divi child theme folder,
- Using FTP or cPanel file manager copy wp-content\themes\Divi\includes\social_icons.php file and paste it into the includes sub-folder you just created.
- Using FTP or cPanel file manager op wp-content\themes\Divi-Child\includes\social_icons.php file.
- At the end of the file, before the </ul> tag, paste the following code:
<li class="et-social-icon et-social-linkedin"> <a href="https://linkedin.com/yourprofileurl/" class="icon"> <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span> </a> </li>
Replace linkedin and LinkedIn with the new social network’s name, and replace the full URL with your own profile link.
- Save the file and preview your new icon on the frontend.
You can add any of the following social media icons using this method as they are included within the Elegant Themes icon set.
- tumblr
- skype
- flikr
- myspace
- dribbble
- youtube
- vimeo
If the social network is not on the list then you will need to add the icon manually using the following code instead:
<li class="et-social-icon et-social-linkedin"> <a href="https://linkedin.com/yourprofileurl/" class="icon"> <img src="https://yoursite.com/icon.png" alt="LinkedIn"> <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span> </a> </li>
Replace linkedin and LinkedIn with the new social network’s name, and replace the full URL with your own profile link.
You will also need to upload a new icon file and replace the image URL to the icon.png. Use an image that has same size & style as the other icons.
Add extra social media icons to Divi using a plugin
If you prefer not to use a child theme or get involved in editing the PHP code you can use a 3rd parry Divi plugins to add extra social media icons to your Divi header and/or footer.
Divi Icon Party
The Divi Icon Party plugin adds 40 new social media icons to Divi for use in menus, headers, and footers. Icons can be enabled or disabled using the Divi theme options.
- Includes 40 extra social media icons
- Add more social media icons in the Divi menus, headers, and footers
- Enable or disable social media icons in the Divi theme options
- Add more social media icons to the Divi Social Media Follow module
- Add clickable phone and/or email Icon
Price: $27
Developer: Divi Space
More Info: Divi Icon Party
Adding social media icons to Divi conclusion
With Divi only coming with 4 social media icons by default, the chances are that you are going to need to add more to your Divi website.
There really should be more social media icons included by default, and the Google+ one should really be removed since the platform was closed in 2019. Hopefully, a future Divi update will cover this so users do not need to edit PHP code or resort to using a 3rd party plugin.
Thanks You. I was hoping there would be a built in option to quickly add icon and a link manually in the settings, but this works until that happens.
I followed the instructions successfully. Thank you for your help
glad to hear it worked for you 🙂
I followed your steps in the c-panel. When I go to appearance>customize I see the LinkedIn and YouTube icons I added in the header. They don’t seem to be showing up on the site though when I do a preview.
Paul, I think you will need to disable Dynamic CSS in Theme Options > General > Performance.
It was working for me, but suddenly it has disappeared.
Got it back by disabling Dynamic CSS in Theme Options > General > Performance.
Thanks for the tip.
This code is not working as of today
Yes, its not working because he social network is not on the list