wordpress

What’s rel=”noopener” in WordPress & How to Remove It

Posted on by Mario

wordpress

When you upgrade your WordPress to 4.7.4 version or newer, you will notice a new tag rel=”noopener”. It is located alongside the target=”_blank” tag in the HTML editor. When you make them open in a new tab, the tag is automatically added to all internal and external links.

As a web developer, you may be wondering what this tag does? Does it affect your websites negatively in any way? So, in this article we will discuss what is rel=”noopener” in WordPress and how to remove it. If you curious about rel=”noopener”, you better check this out!

What is rel=”noopener”?
Even though, it may sound a bit suspicious, but it is actually a security fix that prevent malicious links from taking control over an opened tab. Usually, window.opener Javascript object is used to control a parent window using a child window. With this feature, hackers can switch user’s currently opened website with a fake one and steal information, such as login details. Therefore, to prevent this, rel=”noopener” blocks the use of the window.opener Javascript object. If window.opener does not work, then a tab can’t control another tab.

In fact, on 23rd November 2016, this security fix was added in TinyMCE plugin. Actually, WordPress uses TinyMCE as its text editor; it also got updated with this feature in WordPress version 4.7.4.

Is It Bad for your Website?
You may relieve as it doesn’t have any bad impact to your site. Some WordPress users may be making all internal and external links “nofollow”, which cause bad score for SEO. But, the fact is rel=”noopener”is just an instruction for the user’s browser to cease the use of the window.opener Javascript object.

This is because SEO relates to search engines and they don’t interact with rel=”noopener” tag. It works the same for analytics software that completely ignores this tag.

At first, this might have been a bit of a problem when WordPress added rel=”noopener noreferrer” tag before the fix was released with WordPress version 4.7.4. In the older version, “noreferrer” blocked the link from knowing where it actually came from.

Even though, it may not affect your SEO, but it may affect some of the analytics tools and affiliate programs. However, in WordPress latest version, “noreferrer” tag has been removed , so you should have no problem with rel=”noopener” tag. SYou only need to make sure you have updated to the latest version of WordPress.

How to remove rel=”noopener”
As it is stated above, rel=”noopener” doesn’t affect SEO. It also has no impact on analytics tools, and affiliate links also won’t break. It works to protect your users from any potential malicious links that could hijack their tabs. In fact, it only will stop when you want to use the window.opener Javascript object for any purpose.

As it is integrated into the WordPress text editor, removing rel=”noopener”can be a bit difficult. Moreover, it will be added back again when you save the document, Even if you manually remove it from the HTML code. So, the best solution is to disable this feature from the TinyMCE plugin itself.

However, you may need to add some lines of code in the functions.php file of your WordPress theme. In the functions.php file, copy and paste the below mentioned code and save it:

// Note that this intentionally disables a tinyMCE security feature.
// Use of this code is NOT

recommended.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;
}

This will stop WordPress from automatically adding rel=”noopener” tag in your posts. But, you may need to mannually remove the added tags from posts saved after WordPress 4.7.4 update.

 

In Summary
Even though, it may sound suspicious but you have nothing to be afraid of on the rel=”noopener’ tag. It will secure your website visitors. But, you should embrace this new edition of security feature, if you want to use the window.opener feature.

 

5 ways for Creating Better, Faster and More Optimized WordPress Websites

Posted on by Mario

Creating better faster and more optimized wordpress websites

There are always new updates in WordPress, so that every developer should learn the latest optimization practices.  But, mostly seasoned developers focus on what they are good at. Then, neglect or don’t have time to learn the latest optimization practices. If you happen to be one among those kinds of web developers, you need to read the following tips. This article can help you create better, faster and more optimized WordPress sites.

  1. Switching Hosts Isn’t Always a Quick Fix

If you think that switching hosts will automatically fix certain problems, you may need to reconsider your opinion. In fact, you still experience some code issues or compatibility problems with specific plugins even though you have changed your host. A managed host will provide as much assistance as they can, but won’t debug an issue with a bad plugin or code for you. Therefore, you need a WordPress developer to dig into it and make a determination as to what the issue is. In fact, to solve these problems, many hosts provide third-party partners and developers.

  1. Don’t Try Editing Your Code

To avoid WordPress sites go down, you need to make sure that no one is editing a PHP file directly from the appearance editor in the dashboard. But, how? You can use the following code in your wp-config.php file, removing the edit_themes, edit_plugins, and edit_files capabilities for all users. This method will prevent users to hack away at the code and break the site.

define(‘DISALLOW_FILE_EDIT’, true);

