I started using CloudFlare as soon as I set up my first WordPress blog. Ever since, I am an avid user and been loving it. When Google announced that HTTPS will become a ranking factor, CloudFlare announced to it’s customer free support for HTTPS. Even to the FREE plan users by offering a FREE SSL certificate. What a great Idea.
Unfortunately, not all is roses. What looks like a simple task, can become a long time process to set up HTTPS in a way that entire website is encrypted. By following this guide, you will be able to set up HTTPS on your WordPress website for free and quickly.
With Cloudflare, you have an option to set up a free SSL on your WordPress website. Reasons why would you want to have a SSL enabled web site are:
- SSL is now a ranking factor for Google search engine, meaning that SSL enabled website tend to rank higher than sites without
- Chrome Roost notifications work only on SSL enabled websites. Math is simple, encrypt the website, get more subscribers to your blog.
Easy way to set up CloudFlare SSL on WordPress enabled website
Setting up an encrypted website is not a task you do every day. The first problem is that you have to buy a certificate. You can get it for as low as $25 but it does cost money and you have to renew it on a yearly basis. The second problem is with certificate installation. Even if you use a hosting panel like Cpanel, setting up SSL certificate and enabling it, is not something beginners would easily do. Cloudflare has an easy way to set up flexible certificate.
While solution should work without any problems, In some situation it can happen that WordPress experiences a loop. To fix that, you have to install a plugin that prevents this from happening. Once the plugin is activated we can set up page rule to force SSL for your website. Once we do that we have to install WordPress plugin which forces SSL automatically for the entire website.
What you should NOT do
If you buy and install SSL certificate on your own server / share hosting CPanel, you can enable SSL in WordPress settings.
But we don’t want to do this.
We don’t have a certificate. We will use the one from CloudFlare. We also don’t enable HTTPS support in WordPress as CloudFlare does encryption for us. Let’s take a look at the picture to understand how this works.
CloudFlare is a CDN network. All traffic coming to our site is routed to CF servers. Traffic between visitors and CF is encrypted. But traffic from CF to our server is not. This is the main difference between CloudFlare flex SSL and owning and using own certificate on our servers.
This solutions is perfect for blogging sites as it’s free and it secures information that readers are looking at. Since traffic from CF to our server is not encrypted, it’s not appropriate for web shops.
By using this tutorial Roost notifications will work for Chrome browsers as well, extending subscribers to Windows, OSX and Android operating systems.
How to guide: Enable CloudFlare Flex SSL on WordPress
In some cases when we enable Always use HTTPS rule on CloudFlare panel, WordPress goes in to the loop. To prevent this problem, we have to install a plugin called CloudFlare Flexible SSL.
1. Install plugin CloudFlare Flexible SSL. Open your site with https prefix. If site is loaded then we can proceed to the next step. (If your site is not loaded completely don’t worry, we will fix this)
2. Login to your CloudFlare panel, go to Page Rules and enable Always use HTTPS. This rule will force that traffic is always loaded with https. In order to cover potential sub-domains and categories, I suggest you ad *.yourdomain.com/* as the pattern.
Now that you have enabled always SSL for your website, every time visitor will enter www.youdomain.com, he/she will be redirected to https://www.yourdomain.com
3. Unfortunately, not all website assets load encrypted. Some items won’t load at all. What you may see when you open your website is situation similar to mine. As you can see, website is broken.
There are many reasons why not all assets are loaded. It can be that theme is not coded properly or that some plugins are not using best practice development.
You will notice insecure lock in front of web address.
To investigate which assets were not loaded you can use a tool, built inside the browser called Inspect element. (on the website click with right mouse button on a blank space, select Inspect element, go to network tab.) You will see the assets which were not loaded as a https.
To fix this problem, we have to install a plugin called SSL Insecure Content Fixer. This plugin will fix loading of remaining elements under encrypted protocol.
We are almost done, before you say hurrah, inspect the elements again. In some cases pictures are not loaded under https.
To fix the problem with pictures, there is a plugin every one knows. It’s called Jetpack from Automattic. Photon is a free picture CDN service provided by WordPress people. It’s the same service that WordPress.com uses for loading and distributing images to it’s visitors around the world.
There are many benefits with CDN service, like for example loading of images from the server that is the closest to the visitor. Reason Photon is perfect for this task is because by default it uses https for loading images.
If you don’t use Jetpack you have to install it first. Go to plugin features and find Photon. Click on Activate.
After Photon is enabled, all the website elements will be encrypted.
Mission complete, your website is now encrypted and can potentially rank higher that your competitors and Chrome notifications will work if you use a Roost plugin.