WP

Simple Methods of Adding SSL to Your WordPress Website

Posted on by Mario

SSL WORDPRESS

People choose SSL mostly because it provides more secure information and gives more benefits, especially from a user’s perspective, as any information they share with your site via a form, shopping cart, etc. is encrypted – it is safe from the third party. However, few web developers that know the very same principles also apply to site administrators.

In fact, running the WordPress admin in https also brings huge benefit, since you can secure all the sensitive information you input daily inside of WordPress. All of this information needs protection; therefore, it is essential for every WordPress website out there to renew the certificate in every three months.

If you are in a tight budget, you can opt on the market for low-cost certificates that do the job nicely in most cases. Remember that ecommerce sites might be better off with higher level certificates that offer features like identity validation which allows customer to know you better.

This makes us have no reason for not giving a little time and money to understand and apply an SSL certificate. So, if you are committed to integrating SSL with a WordPress installation, now it’s time to discover the ways.

HTTPS Your WordPress

Before, we setup WordPress to utilize an HTTPS connection; you have to make sure that you already have an SSL certificate installed on your server. Actually, it is quite simple to setup WordPress to utilize an https connection, as follows:

  • Back up the site
  • Change the Site URL
  • Ensure all internal links and attachments use https
  • Run the WordPress admin in https
  • Automatically forward http requests to https

Change the Site URL

First, navigate over to settings > General inside the WordPress administration area since you’ll want to change the WordPress Address (URL) and Site Address (URL) from ‘http://www.yourdomain.com’ to ‘https://www.yourdomain.com’. Scroll down to the bottom and save the changes when you’re done and then, WordPress will automatically log you out. If you want to log back, you can use the newly-secured URL.

Make Sure All Internal Links/Attachments Use HTTPS

Even though you change the URL, image or attachment URL throughout WordPress, it will not suddenly switch your website into HTTPS. In order to discover ways to change the URL site, you can conduct a search and replace area of your database. One thing for sure, you need to back up your site to prevent anything from going wrong.

Nowadays, you can find many searches and replace plugins available for WordPress, but you can give a try to Velvet Blues Update URLs, as it can be an effective solution. Furthermore, this plugin only touches the areas of the database that need changes, so you will not mistakenly change the right thing. In fact, you can update URLs to get started once you’ve installed and activated the plugin, head over to tools > Update URLs to get started.

Don’t worry as using plugin is as simple as adding the old and new URLs for your site. All you need to do is make sure that all the settings look are correct then click “Update URLs Now” when you’re ready and let the plugin take care of the rest. You’ll see a report on the screen that says how many URLs are changed and where the plugin found them, once the URLs have been replaced.

Run the WordPress Admin in HTTPS

In order to ensure that there will be HTTPS in the WordPress back end, you should grab the latest version of your site’s wp-config.php file and add the following line just above “/* That’s all, stop editing! Happy blogging. */”:


Now, you can save and upload the file to your server.

Automatically Forward http Requests to Https

The last step is to make sure that you only use https URLs for your site. First, you need to download the latest copy of your site’s .htaccess file and add the following just underneath the line “RewriteEngine On”:

Then save and upload the file to your server. You can try and enter an http URL for your site in a browser to test it. If you do it right, it should automatically forward you to the https version. Bear in mind that every server has been set up differently, so you should find other ways to make this work. Feel free to contact your web host for suggestions.

Troubleshooting a ‘Broken’ Lock

Discover if there are any broken padlock icons in your browser’s address bar and/or mixed content warnings. If you find any, then something is trying to load in from an http address. Usually, it is caused by a script or other outside resource being called from your site’s theme or CSS. As a solution, you can refresh the page and see if that clears up the issue.

If the problem is still going on, you can visit “Why No Padlock?” and input your URL that you want to analyze. The site will scan and analyze it for you.

Conclusion

Keeping user’s information private is an important thing, especially if you are doing a business in digital world. By seeing the green padlock in your site’s address, users will think that your business takes their personal information seriously. This will surely increase their trust and interest to buy something from you or even fill out a simple contact form.

Customizing the Error Page for Deactivated or Archived WordPress Sites

Posted on by Mario

When someone visits a site by default, that means they are deactivated, then they will see a pretty dull default screen, informing that the site has been suspended. However, the problem comes when you want to customize, or add some custom content. Therefore, as a solution, this article will show you the exact way to do that. Below are some of the ways:

Suspending Sites in Your Network – the Options

Many web developers may think that terminology around deleting and suspending sites in a network is very confusing, since it’s not clear what each one means and sometimes when you do one, the system will tell you that you’ve done another.

Below is a recap on the options for removing sites from your network.

Here’s a detail of the Multisite Sites screen, which you access by going to My Sites>Network Admin>Sites:

You can find four options for removing the site:

  • When your users signup for a site, you can deactivate reverse the activation step users. However, it can be reactivated any time, since it doesn’t permanently delete the site. Besides, both the front end and the site admin screens aren’t accessible.
  • It is important to mark a site as being archived to prevent other users from accessing it. The admin screens can be accessed but not the front end. Besides, you can archive a site easily at any time and it hasn’t been removed.
  • Once your site gets spam, your site will be marked as spam, not deleted. To make it available again, you can decide whether to unmark it as spam or delete it.
  • Delete the site, but be careful when deleting the site because you have to make sure that you are ready to delete it.

