I was testing their SSL with WordPress & Joomla, and both were broken, which upset me for a minute. However, I found an easy solution and thought to share it with you. In this article, you will learn: –

How to ensure SSL is activated in Cloud FlareHow to fix broken WordPress due to Cloud Flare SSLHow to fix broken Joomla due to Cloud Flare SSLHow 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 FlareSelect the website from a listClick 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, 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 loaded through HTTPS, resulting 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, you would mostly prefer the second solution, which is easy. Second – Install Cloudflare Flexible SSL WordPress Plugin

Login to WordPress adminGo to Plugins » Add NewSearch for “Cloudflare Flexible SSL”Install and activate it

That’s all – this plugin takes care of everything. As you can see 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 the “Cloudflare For Joomla” plugin

Download Cloudflare For Joomla plugin. You need to register for a free account first.Login into Joomla AdminGo to Extensions » Extension ManagerClick on Choose File and select the downloaded plugin and click on Upload & InstallBy default, Joomla will not enable this plugin, so you got to do this manually. To enable:-Go to Extensions » Plugin ManagerSearch for Cloud Flare and enable

Now you can see it’s getting loaded correctly. Once you activate, you must ensure HTTP is redirected to HTTPS to avoid duplication in a search engine.

HTTP to HTTPS redirection using Cloudflare Page Rules

Log in to Cloud FlareSelect the website from the listClick on Page RulesEnter HTTP URL in URL patternTurn ON “Always use HTTPS” as shown below

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.

Cloudflare SSL breaks Wordpress Joomla and how to fix it - 86Cloudflare SSL breaks Wordpress Joomla and how to fix it - 38Cloudflare SSL breaks Wordpress Joomla and how to fix it - 45Cloudflare SSL breaks Wordpress Joomla and how to fix it - 38Cloudflare SSL breaks Wordpress Joomla and how to fix it - 44Cloudflare SSL breaks Wordpress Joomla and how to fix it - 33Cloudflare SSL breaks Wordpress Joomla and how to fix it - 26Cloudflare SSL breaks Wordpress Joomla and how to fix it - 94Cloudflare SSL breaks Wordpress Joomla and how to fix it - 57Cloudflare SSL breaks Wordpress Joomla and how to fix it - 47Cloudflare SSL breaks Wordpress Joomla and how to fix it - 36Cloudflare SSL breaks Wordpress Joomla and how to fix it - 62Cloudflare SSL breaks Wordpress Joomla and how to fix it - 45Cloudflare SSL breaks Wordpress Joomla and how to fix it - 42Cloudflare SSL breaks Wordpress Joomla and how to fix it - 19Cloudflare SSL breaks Wordpress Joomla and how to fix it - 66Cloudflare SSL breaks Wordpress Joomla and how to fix it - 76Cloudflare SSL breaks Wordpress Joomla and how to fix it - 65Cloudflare SSL breaks Wordpress Joomla and how to fix it - 27Cloudflare SSL breaks Wordpress Joomla and how to fix it - 96Cloudflare SSL breaks Wordpress Joomla and how to fix it - 83Cloudflare SSL breaks Wordpress Joomla and how to fix it - 25Cloudflare SSL breaks Wordpress Joomla and how to fix it - 85Cloudflare SSL breaks Wordpress Joomla and how to fix it - 63Cloudflare SSL breaks Wordpress Joomla and how to fix it - 44Cloudflare SSL breaks Wordpress Joomla and how to fix it - 23Cloudflare SSL breaks Wordpress Joomla and how to fix it - 98Cloudflare SSL breaks Wordpress Joomla and how to fix it - 30Cloudflare SSL breaks Wordpress Joomla and how to fix it - 74