HTTPS is gaining ground just about everywhere and the important of surfing websites securely have raised in the given years. Given that Google loves to rank sites that are on HTTPS higher compared to non-HTTPS , it is become uttermost important for WordPress blog owners to get their blog or site to be on HTTPS.
In this simple , how-to guide. We would look into how to enable HTTPS for free , provided that you have your own WordPress blog hosted (just like in my case). This would ensure that connection to our WordPress site is secure
Best of all it can be done in 2 easy steps
- Self-Hosted WordPress site – i.e hosted on your own domain
- Cloudflare Setup
- SSL Insecure Content Plugin for WordPress (Have it installed first but do not enable it yet)
You have setup WordPress with CloudFlare , there are tons of tutorials out there on how to do this. Here is one from Cloudflare on how to set it up . The setup generally involves configuring your DNS and few other things as well
Now assuming that you have setup your site and CloudFlare to work nice , let us get into the configuration part shall we
Step 1 – Setup on CloudFlare
There are couple of things that we need to do in CloudFlare site , firstly login to CloudFlare Console and go to Crypto and then make sure that SSL communication is set to Flexible as shown below
The difference between Flexible and Full is that , in Full the communication between your server to cloud flare and finally to your visitors are secure. In the case of flexible , we would be only securing the leg between CloudFlare to our visitors (which should be good enough In order for us to do full end-to-end SSL.
Once you have set that up go to Page Rules and set up a page rule. This ensures all HTTP content is automatically redirected to HTTPS and HTTPS is enforced. So even if user types http://prasys.info , he or she is taken to the https version of it
At Page Rules page , set up a rule that looks like this , whereby force HTTPS is turned on
Please be sure to turn it off once you have it set up , otherwise it may break your site. We need to test it out before enforcing it
To test Now you may able to visit your own website in https .By default your visitors are served in http (as we haven’t turned on force HTTPS yet). You also may notice that your website does not work properly in https. No worries , we will take care of it in our next step 😀 (If it works great – awesome !)
Step 2- Setting up in WordPress
Now you have configured things on CloudFlare. We need to ensure that our website content is properly served in HTTPS. By default a lot of themes , plugins and css have hardcoded http in them. This makes serving content via HTTPS impossible and on some browsers , you’ll see a bunch of chrome errors (You can check with Chrome Developer Tools by pressing F12 and you should see an error something like this
To fix this , there are couple of ways. Either go and fix it in your themes , css , plugins yourself or you could simply use this amazing plugin which is known SSL Insecure Content Fixer to fix it.
Once you have downloaded and installed it , activate it. By default , the settings , would be set to Simple. In the case of my blog , it did not work , I still had broken images and some of my plugins did not work. I had to switch to content to get everything to work.
Now , you may have to experiment it in your case , you may also go for Capture or Capture All. But keep in mind , by doing so it may impact the performance of your website. It is something that you need to balance.
Alternatively you may take a look from Chrome Developer Tools on the plugins or css which aren’t loaded in HTTPS , so that you may contact the author or attempt to fix it yourself.
Now assuming if everything is working. Go back to CloudFlare and turn on your Page Rule ! Visit your site in HTTP and it would be taken in as HTTPS
With this , you should be able to improve your site ranking and also give credibility to your users that the content is being served in a secure environment
iControlWP Guide – These guys posted the first steps
WordPress Support Post – This was the bridge to fix insecure HTTPS content