The whole world is migrating its websites from HTTP to HTTPS!
Why?
Because it makes their website more secure and there are rumors that search engines prefer websites that use the “https” protocol .
Sooner or later, your website will have to migrate to HTTPS. But before you do, there are some factors you need to consider to ensure a successful migration from HTTP to HTTPS.
- The SSL certificate you are using.
- What server architect do you have (Apache or Nginx).
In this article (and upcoming ones) , I’ll describe migration techniques for different scenarios.
Here is our first scene:
- This website is hosted on Nginx server.
- DNS is managed by CloudFlare.
- SSL certificates provided by Let's Encrypt.
Let's Encrypt + Nginx + CloudFlare: Scenario 1
In this case, my host configured a free SSL certificate from Let's Encrypt.
However, a big downside to using Let's Encrypt is that the certificate expires after 90 days. So, after every 90 days, you or your host will need to renew the certificate.
Most paid SSL certificates are valid for one year.
Since I'm setting up HTTPS for an informational website with no transactions , I prefer a free solution over other paid SSL certificates.
Server administrators can use Certbot to install SSL certificates from Let's Encrypt.
After installing the certificate, we need to configure HTTPS from CloudFlare and make some changes on our WordPress blog.
You can get started as follows:
- Log in to your CloudFlare account and select Sites.
- Click on "Encryption" and from the "SSL" tab.
- Select Full or Full (Strict).
Since I'm using a Let's Encrypt SSL certificate, I selected Full.
If you purchased your SSL certificate from somewhere else (like DigiCert , GeoTrust , or anywhere else), use the "Full (Strict)" mode.
- Want to know what the difference is between the two?
- Full (strict) check for valid certificates on the origin server , whereas full check for any certificate.
**Full SSL: **Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.
- You need to have an SSL certificate on your server. However, CloudFlare will not attempt to verify that certificate (certificates can be self-signed).
- Visitors will see the SSL lock icon in their browser.
**Full SSL (Strict): **Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.
- You need to have a valid SSL certificate installed on your server , and it must be signed by a trusted certificate authority.
- Visitors will see the SSL lock icon in their browser.
Once this feature is enabled, you should open your website in HTTPS mode.
You will most likely see an error (as shown below).
The image will be broken and you will get a "mixed content" warning.
Let me quickly explain to you what “mixed content” is:
Your website is opened using the HTTPS protocol, but resources (such as images and theme files) are still using the HTTP protocol. Because your website uses both protocols, you will receive a "Mixed Content" warning.
Take a look at these two images:
The first one shows a red "https" sign with a line through it.
Clicking the link on Chrome will open the developer console (as shown in the second picture).
You can clearly see warnings for "Broken HTTPS" and "Active Mixed Content".
Fixing Mixed Content Warnings in WordPress: CloudFlare Users
This is where the real work starts (and it’s going to be fun)!
I'm assuming you're using CloudFlare to manage your DNS. (That's how this guide starts! Isn't it?)
Install the official CloudFlare WordPress plugin and activate it.
Go to Settings > CloudFlare and configure the plugin.
Toggle the Automatic HTTPS Rewrite option to On.
In this case, HTTPS protocol rewriting converts links in your WordPress site (including images, stylesheets, and scripts) from using "http://" or "https://" to just "//". This rewriting tells your browser to load all of these resources using the same protocol as it loaded the base page.
- This is Cloudflare's official resource to learn more about HTTPS protocol rewriting.
Now, refresh the home page and you will notice that **the red bar has turned into a green bar ** (without warning!).
Additionally, all broken WordPress images have reappeared.
To enforce SSL for the WordPress admin area:
Once we have fixed the mixed content warnings, it is now time to configure the rest to complete the migration.
Now, we will force the WordPress admin area to use SSL protocol (HTTPS). To do this, we need to edit the WordPress "wp-config.php" file.
To do this, you will need to log into your host using FTP. (Here is a guide.) In the root directory of your WordPress installation, you will find the wp-config.php file. Before editing this file, back it up first.
Now, open the file and add the commands mentioned below as shown in the screenshot:
define(``'FORCE_SSL_ADMIN'``, true);
Change the website address to "https":
- After enforcing SSL for the admin area, go to Settings > General (in your WordPress dashboard).
- Change WordPress and website URLs to “https”.
This will ensure that all images and links on your WordPress site open as HTTPS.
However, the work is not yet done, as we still need to redirect all traffic from HTTP to HTTPS.
Redirect all WordPress traffic from HTTP to HTTPS
This step depends entirely on the type of server you are using.
If you are using a regular shared host like Bluehost, HostGator, etc., then you are most likely using Apache server. Most WordPress hosting hosts use Nginx server.
You can edit the ".htaccess" file yourself, or you can use this free plugin called Really Simple SSL .
This plugin is available for Apache and Nginx servers.
If you want to use code to do this, choose the one that fits your scenario.
- For Apache servers, redirection can be done by adding the redirection code in the " .htaccess" file:
01.RewriteEngine On02.RewriteCond %{HTTPS} off03.RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
- For Nginx servers, follow this guide if you are the administrator , or ask your server administrator to do it for you.
Alternatively, you can use the search and replace feature to replace http://domain.com with https://domain.com. (This step is highly recommended)
This is a script that works well. You can use this script by following the steps mentioned by Brian .
HTTPS Testing Tools:
Now it's time to test your HTTPS implementation.
You can use this tool to check your website.
Here’s a report from a WordPress site I just migrated to HTTPS:
Check for SSL errors:
This is another useful website that can scan your site for unsafe content.
Here are a few more things you should do over time:
- Add the "https" site in Google Search Console and Bing Webmaster Tools.
- Submit your sitemap .
- Update all social profile links to point to the “https” website.
- Use the Broken Link Checker plugin to find redirected internal links and fix them in one click.
- Go to Google Analytics and update the URL of your website.
Hopefully, the above helps you to set up HTTPS on your blog.
Don’t forget to share this article!
Disclosure: Some of the links in this article contain affiliate links, which means we may earn a commission if you click through to visit us, at no extra cost to you. See how SidelinePlay is funded, why it’s important, and how you can support us.
Was this helpful?