Hello Internet people, I’ll show you how to set up a free WordPress SSL certificate with CloudFlare.
This will work on any hosting. All you need is access to your domain DNS settings, which 99% of the domain providers allow.
When you complete this Tutorial you will have a little green padlock next to your URL.
Alright in this Tutorial you will learn the following:
Wait… that’s for another Tutorial brought to you by sexy Bill cuddling a computer.
Cloudflare is actually a CDN which offers a free SSL with it. CDN means Content Delivery Network and below is a nice map to showcase how it works.
Basically, they have servers all around the world and your content is copied to all those servers.
Let’s say your user is in Canada. The content will be loaded from a Canadian server or whatever is the closest CloudFlare location. This means the data has to travel less distance geographically, thus it will be loaded faster.
Furthermore, Cloudflare acts as a Layer between the internet and your server. When a user types in your website’s URL, they will go through Cloudflare before landing on your website. Don’t worry, you won’t even notice this.
Learn more about the benefits of CDN.
Let’s get back to the tutorial by going to cloudflare.com.
1. Click on sign up here at the top of the page.
2. Fill in your email and create a password.
I already have an account so I’m going to just log in. In the meantime, just sign up for CloudFlare the steps are really straightforward.
Once you’re done you will see this page.
And if you don’t just click on the “Home tab” and you should see the same page.
With the free account, you get to add an SSL certificate to one domain. So in my case, I’m going to use it this blog as an example.
3. Type in the domain name (without the www and the HTTP).
Just the domain like this befittyblog.com.
4. And then click on “add site”.
5. In the next step, it will tell you that it’s querying all the DNS records.
6. Then click on “next”.
7. and here you will select the plan in my case I’m going to use the free one.
8. Don’t forget to click on “confirm”.
9. Once the page is loaded, there will be displayed all kinds of information about your DNS records.
In summary, every domain has certain records that are publicly available, CloudFlare fetches those and shows all of them here.
10. Double check that there is an orange cloud icon next to your domain name.
And also the www like this one:
“And if they don’t have an orange cloud, click on the grey cloud next to them and they will become orange.”
11. Next, you can click on “continue”. If you have no errors it’s all good!
Next page, is really useful. It shows your current nameserver records and what they should be for Cloudflare to work.
At this point just copy and paste the new nameserver records to a notepad or any text editor. You will need these soon.
12. When you are done click on “continue”.
13. On the next page, it encourages you to actually modify the DNS records. To achieve this we have to go to the domain provider.
So wherever you bought the domain. All of them allow DNS records changes.
I’m using GoDaddy and I’m already logged in.
14. Go to your account and under the domains, find the domain that you’ve just added in CloudFlare.
15. Click on DNS (this might look slightly different in your domain provider, but the idea is the same).
16. On this page, you can manage your DNS information and you can see there’s a lot of information here if you scroll down in the middle of the page.
You will see the nameservers section and that’s actually what we’re going to change!
As you can see these two are the same as what Cloudflare displayed above.
17. Modify the records by clicking on the “change” button.
18. Next, in GoDaddy, you need to choose “custom”.
19. Now go to your text editor and grab the two DNS records that Cloudflare gave you earlier.
20. Copy paste them in the 2 fields.
21. Don’t forget to save the changes.
Immediately there’s a notification from GoDaddy that there have been changes and as you can see in the below screenshot, the nameservers are changed to the Cloudflare nameservers.
When Cloudflare notices that you change the DNS to the right nameservers you’re going to receive an email.
Here is the email you will receive:
In summary, it states what you’ve done and the old records and new records. Save this email just in case something goes wrong, you will be able to change the nameserver back to old ones.
22. Then go back to GoDaddy. You’ll see that the page has been refreshed and it’s telling that there are no records. That’s good because it means GoDaddy is not controlling the DNS records anymore. In other words, Cloudflare has taken over.
23. Go back to Cloudflare and click on the “recheck the nameservers”.
It will trigger CloudFlare to check everything again and as you can see once it’s done, the status is active and that CloudFlare is in control of the DNS.
Next, we need to install an SSL certificate plugin for WordPress. It will automatically recognize Cloudflare SSL certificate and display the correct SSL on the website.
24. Log in into WordPress.
25. Navigate to “plugins” and click on “add new”.
26. Scroll down to the search box and type in “Cloudflare”.
27. You’ll have a few options, you need CloudFlare flexible SSL.
Then click on “install” and don’t forget to activate the plugin once it’s installed.
The great thing about this plugin is that you don’t need to adjust any other settings. It just works out of the box.
28. Go back to CloudFlare.
29. And in the “overview tab”, just scroll a bit further down the page, until you see the domain summary and there’s a link to “SSL”. Click on it.
30. On the right, the dropdown that says ”full” change it to flexible.
31. Once it’s reloaded. You’ll see that Universal SSL status is ACTIVE. This means that this certificate is installed.
However, it might take up to a day for it to actually work. So you’ll have to wait for the DNS records to propagate. Usually, it takes 30 minutes but it also might take longer.
32. One more thing you need to do on this page, just scroll down. Until you see “always use HTTPS” section and enable it.
It means if somebody types in HTTP it will automatically redirect to HTTPS.
Now if you go back to the website (this might take up to 24h) you should see a green padlock next to the URL.
If you see a yellow padlock or a padlock with an “i” then you probably have mixed content warning.
In summary, it means that you have some images or some style sheets that are loaded using the HTTP in the URL. The below video shows how to fix it.
Below in comments Chris resolved this issue by:
If you have an email problem, that’s because you need to create an mx line in Cloudflare, the system is not doing that automatically, so you need to do it yourself. After that, your mail will work as normal.