Are you struggling to add additional social media icons to your Divi?

Following on from my previous post about opening Divi social media icons in a new tab, it reminded me that another shortfall with the awesome Elegant Themes Divi is the limited number of predefined social media links it offers in the header and footer of WordPress website.

By default, you are able to link to your Facebook, Twitter, Google+, Instagram accounts and RSS feed.  Back in October 2018, Google shut down its consumer version of Google+, so this could be used to link to an alternative social media platform using a little bit of coding – I’ll come to that shortly.  Divi already has 9 additional social media icons built into the theme, these are:

  • Pinterest
  • LinkedIn
  • Tumblr
  • Skype
  • Flikr
  • Myspace
  • Dribbble
  • YouTube
  • Vimeo

Solution #1 Replace a default Divi social icon with another predefined icon

With a little bit of code editing, you could easily replace the default Google+ icon with the built-in LinkedIn icon.

Solution #2 Replace a default Divi social icon with your own

To do this, simply pick one of the built-in icons you aren’t using and add replace that with your own social media icon and link. In this example, we will replace the default RSS icon with an eBay icon and link.

.et-social-rss a.icon:before { 
background: url('https://yourwebsite.co.uk/icons/ebay.svg'); 
content: '' !important; 
display: inline-block !important; 
background-repeat: no-repeat;
}
.et_pb_social_media_follow .et-social-rss a {
margin-bottom: -9px;
}
.et_pb_social_media_follow .et-social-rss-plus a.icon:before { 
display: block !important;
height: 16px;
width: 16px;
margin: 8px;
}
#top-header .et-social-rss a.icon:before {
height: 14px;
width: 15px;
margin-bottom: -1px;
}
#main-footer .et-social-rss a.icon:before { 
height: 24px; 
width: 24px; 
margin-bottom: -1px;
}

Copy the CSS code above and paste this into the Additional CSS section of the Divi theme. Remember to upload your new social media icon to the website and amend the image URL accordingly.

To replace an alternative default built-in social icon, you’ll need to replace each instance of .et-social-rss with the class name of the icon you are changing.

Solution #3 Manually adding extra social media icons to Divi

With no built-in option to add or change more than 5 social media icons, this method of adding extra social media profiles requires you to be using a Divi child theme. Not using a Child Theme, check out our post on Creating a Divi Child Theme, or download our free blank Divi Child Theme, upload it via your WordPress dashboard and activate it.

For this example, we will assume you are already using the built-in links for Facebook, Twitter, Instagram and have amended the Google+ and RSS feeds using a combination of the previous two solutions and you want to add an icon and link to your TikTok account.

  1.  Using an FTP client or your hosting file manager navigate to your Divi Child Theme folder and create a new sub-folder named includes
  2. Using an FTP client or your hosting file manager copy wp-content/themes/Divi/includes/social_icons.php and place the copy in the new sub-folder you previously created.
  3. Using an FTP client or your hosting file manager open the social_icons.php file
  4. At the end of the file, just before the closing </ul> tag, page the following code
<ul>
   <li class="et-social-icon et-social-tiktok"><a class="icon" href="https://www.tiktok.com/@thesmcltd/‎">
      <img src="https://yourwebsite.co.uk/icons/tiktok.svg" alt="TikTok" />
      <!--?php esc_html_e( 'TikTok', 'Divi' ); ?--></a>
   </li>
</ul>
  1. Save the social_icons.php file

Want to link to another social account, simply replace tiktok and TikTok with the name of the social media network you want to link to, also remember to replace the full link and upload the appropriate social media icon.


Please be advised that this post contains affiliate links.


How to Add More Social Media Icons

Read Time: 3 min
X
X