A few weeks ago I released the Atlantic Wave Social Media plugin for Divi. The plugin extends the built in Divi header and footer social media icon set by adding up to 13 additional social media icons.

A customer recently asked me how it would be possible to open the social media links in a new window. Now I will probably release an update to the plugin to add this functionality, but for now I thought it would be a good idea to share a simple way of being able to do this. Even if you don’t use my plugin, being able to set your social media icons to open in a new window is a good practice.

By adding a little piece of JavaScript to your Integration tab in the Divi Theme Options, you can set the social media icons to open in a new window.

  1. In your WP admin, select Theme Options from the Divi menu
  2. Click on the Integration tab
  3. Make sure ‘Enable body code’ is enabled.
  4. Scroll down to the section where it says ‘Add code to the <body> (good for tracking codes such as google analytics)’
  5. Add the JavaScript code snippet below. If you already have some JavaScript there, you can just put this inside the existing <script> tags. If there is nothing there then make sure to wrap the JavaScript with <script> tags.
jQuery(document).ready(function($){
    $('.et-social-icon .icon').each(function(){
        $(this).attr('target', 'blank');
    });
});

And there you go, all your social media icons should now open in a new window!

Buy my Divi Plugins from
Elegant Marketplace.

Join the conversation

30 Comments

    1. Hi Lukas

      Are you able to post a url of the site in question so that I can see what’s happening?

      Regards

        1. Done by editing includes/social_icons.php

          Code to add : target=”_blank”

          1. Yes, you could do that as well, just remember to make sure you do this in a child theme, otherwise when Divi updates you will loose this change.

        2. Have you wrapped the JavaScript code in tags? If you have then there might be another JavaScript error elsewhere, blocking this JavaScript.

          1. Hi Jonathan,

            great post. I fixed the issue!

            I have a different problem. I installed the child theme I downloaded it from Elegant Market. It includes already all the SM icons and you can activate them from backend, however, in a WP multisite, when in the site to customize I go to Divi and when i try to enter the Theme Options nothing shows. How can i fix this?

          2. Hi Pablo

            It’s possible that the child theme does not support multisite. I’m having a similar problem with one of my plugins, that I need to update to work on multisite. You’d have to contact the theme developer to find out.

        3. For me I had to add .find(‘a)
          Previously:
          jQuery(document).ready(function($){
          $(‘.et-social-icon .icon’).each(function(){
          $(this).attr(‘target’, ‘blank’);
          });
          });

          needed to be

          jQuery(document).ready(function($){
          $(‘.et-social-icon .icon’).each(function(){
          $(this).find(‘a’).attr(‘target’, ‘blank’);
          });
          });

          //adds .find(‘a’) after $(this) because most of the menus have the link as a child. this finds the child (‘a’) and adds target=”_blank” to it.

  1. The above code didn’t work for me at all Jonathan but Lukasz’s code worked better and is much cleaner.

    ‘Done by editing includes/social_icons.php

    Code to add : target=”_blank”’

    Thanks

    1. Hi Gray, I agree, Lukasz’s code is ‘cleaner’, as long as you are making a change to a child theme, and not the Divi theme. Otherwise every time Divi updates you’ll loose the change.

      This solution if for those who don’t have a child theme and just need a quick JavaScript plugin they can use in the Divi Theme options panel.

  2. Thanks, Jonathan. This reminded me, as it had been a while since I made a custom website. It worked perfectly. To those stuck, don’t forget to add the tags.

  3. Use this code 100% working an tested.

    in the integration – body code:

    jQuery(document).ready(function(){
    jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
    });

  4. One question: What would I have to add to this code, when I want to add a rel=”noopener” to the link?

    Thanks in advance!

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Updates

Join my mailing list to receive the latest news and updates from me. No spam, just one email newsletter a month.

Thank you, you have successfully subscribed.

%d bloggers like this: