In WordPress version 4.7.4 when you write your post in “Visual” editor, and you want to add a link that will open in a new tab, in the “Text” tab, you will see the new WordPress noopener noreferrer atribute which has rel=”noopener noreferrer” html code. Check out WP 4.7 new features here.
At first I was quite surprised, and thought one of my plugin, or my newly updated theme has caused this. As usual, I googled my problem, and it seemed that many people have this problem. Then I found this code in this support forum thread.
This new thing is added to any links that you create with your post editor TinyMCE. Be it internal and external link. Means if you use a text widget, or added the code manually on your theme, it will not add the same attribute. Unless in the next version, they are going to add this in their widgets as well.
What is WordPress Noopener Noreferrer & Why?
Honestly, when I first noticed this, I did not directly ask Google how to remove it. But I was more curious what in the world does this attribute means.
Although I am not a HTML savvy, but from the label itself, we can already figure it out a bit. So I think, this rel=”noopener noreferrer” attributes mean;
Noreferrer = Prevents the new link in the new browser to know the address of the previous link in the previous browser.
The WP team removed Justify and Underline icons in the toolbar soon after 4.7 was released, read how to bring this back here. Then this time, they added this to the 4.7.4 version to increase the security of your users in your website. So when they click the link with target blank, they will not risk their browser to access a malicious page. Although I don’t really quite understand why they also add this in internal links, basically links in your site, that go to any pages in your website too.
How about my affiliate links
Most affiliate programs gives you tracking ID, and from that referrer, they will know which referrer is the click coming from. Then referral commission is made based on that referrer link. And if you are an affiliate program participant, you may concern about this change too.
In the thread in WP support link that I provided you above in the 1st paragraph, it explained all. Some people say, your affiliate program allow this, some say they do not. So best I think, is to contact your affiliate program contact.
Removing WordPress rel=”noopener referrer”
Due to security problem for your users, you may want to consider again if you want to remove this attribute from your WP website. So please consider carefully before you following this.
HELP tab is likely included in the admin bar [WP 3.3 Development version]
After you are sure you want to remove this WordPress rel=”noopener referrer”, you can follow these following steps. But before we begin, this is the state of my website I have tried the code with.
- The website has NO page builder plugins.
- I use a child theme, follow the tutorial here.
- The website may have different plugins than your website
- Functions.php of your current theme should be backed up. To do this, you will need to copy all of the code in your current theme‘s functions.php to a text editor.
Another note that I have to write here. If you use Crayon code highlighter plugin, you will need to comment this new code, to enable the “pre” coding language when you write a new code block. Then activate the code again. I am going to write this problem in the support forum, and update the progress if there will be an answer.
Steps to Remove WordPress rel=”noopener noreferrer”
1. Knowing the current theme you are using. If you want to know what theme you are using, go to your Dashboard as an Admin, then navigate to Appearance → Themes
The first theme is your active theme, it also shows you “Active: <the name of your theme>”. For more details of your current theme, click on “Theme Details”.
2. Then go to Appearance → Editor.
It should show you list of your theme’s files. In the demo, I use Twenty Seventeen child, so I only had style.css and functions.php.
3. Open functions.php. (after you backed this up.) Please pay attention on the content. This file is various from one website to another. Some of them have closing php coding block ?> some do not. So if yours don’t have this, you can paste below anything else, but if yours have this, just before that.
Add this following code to your functions.php.
// Note that this intentionally disables a tinyMCE security feature. NOT recommended using this
// Adding functions that disables noopener noreferrer rel attribute
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}
4. Click on “Update File” to save the changes.
If everything goes well, you can now test your new changed TinyMCE and you will see this WordPress rel Noopener Noreferrer no more.