In part, we write blog posts because we want our readers to benefit from our words. In our writings, it is not uncommon to point to an external source via hyperlink for any number of reasons. When sharing that external link it is very important to ask yourself, what do I want this hyperlink to do? In other words, do you want the user taken away from your site when clicking on the link? Or would you rather have the external hyperlink open in a new browser window or tab?
The WordPress Way
WordPress has built in to give you the option of opening a link in a new tab when composing your blog posts. Simply choose it when using the WordPress Visual Editor. But depending on how many external links you have to share this can become tedious. Could there be a more convenient way?
Let JavaScript Work For You
The WordPress Way works great. But rather than remembering to toggle the option, let JavaScript do it for you in kind of a “set it and forget it” fashion. All it will take is a couple simple and easy steps you are probably already familiar with.
Prepare Your functions.php File
First you need to enqueue the JavaScript file that will do all of the heavy lifting. Generally, this is done within your functions.php file.
[gist id=”b79953d59cdce2657e5e497bca29e10b” file=”functions.php”]
Add Code Snippet to Enqueued File
Now, in the enqueued file defined in the previous step, copy and paste either the JavaScript or jQuery code snippets below. You do not and should not use both code snippets at the same time. You only need to use but one.
Why are there two examples? In short, because some users may have a preference. If you are not sure which to use, it is recommended to select the JavaScipt code snippet. Both options do exactly the same thing but use different methods.
Using JavaScript Code Snippet
The code snippet below uses JavaScript so that any external links on your site are automatically opened in a new tab without you having to toggle the option in the WordPress Visual Editor.
[gist id=”b79953d59cdce2657e5e497bca29e10b” file=”external_links.js” lines=”8-20″]
Using jQuery Code Snippet
Just like the JavaScript Code Snippet above, the same goal is achieved. This time jQuery, which is a JavaScript library, is used instead.
[gist id=”b79953d59cdce2657e5e497bca29e10b” file=”external_links.js” lines=22-29]
Summary
Now, when your reader clicks on an external link within your blog post, rather than them being taken away to another site, a new browser tab is opened. Have fun and enjoy!