Cloudflare SSL breaks Wordpress & Joomla and how to fix it

Cloudflare is a fantastic free + premium CDN service that provides SSL in the free plan at no cost.

I was testing their SSL with WordPress & Joomla, and both were broken which upset me for a minute. However, I found the easy solution and thought to share it with you.

In this article, you will learn: –

So first thing first – let’s ensure you have SSL activated in Cloud Flare

cloudflare-ssl

This ensures Cloud Flare SSL is activated on your website.

Fix Cloudflare SSL issue in WordPress

As you can see in the below screenshot, my WordPress site layout got broken. This usually happens when all content is not getting loaded through https which results in a broken site.

There are two ways to fix this –

cloudflare-ssl-broken-wordpress

First – ensure all contents are getting loaded from the https URL. However, if you were using a third-party theme then mostly you would prefer the second solution, which is easy.

Second – Install Cloudflare Flexible SSL Wordpress Plugin

That’s all – this plugin takes care of everything. As you can below, it loads correctly.

cloudflare-ssl-fixed-wordpress

Fix Cloudflare SSL issue in Joomla

I activated Cloud Flare SSL on my website which is on Joomla and got the layout broken.

cloudflare-broken-joomla

To fix this – install “Cloudflare For Joomla” plugin

Now you can see it’s getting loaded correctly.

cloudflare-fix-cloudflare-ssl

Once you activate, you must ensure HTTP is getting redirected to https to avoid duplication in a search engine.

HTTP to https redirection using Cloudflare Page Rules

cloudflare-https-redirection

That’s all – you are all set to use free SSL-powered by Cloud Flare. Don't forget to test your SSL for any vulnerabilities.

Enjoyed reading the article? How about sharing with the world?