Table of Contents
You can use this script to open external links and files* in a new window/tab (depending on your browser settings it will be a new tab or new window).
It also adds classes to Phone, PDF and E-mail links for easier use in CSS.
Method A) Add code using Elementor #
- Open the WordPress Dashboard.
- Navigate to Elementor → Custom Code.
- Click on “Add New“.
- Add a title for the code.
- Select “</body> End” in the Location: field.
- Copy/paste the following code in the big text box and click on Publish:
<script type="text/javascript">
/**
* External Links
*
* @version 1.0.2
*/
( function( $ ) {
/*
Get the current page host:
- in lowercase for easier comparisons.
- without www. (in case it has it) because we will add it on another variable.
*/
var host = window.location.host.toLowerCase().replace(/^www\./i, '');
/* Get the current page host with www. */
var host_www = 'www.' + host;
/* List of file extensions that we want to open on new tabs. */
var extensions = [
'doc',
'docx',
'm4a',
'mp3',
'pdf',
'wav',
];
function isValidURL( urlString ) {
try {
new URL( urlString );
return true;
} catch ( error ) {
return false;
}
}
/* Check all links in the page to add the _blank target when applies. */
$( 'a' ).each( function() {
/* Validate that the HREF exists. */
var href = $( this ).attr( 'href' );
if ( ! href ) {
return true;
}
/** Validate that the HREF is not javascript code */
if ( href.toLowerCase().startsWith( 'javascript:' ) ) {
return true;
}
/* Validate that the HREF is a valid URL. */
href = href.toLowerCase();
if ( ! isValidURL( href ) ) {
return true;
}
var url = new URL( href );
var extension = url.pathname.split( '.' ).pop();
/*
Add the _blank target parameter to the link if:
A) the link host is not the same than the site host without www or with www.
OR
B) the extension of the link is included on the list of extensions.
*/
if (
( url.host != host && url.host != host_www )
|| extensions.includes( extension )
) {
$( this ).attr( 'target', '_blank' );
}
} );
/* Check all forms in the page to add the _blank target when applies. */
$( 'form' ).each( function() {
/* Validate that the ACTION exists. */
var action = $( this ).attr( 'action' );
if ( ! action ) {
return true;
}
/* Validate that the ACTION is a valid URL. */
action = action.toLowerCase();
if ( ! isValidURL( action ) ) {
return true;
}
var url = new URL( action );
/*
Add the _blank target parameter to the link if the link host
is not the same than the site host without www or with www.
*/
if ( url.host != host && url.host != host_www ) {
$( this ).attr( 'target', '_blank' );
}
} );
/* Add classes to PDF, E-mail and Phone links for easier use. */
$( 'a[href$=".pdf" i]' ).addClass( 'pdfLink' );
$( 'a[href^="mailto:" i]').addClass( 'emailLink' );
$( 'a[href^="tel:" i]').addClass( 'phoneLink' );
} )( jQuery );
</script>
Method B) Editing your .js file #
If you have access to edit your theme, you can copy/paste the following code in your .js file:
/**
* External Links
*
* @version 1.0.2
*/
( function( $ ) {
/*
Get the current page host:
- in lowercase for easier comparisons.
- without www. (in case it has it) because we will add it on another variable.
*/
var host = window.location.host.toLowerCase().replace(/^www\./i, '');
/* Get the current page host with www. */
var host_www = 'www.' + host;
/* List of file extensions that we want to open on new tabs. */
var extensions = [
'doc',
'docx',
'm4a',
'mp3',
'pdf',
'wav',
];
function isValidURL( urlString ) {
try {
new URL( urlString );
return true;
} catch ( error ) {
return false;
}
}
/* Check all links in the page to add the _blank target when applies. */
$( 'a' ).each( function() {
/* Validate that the HREF exists. */
var href = $( this ).attr( 'href' );
if ( ! href ) {
return true;
}
/** Validate that the HREF is not javascript code */
if ( href.toLowerCase().startsWith( 'javascript:' ) ) {
return true;
}
/* Validate that the HREF is a valid URL. */
href = href.toLowerCase();
if ( ! isValidURL( href ) ) {
return true;
}
var url = new URL( href );
var extension = url.pathname.split( '.' ).pop();
/*
Add the _blank target parameter to the link if:
A) the link host is not the same than the site host without www or with www.
OR
B) the extension of the link is included on the list of extensions.
*/
if (
( url.host != host && url.host != host_www )
|| extensions.includes( extension )
) {
$( this ).attr( 'target', '_blank' );
}
} );
/* Check all forms in the page to add the _blank target when applies. */
$( 'form' ).each( function() {
/* Validate that the ACTION exists. */
var action = $( this ).attr( 'action' );
if ( ! action ) {
return true;
}
/* Validate that the ACTION is a valid URL. */
action = action.toLowerCase();
if ( ! isValidURL( action ) ) {
return true;
}
var url = new URL( action );
/*
Add the _blank target parameter to the link if the link host
is not the same than the site host without www or with www.
*/
if ( url.host != host && url.host != host_www ) {
$( this ).attr( 'target', '_blank' );
}
} );
/* Add classes to PDF, E-mail and Phone links for easier use. */
$( 'a[href$=".pdf" i]' ).addClass( 'pdfLink' );
$( 'a[href^="mailto:" i]').addClass( 'emailLink' );
$( 'a[href^="tel:" i]').addClass( 'phoneLink' );
} )( jQuery );
Just for documentation / historical purpouses, we used to use the following code (but some issues were found with subdomains and if the links had or not www).
/**
* External Links
*/
( function( $ ) {
/** Open external links and files with extensions .pdf, .doc, .docx, .mp3, .m4a, and .wav in a new window. */
var h = window.location.host.toLowerCase();
$(
"a[href^='http']:not([href*='" + h + "' i]), "
+ "form[action^='http']:not([action*='" + h + "' i]), "
+ "a[href$='.doc' i], "
+ "a[href$='.docx' i], "
+ "a[href$='.m4a' i], "
+ "a[href$='.mp3' i], "
+ "a[href$='.pdf' i], "
+ "a[href$='.wav' i]"
).attr( 'target', '_blank' );
/** Add classes to Phone, PDF and E-mail links for easier use. */
$( 'a[href*=".pdf" i]' ).addClass( 'pdfLink' );
$( 'a[href^="mailto:" i]').addClass( 'emailLink' );
$( 'a[href^="tel:" i]').addClass( 'phoneLink' );
} )( jQuery );
* List of file extensions:
- .doc
- .docx
- .mp3
- .m4a
- .wav
