English English French French Spanish Spanish German German
Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
Share on:

Cloudflare SSL breaks Wordpress & Joomla and how to fix it

cloudflare banner
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 an 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
cloudflare-ssl
  • 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 –

cloudflare-ssl-broken-wordpress

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 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 see 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 the “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.

cloudflare-fix-cloudflare-ssl

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 Flare
  • Select the website from the list
  • Click on Page Rules
  • Enter HTTP URL in URL pattern
  • Turn ON “Always use HTTPS” as shown below
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.

Thanks to our Sponsors
More great readings on Joomla
Power Your Business
Some of the tools and services to help your business grow.
  • Invicti uses the Proof-Based Scanning™ to automatically verify the identified vulnerabilities and generate actionable results within just hours.
    Try Invicti
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.
    Try Brightdata
  • Semrush is an all-in-one digital marketing solution with more than 50 tools in SEO, social media, and content marketing.
    Try Semrush
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder