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.


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.




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.



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


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)

		jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);


Photo by Pamela Saunders on Unsplash

Leave a Reply

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

  1. Or just add a JS with

    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 😉

New tutorials

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.