How to Configure Cloudflare Flexible SSL with WordPress website

How to Configure Cloudflare Flexible SSL with WordPress website
by Janeth Kent Date: 03-12-2015 wordpress cloudflare

This article is part of a serie of articles about Wordpress optimization with Cloudflare and some kinds of servers, if you want to understand well read these articles before:

Speed up your site and protect it against DDOS attacks with CloudFlare 
Million of visitors per day with a super cheap php mysql server using nginx and varnish 

 

For those of you who are getting Cloudflare for their universal or flexible SSL service, one of the biggest issue is simply to get it to work. In this complete how to set flexible SSL guide for wordpress, we will go through every part of the setup, including the problems that you can run into. We will start by going through why you might need to use flexible, when you should use flexible SSL, and the problems that can cause the flexible SSL not to work for your WordPress.

ma-no.org is powered by Cloudflare's flexible SSL service and as you can see, everything is working correctly.

This complete WordPress Flexible SSL walkthrough for Cloudflare will help you do the following:
1. Changing WordPress to serve over HTTPS (SSL) through Cloudflare without error.
2. How to fix infinite redirect loop.
3. How to enable sitemap's function to serve sitemap with HTTPS address using flexible SSL.
4. Some starter webmaster tips for HTTPS migration.

This WordPress plus Cloudflare Flexible SSL guide assumes the following:
1. You have a working configuration that uses cloudflare's nameserver DNS service. It is a requirement to get flexible SSL to work for WordPress.
2. You do not have a SSL certificate for your own server. If you do, you should use the Full SSL feature instead of flexible. However, we will not go through the Full SSL setup in this guide.

Why You Should Use Flexible or Universal SSL

If you have an informational site and simply want to encrypt the traffic for your visitor, you should setup for HTTPS for your sites. Sometimes, getting an SSL certificate can be costly and inconvenient. Cloudflare's flexible SSL service encrypt the traffic from your visitors to the cloudflare server. This means that the encryption is usually sufficient for an informational based site.

However, this setup is not that great for ecommerce site or sites that handle sensitive information. The information between the Cloudflare server and your origin server is not encrypted.

The second main reason is cost and ease of setup. It is much cheaper to setup a simple flexible SSL on cloudflare's end than to figure out SSL migration for your own site.

Turn on Flexible SSL from Cloudflare's Setting Screen

Without further waiting, we will start with the actual guide of teaching you how to setup flexible SSL on your WordPress flawlessly and easily. Again, we assume that you already have a working Cloudflare + WordPress configuration where your website is served through them with the DNS change.

If you just signed up for the Cloudflare's service, check first to see if Flexible SSL is actually enabled on their end. After you change the SSL setting, wait for the confirmation saying that SSL is active. In our experience, the waiting time for flexible SSL can take from 12 hours to 30+ hours.

Wordpress CloudFlare Flexible SSL

One good way to tell is to access your website via the HTTPS address after a certain time. For example, instead of the usual http://www.ma-no.org. Try to type in https://www.ma-no.org. If the flexible is working, your website should load. If it's not active yet, you will see errors with screens like the following:

Wordpress HTTPS Cloudflare Error 2

Wordpress HTTPS Cloudflare Error

Note that even though you can load your webpage via HTTPS, your website will get some error messages. This is because your site's resources are still being loaded from HTTP, and that can cause errors. Continue the guide to finish your WordPress flexible SSL setup.

Installing HTTPS (SSL) WordPress Plugin

Next, you will need to install a wordpress plugin called WordPress HTTPS (SSL). The point of this plugin is that it can rename all of your CSS, javascript, and image resources with HTTPS. After setting the proxy option, your HTTPS wordpress site should load naturally.

Wordpress HTTPS SSL Setting

Change your WordPress website's HTTP address to HTTPS

It does not matter where you read it, it is never a good idea to change your WordPress website address without knowing what you are doing. Do NOT change your WordPress's address and site address directly. The only reason that you are using Cloudflare's Flexible SSL feature is because you do not have a natural SSL certificate. Without proper server settings, changing the HTTP to HTTPS will break your site immediately! And if you do have an existing SSL certificate, there is no reason for you to use this flexible SSL guide as you should be setting up for WordPress Full SSL option.

Changing the first entry will cause your site to be down completely. Changing the second entry will cause your main page to have infinite loop where you need another plugin to fix. However, you will need to change the second entry, we will fix the redirect loop error later.

The reason why you need to do this, is so that your WordPress sitemap plugin can function correctly with the HTTPS SSL addresses. Without changing this setting, your sitemap plug in will either show blank, or with incorrect HTTP addresses.

Wordpress HTTPS SSL Address

Installing CloudFlare Flexible SSL WordPress Plugin

