Convert WordPress to HTTPS with SSL for Free

You already know the importance of HTTPS. Google looks more favorably on SSL enabled sites, and you also gain credibility by having the “lock” icon at the top of the address bar next to your URL. There’s just one catch – SSL certificates cost money. And the free ones are time limited, or have some other catch.

But there’s another way to convert your site to convert WordPress to https completely for free – permanently. No hidden fees, no compromises, no time limits. And best of all – you don’t have to make major changes on your website. No modifying .htaccess files, or DNS records, or even waiting for a long time before your site is validated. Using this technique, I was able to convert this site (wp-tweaks.com) into https within minutes. Surprisingly, you might already have https without even knowing it. How?

CloudFlare.

So here are the steps to convert WordPress to HTTPS and get a free SSL certificate for your site.

Step 1: Connect with CloudFlare (Free plan)

Many of you already use CloudFlare to speed up your site. Lots and lots of hosting providers provide in-built support for CloudFlare integration including SiteGround, DreamHost, BlueHost, and dozens of others. You can check this list to see if your hosting provider has a partnership with them. If not, here’s a tutorial to set it up manually for free.

If your host supports it, you should see the CloudFlare icon in your cPanel like this:

cloudflare-cpanel

From here, it’s just one step to activate CloudFlare on your site.

activate-cloudflare

You might be concerned that the free plan doesn’t offer an SSL certificate as shown in this comparison:

dont-mind-no-ssl

But don’t worry about it. What we’re going to do is use CloudFlare’s SSL certificate to convert WordPress to https. Magic!

Step 2: Select Flexible SSL on CloudFlare

Once CloudFlare is working on your site, head over to the “Crypto” section on top.

cryto-cloudflare

In the first item on the list “SSL”, select “Flexible” from the drop down list if it’s not already selected.

flexible-ssl-1

 

Your changes should be saved automatically. It might take a short while for them to propagate.

Step 3: Access your Site using HTTPS

Once CloudFlare has enabled Flexible HTTPS on your site, you should already by able to access your WordPress installation using the “https” prefix instead of “http”. The problem is that it doesn’t display properly.

accessible-over-https

Your stylesheets and third party Javascripts might be missing. If you click on the SSL certificate information from the address bar, you’ll see a lot of error messages about “Mixed Content”. When you check the console, you get more details:

mixed-content-error-message

What this means is that even though your main site is loading via HTTPS, a lot of other files on your server are being served via HTTP. Theme files, stylesheets, plugin files etc. This makes sense. The references to these files are still via HTTP – after all, nothing has actually changed on your site.

We’re going to use a simple plugin to solve this problem. And you don’t even have to change your site information in Settings -> General either. In fact, the beauty of the CloudFlare approach is that your existing site remains mostly untouched. This makes it easy to revert back any changes you made.

Step 4: Install the CloudFlare Flexible SSL Plugin

To solve the mixed content problems, install the CloudFlare Flexible SSL add-on to your site. This gem of a plugin does all the dirty work for you. Simply install and activate and you’re done!

Step 5: Redirect all Site Pages to the HTTPS Version

By step 4, your site should be completely HTTPS ready. The only problem is that visitors will still be accessing your basic HTTP site via existing links. And if they type your domain directly into the address bar, they’ll still see the old version. So we need to redirect all requests to HTTPS.

Contrary to what you may think, we’re not going to use .htaccess for this operation. In keeping with the “hands off” philosophy of this tutorial, we’ll use a CloudFlare page rule instead. To do this, log into your CloudFlare account and select “Page Rules” from the top as shown here:

cloudflare-page-rules

Now click the blue “Create Page Rule” button and you’ll get this dialogue box:

always-use-https

In the first box, type in the following:

http://*yourwebsite.com/*

Replace the text in bold with the name of your website. Below that, click “Add a Setting”, and from the resulting drop down box select “Always Use HTTPS” as shown above. Save your changes.

Now all incoming http requests to your site will automatically be redirected to the https version. If everything goes well, should see a nice pretty lock next to your site URL in the address bar of your browser like this:

Successfully convert WordPress to https

Beautiful isn’t it? With just a few clicks and minimal changes you’ve managed to convert WordPress to https for free, with a solid SSL certificate. Forever – no expiry date! All using the magic of CloudFlare.

Comments

  1. Hi,

    Thank you for this article. I did all the steps on my new website and it seems to be working, but I do wonder about one thing.

    Some other tutorials also mention to install https://wordpress.org/plugins/wordpress-https/ plugin but I have my doubts I need that. This plugin seems to be doing what CloudFlare Page Rule does and at the moment, my site works fine without it.

    What do you think about this plugin? Is it for cases when website doesn’t use CloudFlare?

    Reply

    • WPTweaks Admin says:

      If your site is working fine right now, I recommend that you don’t mess with anything 🙂 . That plugin also seems to be rather old and hasn’t been updated in a while so we don’t know how well it still works…

      Reply

Speak Your Mind

*