How to Make Divi Social Media Icons Open in New Tab


If you’ve ever built a website with the fantastic Divi theme, you’ll know how flexible and easy to use it is. However, sometimes you need to make adjustments beyond what is available in the Divi Options/Theme Customiser, and for that Divi allows you to paste in custom code to make even more extensive changes. One such change that comes up frequently is the modification to allow the social media icons, displayed in either the header or footer, to open links in a new window/tab.

Why Should Social Media Icons Open in a New Tab?

It may not be obvious at first, but it’s hugely important to have any external links (i.e. links that point to external websites) open in a new window or tab. The main reason is that you want to keep visitors on your website wherever possible: if a user clicks on an external link that doesn’t open in a new tab, once they close that tab they won’t be able to get back to your website without typing your web address in again. It may even be that someone found you through some convoluted combination of clicks via third party websites and now have no idea what your web address was!

In any case, it’s standard practice to open these links in a new tab, so it’s surprising that Divi doesn’t allow this functionality ‘out of the box’. Luckily there’s a quick fix. All you need to do is apply a bit of code which will look for the social media links and automatically set them to open in a new tab:

  1. Login to your WordPress admin
  2. Hover over ‘Divi’ and click ‘Theme Options’
  3. Click ‘Integrations’
  4. Scroll down to ‘Add code to the < body > of your blog’ and in the box paste the following code:

<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(".et-social-icon a").attr('target', 'blank');
});
</script>

That’s it! See, we said it was a quick fix :).

Looking for more tips on Divi social icons – check out more social media icon fixes here.