Cloudflare SSL breaks Wordpress & Joomla and how to fix it

By Chandan Kumar in Joomla on June 7, 2020

Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.

Invicti Web Application Security Scanner - the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

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: –

How to ensure SSL is activated in Cloud Flare
How to fix broken WordPress due to Cloud Flare SSL
How to fix broken Joomla due to Cloud Flare SSL
How to ensure HTTP is getting redirected in https

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

Log in to Cloud Flare
Select the website from a list
Click on Crypto

Ensure you can see “ACTIVE CERTIFICATE,” and SSL level is enabled like Flexible, Full, or Strict based on what you need. If you don’t want to spend money on having a cert on your web server, you can leave the default value, which is Flexible.

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 –

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

Login to WordPress admin
Go to Plugins >> Add New
Search for “Cloudflare Flexible SSL”
Install and activate it

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

Fix Cloudflare SSL issue in Joomla

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

To fix this – install “Cloudflare For Joomla” plugin

Download Cloudflare For Joomla plugin. You need to register for a free account first.
Login into Joomla Admin
Go to Extensions >> Extension Manager
Click on Choose File and select the downloaded plugin and click on Upload & Install
By default, Joomla will not enable this plugin, so you got to do this manually. To enable:-
Go to Extensions >> Plugin Manager
Search for Cloud Flare and enable

Now you can see it’s getting loaded correctly.