The Default Screen for Suspended Sites

When your site is removed, WordPress will show a default screen. Below are scenarios that you will see.

Deactivated Sites

Visitors can see a default screen if a site is deactivated and someone other than the (logged in) network admin visits it.

Archived Sites and Sites Marked as spam

You’ll get a different screen notification, when you mark a site as spam or archived.

I know that the screens may be too basic and simple. Therefore there is not much information or explanation about what’s meant by ‘no longer available’ or ‘archived or suspended’.

Creating a Page for Deactivated Sites

Creating a new page for displaying when someone visits a deactivated site is quite straightforward. You simply create a new file called blog-deleted.php and put it in your network’s wp-content folder. This file will then be used to display a custom page instead of the default page.

Note that this is in the network’s wp-content.php folder and so the same file will be used for any sites in your network that are deactivated. In other words, you have to create something generic, rather than something specific to one site in your network.

To avoid your site from using theme or calling any plugins or additional files, the page you create has to stand alone. As a solution, you need to include any styling in that file or call an external stylesheet, which you would put in a styles folder in your wp-content folder.

Remember to include the <head> section and the opening and closing <body> tags as these won’t be coming in via your themes’ header or footer files.

You can try this by using a very simple file with all the styling included in it or with a completely blank file if you’d like or you can copy some of the content from your theme files. For example, use the copied contents of  theme’s header.php file and edit those down significantly, then manually add the rest of the markup.

Here’s the content of  <head> section:

<?php
              // file for displaying an error message on deleted sites
?>
<!DOCTYPE html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php
              /*
               * Print the <title> tag based on what is being viewed.
               */
              global $page, $paged;
              wp_title( ‘|’, true, ‘right’ );
              // Add the blog name.
              bloginfo( ‘name’ );
?></title>
<style>
              .content {
                             width:500px;
                             height:500px;
                             margin:0 auto;
                             background:#999;
                             position:absolute;
                             left:50%;
                             top:50%;
                             margin-left:-250px;
                             margin-top:-250px;
                             padding: 10px;
              }
              .content p {
                             position: relative;
                             top: 50%;
                             transform: translateY(-50%);
                             text-align: center;
                             font-size: 18px;
                             font-family: ‘Helvetica Neue’, Verdana, sans-serif;
              }
              a:link,
              a:visited {
                             color: #fff;
                             text-decoration: underline;
              }
              a:hover,
              a:active {
                             color: #fff;
                             text-decoration: none;
              }
</style>
</head>

 

You can find some metadata and styling from the example above.

Now for the <body>:

<body <?php body_class(); ?>>
       <section class=”content”>
 
              <?php _e( ‘<p>This blog has been deleted, sorry! To create your own site, please visit <a href=”‘ . network_site_url() . ‘”>The Main Network Site</a>.’, ‘compass’ ); ?>
 
       </section>
</body>

 

The code above is just an element for the content, with a paragraph inside it and some text, which is translatable. If your network allows user sign-ups, you might need to include a link to the main site. If this site has been replaced, you might need to link to a different site or to a page on your main site explaining your policy for deleting sites, or wherever you want.

So, now the result will be like:

Isn’t it pretty? Now, you can add some different styling colors and maybe a headline. Furthermore, it is also possible to replace the default page for deleted sites and add anything you want to.

Creating a Page for Archived Sites

You can also create a custom page for sites which have been archived or marked as spam and you need to create another file also in your wp-content folder. This is called blog-suspended.php. file, but with a slightly different text. Here’s the code:

<?php
              // file for displaying an error message on deleted sites
?>
<!DOCTYPE html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php
              /*
               * Print the <title> tag based on what is being viewed.
               */
              global $page, $paged;
              wp_title( ‘|’, true, ‘right’ );
              // Add the blog name.
              bloginfo( ‘name’ );
?></title>
<style>
              .content {
                             width:500px;
                             height:500px;
                             margin:0 auto;
                             background:#999;
                             position:absolute;
                             left:50%;
                             top:50%;
                             margin-left:-250px;
                             margin-top:-250px;
                             padding: 10px;
              }
              .content p {
                             position: relative;
                             top: 50%;
                             transform: translateY(-50%);
                             text-align: center;
                             font-size: 18px;
                             font-family: ‘Helvetica Neue’, Verdana, sans-serif;
              }
              a:link,
              a:visited {
                             color: #fff;
                             text-decoration: underline;
              }
              a:hover,
              a:active {
                             color: #fff;
                             text-decoration: none;
              }
</style>
</head>
<body <?php body_class(); ?>>
       <section class=”content”>
 
              <?php _e( ‘<p>This blog has been suspended, sorry! To create your own site, please visit <a href=”‘ . network_site_url() . ‘”>The Main Network Site</a>.’, ‘compass’ ); ?>
 
       </section>
</body>

 

The page below is what you will get when you visit an archived site:

 

By this, our visitor will get more information and a link to the main site which you can replace it with whatever you want.

Hopefully, by following the steps above, you can quickly and easily replace the default pages for archived, suspended or deleted sites. As a result, visitors will get more information from the default screens which will give them a link to your main site. This will prevent users from just leaving your network entirely.

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.