Marking all external links for opening in a new Tab Browser

Normally, it’s while you are writting a post, when you mark the links inside the text as normal or “for opening in a new Tab or Browser” –typically the external links–; simply you mark the checkbox Open link in a new Tab in the Links Tool of WordPress Editor but what does it happen if you have already got a lot of posts non marked, or if you have changed the criteria for external links, or whatever similar situation?

Food Camera and Backchannel: MIT Media Lab lists

Well, the long solution consists of editing all posts and to locate and to correct manually the external links but, if you have more than a hundred of posts with a lot of links probably, it will be an very stressing task, and surely, you’ll forget some of them… Then, what can we do?

The structure of the external links

The difference between a link that opens in a new tab and a link that is opened as usual is an attribute of the HTML <a> element called target. Specificaly, the links opened in a new tab have got this basic structure

<a href="anyhost.extesion/anyadress/" target="_blank">Any interesting link</a>

So our approach pursues to find a method for introducing this attribute in all the links that not belong to our host.

The parts of the solution

There are more than one unique solution, for example, you could construct a SQL query for changing automaticaly all the links directly and permanently in the database, of course it always exists “the above-proposed long and manual solution” but, probably jQuery will be the best and simplest approach.

In any case, the method has always got two different parts: the first is to detect the difference between the two classes of links, and the second is to change the attribute of anchor elements but using jQuery we can easyly construct a function that makes these two task in a few lines of code.

// if our host has an URL address like http://mysite.com

jQuery(document).ready( function ($) {   // when document is completely load and ready

    // For each one of the anchors inside the post_content
    $('.entry-content p a').each( function () {  

        // here we check if the current anchor in loop is an external link
        if ( $(this).attr('href').indexOf( 'http://mysite.com/' ) < 0 ) { 

             // here we add the new attribute to the anchor
             $(this).attr( 'target', '_blank' );
        }

    });

});

if you write these former lines at the end of the file that contains the scripts of your theme, from this moment, all HTML a elements that have an URL that doesn’t belong to your host will be marked by the function and the will open in a different tab in the browser.

Styling these links

As a connection with a former article A different style for external links, you can also write one more line in this function to add a different class to this kind of links, for example:

// if our host has an URL address like http://mysite.com
jQuery(document).ready( function ($) {
    $('.entry-content p a').each( function () {
        if ( $(this).attr('href').indexOf( 'http://mysite.com' ) < 0 ) {
            $(this).attr( 'target', '_blank' );
            $(this).addClass( 'external-link' );
        }
    });
});

Doing this, then you can simplify your CSS because you just need a class rule in the style.css file of your theme. For example:

.entry-content .external-link { font-variant:small-caps; font-weight: bold; }

Enqueueing the script

Finally remember that, if your theme hasn’t got an script file –rare but possible–, first you have to write a new anyname.js file inside the directory of this theme (better to put this script file in a subdirectory called js) for adding the jQuery function, and second you have to add a new function wp_enqueue_script in the functions.php file.

function adding_a_script() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/anyname.js', array('jquery'), '', TRUE );
   // in case of a child theme
   // wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/anyname.js', array('jquery'), '', TRUE );
}
add_action( 'wp_enqueue_scripts', 'adding_a_script' );

For further information, see the wp_enqueue_script official documentation

Have a nice WordPressing!

Leave a Comment

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>