How to open All/External Links of a Website in New Tab?

WordPress Hacks / Ask Me How To

How to open All/External Links of a Website in New Tab?

Open all links/external links of a website in a new tab – Couple of days back, I have created a job portal website like Sarkari Result. After completion of the design, I met a requirement to open all internal and external links of my website in a new window.

So, I notched my head and started thinking about how this requirement can be met. Because I am in this blogging business for the last two years and all the time, we have tried opening a single link in a new window.

As you know opening a single link in a new window or new window is like a bread and butter. We just have to change our code a bit.

For example – See the HTML code given below. The keyword (target=”_blank”) fits perfect and do the needful to open a link in a new tab.

<a href="http://okeyravi.com" target="_blank">This link will open in new window/tab</a>

Other than this if you are using Gutenberg Editor, Classic Editor, Elementor Page Builder, Beaver Builder Page builder or any other page builders then you will get a lot of customization options for a link.

So, now the question comes what if we have to open every link of a WordPress website in a new tab or if we only want to open only external links.

If you want to open all links irrespective of they are internal or external links in a new tab or new window then try the code given below.

Open your header.php file and add this code just above </head>. It will do the rest.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
    $('a').each(function(){
        if( $(this).attr('href') && 0 != $(this).attr('href').indexOf('#') ) {
            $(this).attr('target', '_blank');
        }
    });
});
// ]]></script>
Opening all website links in a new tab in wordpress
Opening all website links in a new tab in WordPress

If you have such requirements in which you want only external or outbound links to be open in a new tab or new window. Then this code will be helpful.

Open your header.php file and add this code just above </head>

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
    $('a[href]:not([href^="ENTER your Main Website URL here"]):not([href^="#"]):not([href^="/"])').attr( 'target', '_blank' );
});
// ]]></script>

Note – In the above code in place of “ENTER your Main Website URL here”, use your main domain link

Conclusion

So, accordingly based on the requirements or our website we may have to navigate each member to a new tab on a link click or only if they click on external links.

We have provides codes for both cases. Make sure to use them and leave a comment below after using it, if it is working fine.

Thanks for reading this post.

Make sure to rate the post below. Have a good day!

Comments (5)

  1. Pankaj

    Thank you, sir, for my site all post now working in new tab thank you very much and please tell me how can I improve my site traffic.

  2. Hi Ravi,

    Thanks for sharing this awesome Post. It Worked for my website Sarkarijobpost.com.

    1. Hey Ayush, Welcome. I am glad to listen that it worked for you.

    2. Sneha

      Hi Ravi,
      I read this blog. But opening a new link in the new tab or any external link in a new tab, how can it help in terms of SEO?
      Regards,
      Sneha

      1. Hi Sneha,

        I have not mentioned anything about SEO in this post. Opening a link in a new window or new tab is requirements of some websites. Nothing else. There will not be effor on SEO due to this.

        Hope you get it. Thanks for asking.

Comments are closed.