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.

Code to open all links of a website in New Tab/Window

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>

Code to open only external links of a website in New tab

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!

• DomainRacer Hosting Review (2024-2025)
  by OK Ravi
• You can do it too: Practical SEO Guide for Beginners in 2022
  by OK Ravi
• Top 7 secrets of super-successful video marketing
  by OK Ravi
• Reasons to Hire a Senior Living Marketing Company in Sacramento
  by OK Ravi
• What are the Benefits of using a paraphrasing app on an Android smartphone?
  by OK Ravi
• A Guide to Programmatic Direct Mail
  by OK Ravi