Open external links and files in new window

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 #

  1. Open the WordPress Dashboard.
  2. Navigate to Elementor → Custom Code.
  3. Click on “Add New“.
  4. Add a title for the code.
  5. Select “</body> End” in the Location: field.
  6. Copy/paste the following code in the big text box and click on Publish:
				
					<script type="text/javascript">
/**
 * External Links
 *
 * @version 1.0.3
 */
( 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' );
		}

		/**
		 * Add the .externalLink class to external links,
		 */
		if (
			( url.host != host && url.host != host_www )
		) {
			$( this ).addClass( 'externalLink' );
		}
	} );

	/* 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$=".docx" i]' ).addClass( 'docLink' );
	$( 'a[href$=".doc" i]' ).addClass( 'docLink' );
	$( '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.3
 */
( 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' );
		}

		/**
		 * Add the .externalLink class to external links,
		 */
		if (
			( url.host != host && url.host != host_www )
		) {
			$( this ).addClass( 'externalLink' );
		}
	} );

	/* 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$=".docx" i]' ).addClass( 'docLink' );
	$( 'a[href$=".doc" i]' ).addClass( 'docLink' );
	$( '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:

  • .pdf
  • .doc
  • .docx
  • .mp3
  • .m4a
  • .wav

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.