After you changed the setting and try to load your site. You will see this error: this webpage has a redirect loop. To fix this problem, a install a wordpress plugin called CloudFlare Flexible SSL. After installing, you should find your pages loading correctly without the WordPress redirect loop error.

If your HTTPS (SSL) Cloudflare and WordPress setup still does not load correctly at this point, or if it only works some of the time, your cache program installed on your WordPress site may be the culprit.

Existing WordPress Cache Issues

Some cache plug-ins can run into issues through the process of caching both the HTML and website resources. This can confuse Cloudflare into loading incorrect pages with incorrect resource file SSL address. When we tested it, we had issues with W3 Total Cache. After a few trials and errors we went with WP Super Cache and that solved the problem.

Changing HTTP to HTTPS redirect rule via Cloudflare

Before you start this step, visit your pages and make sure that everything is loading correctly. Remember to use anonymous login such as Google's incognito to make sure that you see what your visitor sees.

Your next step is to visit cloudflare again to add more direct rules. Although the site address change can already do the trick. You want to ensure the Cloudflare follows through with the redirect rules on their side as well.

Visit cloudflare, check the page rule tab under the website. Type in http://www.ma-no.org/* (use your own site). And change the option to Always use https.

Wordpress HTTPS Cloudflare Page Rule

Starter WordPress HTTPS SEO considerations

Lastly, there are a couple more things to do to finalize your WordPress HTTP to HTTPS migration using Cloudflare Flexible SSL.

WordPress HTTP to HTTPS Canonical Setup
The canonical setting tells Google or other search engines that you want them to index certain versions of your website. Although after setting the site address it should already have the correct canonical setting. Double check your source code to make sure that the canonical is displayed correctly for your WordPress site.

If not, you can update it using WordPress SEO by Yoast under Permalinks > Canonical Settings. Change the drop down box to show Force HTTPS.

Setting Up Google Webmaster Tool for HTTPS
If you already have an HTTP site registered with Google Webmaster tool, you will need to register your HTTPS as well at this point. Google at this point treats HTTP and HTTPS as two different websites. For example, http://www.ma-no.org is different from https://www.ma-no.org in Google's eyes.

After registering, check the sitemap that your WordPress plugin has generated. Make sure that the new version under HTTPS has the correct URL's using your HTTPS address. Submit the new site map to make sure that Google can index those new HTTPS pages over time.

Lastly, just as a safety measure, use Fetch as Google tool to check a few of your pages. Make sure again that the WordPress pages are loading correctly over Cloudflare flexible SSL.

Change Your Internal WordPress Links to HTTPS
Now, although you already have the redirect rules setup so that all of your HTTP pages can automatically change to HTTPS. It is a good idea to manual go through your pages, and change all the internal links so that they point to HTTPS directly.

After all these steps, you should now have your WordPress site served over Cloudflare flexible SSL without actually having SSL. All of your pages should have the green certified lock mark instead of orange, and your SEO for the HTTPS switch should be decent to start with. Good luck and let's encrypt!

 
by Janeth Kent Date: 03-12-2015 wordpress cloudflare hits : 7146  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Best Paywall Plugins for WordPress

The most effective way of monetising a blog or a website, is moving content behind a subscription fee much in the same way the traditional print press is doing. Using a…

86 Must Have WordPress Plugins Of 2013

Today we are going to share Best 85 WordPress Plugins for 2013 which will help WordPress Webmasters all over the world. 1. ALL AROUND WORDPRESS CONTENT SLIDER CAROUSEL All Around wordpress content…

17 Useful Code Snippets for WordPress Developers

When coding WordPress themes, especially if you do it regularly, its really useful to have a selection of code snippets in your toolbox to just 'copy-n-paste' as and when the…

A Collection of Essential WordPress Plugins

With so many plugins available, finding the best WordPress plugins can be hard and time-consuming! That is my motivation for gathering this comprehensive collection of Essential WordPress plugins. Enjoy! WP DB…

50 WordPress tutorials for designers and developers

Wall Street Journal, Ford, Sony, Katy Perry, GigaOM, CNN. Well-known brands. What do they all have in common? Although you probably won’t find this tagline on their sites anymore, under…

WordPress tips and tricks: how to custumize your theme

When you're in the process of writing a WordPress theme, there are a few behaviors you can change. Some of them are pretty basic, but they can really enhance the…

90 free wordpress themes

WordPress is one of the most popular Free and Open source blogging, publishing and CMS with lots of flexibility. It started as a blogging CMS but now its used as…

Install Wordpress, Nginx, PHP, and Varnish on Ubuntu 12.04

About Varnish Varnish is an HTTP accelerator and a useful tool for speeding up a server, especially during a times when there is high traffic to a site. It works by…

Clicky