Add JavaScript To Open Links In A New Window In WordPress

One of the biggest benefits of the Gutenberg WordPress editor as I mentioned in my earlier post on one year after, is the “Custom HTML” block that allows you to insert arbitrary HTML, JavaScript and CSS code into a WordPress post. I’d previously talked about using it for JSON structured data, but you can also implement cool JavaScript functionality on specific posts, without needing to modify your functions.php file or add PHP code.

I’m finding this quite useful in a variety of ways. Often I’ll have special needs for a certain page that requires a unique piece of JavaScript. And while there are plugins that can do the same thing, it’s nice to have it in a native format with Gutenberg so it’s part of the post itself, and can be easily migrated to another installation without any issues.

One example of this JavaScript potential is the occasional need to open specific links in a new window on a certain post. It can be tiresome and unsustainable to manually add the target=”_blank” attribute to every single link that you want. It’s much easier to do it via a small JavaScript snippet.

Step 1: Get the Class Name of the Links

The first step to using JavaScript to open links in a new window, is to target the right ones. Presumably you don’t want to open every link in this way. Internal links for example, are almost always opened in the same window. For my website, I usually only want the links present in my pricing table to open in this way.

So the first step to targeting them properly, is to obtain their CSS classes in the most narrow way possible. We can do this using our browser developer tools. For example, my site’s links that I want to open in a new window look like this:

As you can see in this screenshot, my links all have the class “wpsm-comptable” as their CSS class. This is provided by my “Table Maker” plugin.

So once we have the class name, we can create the JavaScript snippet.

Writing the JavaScript

Copy the following code:

jQuery(document).ready(function ($) {
$(document).ready(function(){
$('.wpsm-comptable a').attr('target', '_blank');
});
});

In the snippet above, replace the section in bold with the class name of your links.

Adding the Code to Gutenberg

To insert the above code into your post, simply open your post in Gutenberg, and select the “Custom HTML” block. Paste your code into it and voila, you’re done! Open your post in the browser and view the source code. You should see the target=”_blank” attribute added to the links you want.

A Note on Security

You might have noticed that the ability to add arbitrary JavaScript code to a post can post a security risk if not managed properly. In general, you don’t want to give writers on your team the power to simply add whatever JavaScript they want to a page. It’s very easy to slip in something malicious.

To deal with this, WordPress has the permission called “unfiltered_html”. This permission allows users to post whatever HTML they want in posts and pages, including JavaScript. By default, admins, and editors have access to it, and with multisite installation, only superadmins have it. It’s a carefully guarded privilege for good reason!

But if you’re the only user on your site and if you have admin permissions, then you can safely use it without consequences. Just be careful when giving someone else the role of “editor”, since you’re giving them the ability to insert any kind of JavaScript on your posts and pages!