Take this process one step further to update themes or install plugins and remove the functionality for clients to update. Place the following code in your wp-config.php file to restrict these capabilities.

define(‘DISALLOW_FILE_MODS’, true);

  1. Don’t Cut Corners on Your Themes and Plugins

WordPress might be the foundation of your site, but the themes and plugins are also important elements. Therefore, you need to choose your plugins carefully. Do a little research and look for its ratings and reviews beforehand.

Recent research even shows that nearly 50% of the plugins in the repository haven’t been updated in over 2 years. This makes these themes and plugins are easy to get infected with malware. Another thing to be on the lookout for is a bundled plugin that should be updated. This surely will cause a huge problem for WordPress users who buy things via online marketplace. On the other hand, this method will open a wide chance for hackers and site owners are extremely vulnerable.

  1. Watch Your Admin AJAX Calls

Inspect any plugins that may utilize AJAX, for instance, the WordPress Heartbeat API uses /wp-admin/admin-ajax.php to run AJAX calls from the web-browser. Mostly these kind of files occurs during  traffic spikes, CPU load, and can bring your site to a crawl.

If you find there are 3rd party plugins that utilize admin-ajax.php, make sure that everything runs in the correct way. Besides, you can figure out what plugins might be causing it by looking at the HTTP POST request action and quickly determine, based on its name. However, AJAX does load after the page loads.  So, this is not always a bad thing to see this in a speed test.

  1. Ensure PHP 7/HHVM Compatibility Before Jumping on Board

Nothing can beat PHP7 and HHVM when it comes to boosting WordPress performance. But, before you are tempted to use these programs, you need to make sure that your site is compatible with the program. This means before you are upgrading from PHP 5.6 to 7, you need to test all functionalities of your WordPress site in a staging environment or locally to ensure there aren’t any compatibility issues.

Bootstrap 4 Alpha 6 Major Components in Flexbox

Posted on by Mario

Bootstrap-4-Alpha-6

Alpha 6 has just launched and it becomes the biggest ships to date.  Hence, in this article we will describe its grid system and major components in flexbox. If you are web developers who are currently working on WordPress, this article is for you. Discover what’s new with Bootstrap 4 Alpha 6, here!

Embracing Flexbox
As bootstrap is now flexbox by default, you can control your grid system and core components and provide unparalleled flexibility. However, it may be dropping IE9 support yet brings significant improvements to component layout, alignment, and sizing.

If you have no idea about Flexbox, here are some benefits that you can have when applying Bootstrap 4:

  • No more HTML white space or broken table-style rendering
  • Auto margins for easy spacing
  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
  • Equal height and equal; width cards
  • Utility classes for easily changing display, direction, alignment, and more.
  • Justified navigation and button groups
  • Vertical and horizontal centering without hardcoding values with translate or margin

In fact, almost every component now takes advantage of flexbox. This is because less reliance on clearfix, more control over Dom, and visual order, and fewer bugs. Even, Carousels, a more complex component has used Flexbox in some areas.

Responsive Utilities and the Great Infix
Among so many advantages that Alpha 6 offered, they also made two important changes to their naming scheme.

  • First, we’ve dropped the –xs infix from our lowest (extra small) breakpoint. However, xs isn’t a responsive breakpoint just like sm, md, lg, and xl. This is because it doesn’t start applying styles at a min-width and up. It can be applied to everything as there’s no bounding @media query.
  • Second, to better articulate their property value pairings, we’ve renamed several classes. Instead of pull, we use float. You can start with the property name, instead of creating new names for the various flexbox properties.

Combine them together and you’ll get updated class, such as .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. With these classes, you can have immense power and customization to folks building with Boothstrap.

More Grid Improvements
You will also have more grid improvements. By adding responsive auto sizing columns, more container padding options, and add any number of .col-* classes, the result will automatically be equal in width.

To remove gutters from grid rows and their columns, you can use the .no-gutters modifier.

Updated Navbar
If you find that the Alpha 5 navbar still needs more improvement, you’ll see that the Alpha 6 is done perfectly. The navbar has been rewritten and it provides better built-in responsive behaviors and improved layout customization.

Here are some of the lists of the updates:

  • The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customization. It also includes easy modifiers for absolutely aligning it to the top right or top left.
  • Navbar navs no longer require the .nav base class. While it provided a starting point, these shared styles often got in the way of navbar behaviors. Now it’s just .navbar-nav and utilities for alignment.
  • Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
  • The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within. This allows us to provide better responsive behavior with just one class change.