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!


Posted

in

by

Comments

30 responses to “Opening your Divi Header and Footer icons in a new window.”

  1. Lukas Avatar

    Not working for me 🙁

    1. Jonathan Avatar
      Jonathan

      Hi Lukas

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

      Regards

      1. Lukasz Avatar
        Lukasz

        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

        1. Lukasz Avatar
          Lukasz

          Done by editing includes/social_icons.php

          Code to add : target=”_blank”

          1. Jonathan Avatar
            Jonathan

            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. angie moyes Avatar

            brilliant – worked best for me too!

        2. Jonathan Avatar
          Jonathan

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

          1. Pablo Avatar
            Pablo

            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. Jonathan Avatar
            Jonathan

            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. Pablo Avatar
            Pablo

            Oh I see, thank you very much, I will contact Elegant Market to find out.

        3. Joe Avatar
          Joe

          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.

  2. Gray Avatar

    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. Jonathan Avatar
      Jonathan

      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.

  3. Siyabonga Avatar

    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.

  4. Lois Avatar

    Excellent!

  5. Katrine Avatar

    Thank you thank you thank you!!!

    This works, and I’m so gratefull.

  6. John Avatar

    Good work and thank you!

  7. Emad Alwari Avatar

    Use this code 100% working an tested.

    in the integration – body code:

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

  8. Mario Bellino Avatar

    Sometimes the solution is actually quite simple. Thank you!

  9. Daniel Berriault Avatar
    Daniel Berriault

    Thanks, works perfectly.

  10. Jim Monkhouse Avatar

    Thanks for this, you made it really easy!

  11. Muhamamd Avatar

    Thanks Jonathan, this still works in 2018!

    Much appreciated.

  12. Elisandro Borges Avatar
    Elisandro Borges

    It worked for me. Thank you, Jonathan!

  13. Tim Avatar
    Tim

    This is awesome thank you!

  14. Andres Avatar
    Andres

    Thank you! It worked great!

  15. Atilla Avatar

    Worked 🙂 Thank you!

  16. Atilla Avatar

    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!

  17. Charlie Sasser Avatar

    Works great for me. Thanks.

    I do think it tries to open the RSS Feed twice since it opened in a new tab anyway. But it still works. 🙂

  18. Sandra Levin Avatar

    Thanks so much Jonathan, exactly what I needed for my clients site.

Leave a Reply to JoeCancel reply

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