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.
- In your WP admin, select Theme Options from the Divi menu
- Click on the Integration tab
- Make sure ‘Enable body code’ is enabled.
- Scroll down to the section where it says ‘Add code to the <body> (good for tracking codes such as google analytics)’
- 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!
30 responses to “Opening your Divi Header and Footer icons in a new window.”
[…] Credit: Jonathan Bossenger […]
Not working for me 🙁
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.
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?
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.
Oh I see, thank you very much, I will contact Elegant Market to find out.
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.
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.
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.
Excellent!
Thank you thank you thank you!!!
This works, and I’m so gratefull.
Good work and thank you!
Use this code 100% working an tested.
in the integration – body code:
jQuery(document).ready(function(){
jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
});
Sometimes the solution is actually quite simple. Thank you!
Thanks, works perfectly.
Thanks for this, you made it really easy!
Thanks Jonathan, this still works in 2018!
Much appreciated.
It worked for me. Thank you, Jonathan!
This is awesome thank you!
Thank you! It worked great!
Worked 🙂 Thank you!
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!
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. 🙂
Thanks so much Jonathan, exactly what I needed for my clients site.