Opening your Divi Header and Footer icons in a new window.

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!

Filed under: Divi, WordPressTagged with: ,

15 Comments

    • Hi Lukas

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

      Regards

      • http://aga.marketingszeptany.top/

        i changed to

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

        but still dont work

        • Done by editing includes/social_icons.php

          Code to add : target=”_blank”

          • 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.

          • brilliant – worked best for me too!

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

        • 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

    • 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. Thank you thank you thank you!!!

    This works, and I’m so gratefull.

  4. Good work and thank you!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website