• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories
  • Authors

How To Add “Target Blank” To Your Links In WordPress

Bhagwad Park

Published on: September 4, 2019

Categories: WordPress 4

A few months ago, I was auditing my site and jettisoning some of the additional code and scripts that were loading, slowing things down, and causing conflicts. One of these was a little external Javascript file that was parsing some of my links and adding target=”_blank” to them, to make the links open in a new tab or window. While I was able to remove it, I still needed to replace the functionality. So I sat down and came up with a short WordPress code snippet that allowed me to do this.

No CSS Solution

In an ideal world, I would be able to use a CSS selector to add this to all my links. But CSS is specifically for display purposes, and not functionality. Since the target=”_blank” section is an attribute of an existing HTML element and doesn’t relate to an ID, or a class, it’s not something that we can do.

Basically, we have to find a solution with Javascript instead. And it’s small enough that it can be an inline Javascript code without needing to add another external file.

Get Familiar with CSS Selectors

In the example below, I’m going to be using a single <div> element with a certain ID in order to select the links to which I want to add the target=”_blank” code. However, your selection needs are likely to be different. You might want to select a class instead of an ID. Or more crucially, not select a certain subsection of elements.

For this, it’s best to get familiar with the jQuery selection operators. Or (like me), simply search on Google for someone with the same problem 🙂 . In fact, I recommend the latter approach. Find a question on stackexchange by a person with similar needs, and then modify that solution to suit your needs. It’s what works for me every time!

Here’s the link to which I want to add the target blank code. Note that it’s encased inside a <div> element with the ID “some_id”:

Creating links with a specific ID

Adding the Code to the Footer

Since our operation is unlikely to be time-sensitive and is not going to be affecting the rendering of the pages in any way, there’s no need to place our code in the header of the document, or even the main body. In fact, we want to place it as far down as possible so that the entire HTML document has already been rendered.

For this, the footer is the natural place to put our code. Over there, it won’t interfere with anything other plugins, and will run after the user has already started to read the page. No one is going to immediately click a link in the first 0.5 seconds of opening a page!

Here’s the code you need to add to WordPress to accomplish this:

function add_blank_to_links() {
	$jcode = <<<< 'EOT'
	<script type="text/javascript">
jQuery(document).ready(function ($) {
$(document).ready(function(){
$('#some_id a').attr('target', '_blank');
});
});
</script>
EOT;
  echo $jcode;
}
add_action('wp_footer', 'add_blank_to_links');

In the above code, I’ve selected the <div> element with the ID “some_id”, and added the attribute target=”_blank” to it. If you don’t know how to add code like this to WordPress, check out our tutorial on NameHero that explains how to do it step by step.

Once you’ve added this code and saved it, it should find all the links specified by the selector and added the target blank attribute to it as shown in the screenshot here:

Code inserts target blank into specified links

And that’s it! A perfect solution that doesn’t require any kind of 3rd party file. The code is small, and runs at the end of the page load, which makes it ideal!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

How To Upload A PDF to WordPress (2023)

Learn how to upload a PDF to WordPress in just a few clicks and what are the pros and cons of uploading a PDF directly to WordPress.

WordPress 6.1 Dimensions Label Can Be Game Changing

WordPress 6.1 is set to be released in a few days, and I think some of the enhancements will be low-key game-changing. Maybe not right away, but the direction in which Gutenberg is moving makes me think that some plugins will soon become less important and can be replaced with native Gutenberg functionality. Dimensions with […]

Using Jetpack Protect For Free Site Scans

Jetpack has broken up its monolithic plugin into smaller pieces. Here's how to use the Jetpack Protect plugin for free site scans.

How to Set Up WooCommerce Shipping Options

Here's how to set up WooCommerce shipping options for local and International products, print shipping labels, and more.

Reader Interactions

Comments

  1. kannupriya arora says

    April 13, 2020 at 2:39 am

    If I don’t know where is a tags and its impossible to add id to the div. then is there any function we can add in function.php?

    Reply
  2. Frannie says

    December 10, 2020 at 1:57 am

    If we wanted your code to apply to two different CSS IDs, how could we do that? In other words, how can the line below be modified to apply to both #some_id and #another_id?

    $(‘#some_id a’).attr(‘target’, ‘_blank’);

    Reply
    • Bhagwad Park says

      December 14, 2020 at 1:07 pm

      Just try adding another line below that one with the new ID…

      Reply
  3. bruno says

    January 13, 2022 at 11:59 am

    Hello,
    I would like the product attributes to open in a new tab instead of replacing the page, could you help me?

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA