How to Move from HTTP to HTTPS – WordPress, CPanel AutoSSL

I have literally spent over couple of days moving my WordPress site from HTTP to HTTPs, the whole reason for doing it is to make sure the connection is Secure and also Google Chrome shows “not secure” icon, if you do not have the HTTPS enabled.  Below is a simple guide to enabling SSL or get a secure lock icon for your website.

AutoSSL cPanel : Late last year, cPanel partnered with COMODO to offer free SSL, called as AutoSSL.  The beauty of it is that you will get free SSL, if your hosting provider is using cPanel. In general, many of the hosting providers use cPanel, like Bluehost, Siteground, Knownhost, etc. So, all you need to do is leverage that free SSL.

Step by Step Guide to move from HTTP to HTTPs: 

1. Enable AutoSSL : You need to ask the hosting provider to enable AutoSSL for your account. They will do it for you. If you have access, you can do it yourself too for a cPanel User by logging to WHM. Check AutoSSL Guide
2. (Optional) CloudFlare for DNS : This only applies, if you are using CloudFlare or similar provider for DNS management. We use free version of CloudFlare for DNS and CDN.
   1. You will need to change the setting of Crypto to have Full(strict) to avoid issues. This is critical, we  spent a lot of time troubleshooting this issue. Check below on how it looks.
   2.  You will need to clear the cache in CloudFlare and put in development mode to avoid caching until the process is completed.
   3. You will need to gray out the A record in Cloud Flare for the SSL to be generated and signed. You will make it normal after the move is completed. below is how it looks.
3. WordPress Settings : There are few things you need to do in sequence to avoid issues
   1. Cache Plugins : Clear all caches and Disable any WordPress Cache plugins that you use like WP Cache or Total Cache, etc.
   2. Redirect Plugins : If you have any re-directs plugins, you will need to disable that as well to avoid issues. You can re-enable them later.
   3. General Settings : You will need to change the wordpress setting under Settings -> General and change the URL to have https:// instead of http:// . See below.
   4. .htaccess file : You should see a .htaccess file in the root (public_html) folder of your wordpress installation. if you do not see it, all you need to do is set the settings on the FTP viewer to see hidden files, you will see it. Change the .htaccess file and insert the below code. This will essentially make sure to force HTTPS for all requests.
      RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
   5. Change Image and other HTTP urls to HTTPS in WordPress  :  After you do the above, you may or may not see the secure lock icon in browser bar. the reason is that you will have all the images in wordpress with old URLs still having http, instead of https, thats why you will see ‘not secure’ icon. Luckily, there is a simple way to fix all images and content using a simple plugin called Velvet Blues Update URLs . You need to install and activate the plugin, once you do it, you will see it as Update URLs under Tools section.  Now, all you need do is enter your current and new URL in it and it will fix all the images and content. It is fantastic and works great.  You need to select all the options and hit update. See below on what all to check.  After you do this update, everything should be clear and your URLs in the wordpress should have https instead of http.
      • If the plugin runs well, you will see a confirmation like below. I recommend you take a backup of the posts before you run the above plugin for safety. 
   6. Custom CSS – Header Logo, etc : If you have any custom CSS like I use in X theme for WordPress, you need to go to customizer in wordpress settings of X theme and update the CSS and JavaScript, with the new https in the URL, instead of the old http. Once you do all of these, you will have the secure lock icon appear for all the pages like below. 

If you look at my experience, the CloudFlare and missing HTTPs in the custom CSS files were really causing trouble and took time to debug.  I always recommend to take backup of everything and do the above changes.

What has been your experience ? Did I miss anything ?