Fix Mixed Content Error with CloudFlare SSL and WordPress Configuration

CloudFlare is very well known for providing speed and security enhancements to its clients. It is one of the best free resources for WordPress which will help you make your WordPress site perform better.

CloudFlare’s free plan includes a free SSL certificate called Flexible SSL. A free SSL certificate is like a gift for bloggers who look for resources to make their site better without spending too much. But many users face mixed content error after enabling Flexible SSL with WordPress. In this easy to follow tutorial, I will show you how to fix mixed content error on your site.

What is Mixed Content error and why a browser displays it?

When you configure SSL with your site, the connection between your visitor’s device and server is encrypted. All resources of your site should be served encrypted. If there is some content which is not encrypted, a web browser will display mixed content error as your website is serving a mixture of secure and insecure content.

CloudFlare’s official WordPress plugin provides a feature called HTTPS Protocol Rewriting. When enabled, it rewrites all URLs of your WordPress site and eliminates leading HTTP string from them. For example, the URL of an image hosted at http://techstuffer.com/images/an_image.jpg will be changed to //techstuffer.com/images/an_image.jpg after eliminating the leading http: string.

Thanks to this change, all content served by techstuffer.com is considered to be served over HTTPS, without changing URL of each content manually. But content served by some third-party plugins can not be included in this as they are not served by your server. They are served by a third-party servers and if the content is not encrypted, this is a good reason for a web browser to display mixed content warning.

How to fix mixed content error in this situation?

To fix mixed content error in case of Flexible SSL and WordPress setup, we will be making a few changes.

First, make sure you have configured CloudFlare with WordPress as described in previous article – How to Configure Cloudflare for WordPress

Secondly, configuration of CloudFlare Flexible SSL is also done as described in previous article – How to Configure Free SSL from Cloudflare with WordPress

When you are done, make sure you have enabled HTTPS Protocol Rewriting option under Settings -> CloudFlare in WordPress back end.

Now install SSL Insecure Content Fixer plugin and activate it. Now go to SSL Insecure Content Fixer settings and configure it as below:

Under Fix insecure content option, select Widgets.

Under Fixes for specific plugins and themes, select List category posts with pagination. If you are using WooCommerce with WordPress, select WooCommerce + Google Chrome HTTP_HTTPS bug option too.

Under HTTPS detection, select HTTP_CF_VISITOR (CloudFlare Flexible SSL) if not automatically detected by the plugin.

Hit Save Changes to confirm the changes you made.

If you are using a cache plugin like WT3 Cache or WP Super Cache, make sure you clear all cache. You might not be seeing the results until you clear your browser’s cache as well. Do so and visit your site. Make sure the padlock is green and Mixed Content warning is no longer there.

That’s it folks. You were reading Fix Mixed Content Error with CloudFlare SSL and WordPress Configuration on techstuffer.com. If you found this tutorial useful, please share with others.

You can follow Tech Stuffer on Twitter and join us on Google+. You can also follow me on Flipboard.