Enable SSL in WordPress With CloudFlare in 2 Easy Steps

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

Requirements

Assumptions :-

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

Image Source : sharovatov

 

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

Credits/References :-

iControlWP Guide – These guys posted the first steps

WordPress Support Post – This was the bridge to fix insecure HTTPS content 

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge