Divi Tip – Making the social links open in a new window

Divi Tip – Making the social links open in a new window

Have you ever noticed that Divi’s social buttons do not open in a new window/tab?

What’s up with that???

So here’s how to make the edits so Divi will open the social media buttons in a new tab/window.

Video

Let’s start with a child theme.

If you don’t have a child theme, you should, so get one here.

One great thing about child themes is that you can override the parent theme’s template files. (Not all the files, just the template files. Read more here.)

The build

So, the social links are hidden in social_icons.php inside the “includes” folder in the parent theme.

You’re going to make a duplicate in the child theme. In the same place.

So, start by making an “includes” folder in the child theme.

Copy paste a duplicate of the social_icons.php file into that folder.

You’ll see some php and html code.

Line 5, 12, and 19 all have something like this:

<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">

that line of code is going to get a target=”_blank”

So it looks like this:

<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" target="_blank" class="icon">

Do that for all three social icons, and you’re good to go. Save it, and you’re done.

Simple.

 

 

Here’s an example of how it’s set up

Here’s the download file you can unzip and drop into your child theme, just in case.

 

Related

Get the Instagram tutorial here: http://almostinevitable.com/divi-tip-add-instagram-to-the-social-links/

update

Thanks to David’s contribution, you could add the following jquery.. like in the header html, or in a code module (and then put it on the page)

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

 

Photo by Pamela Saunders on Unsplash

Get Breakdance

Breakdance is, in my opinion, the best page/site builder on the market, which is why all my tutorials use Breakdance. It's also why I have an affiliate link. You don't pay extra, but I get a little commission, so it helps support the site. Thanks!

Get ACF Pro

Another essential plugin for site building. This isn't an affiliate link, it's just for convenience.

Get WP Codebox Pro

If you'd like an easier to use, and more advanced code management plugin (instead of just editing and making files yourself) then WP codebox pro is for you. Adding php, js, and even SCSS. Pretty nice! Affiliate link below.

Blank Plugin

Sort of blank. It's made to be easy to use with the tutorials. Download and edit any way you see fit.
  1. Or just add a JS with

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

    🙂

    • Hi, thanks for the contribution! I’ll add it to the post if that’s ok with you?

      • Yes of course… This is not my contribution… I read this in a another blog site 😉

Leave a Reply

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

New tutorials

Auto-updating Year in Footer
Designing Beyond the Brief
Disable Gutenberg Editor on some ACF pages
ACF flexible content fields in Breakdance 2.4

Got a question? ask!

If you have any question about the content on this page, feel free to send me an email by clicking the button below.

newsletter? sign up!

Sign up to the newsletter for updates on tutorials, news, and offers.

Join the cypher!

An awesome membership program for Breakdance Builder users coupled with an inclusive, friendly community.

Got a question?

If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!