How to add Cloudflare SSL to a WordPress website

Why SSL?

Google Search and Google Chrome are making it more and more unattractive to still have an HTTP (insecure) website, and are pushing publishers to go “HTTPS Always & Everywhere“. Offering HTTPS used to require an expensive SSL certificate, but thanks to Cloudflare and Let’sEncrypt, this is not longer the case. Here follow the steps you should take if you have a self-hosted WordPress site and you want to add Cloudflare SSL.

The steps to take

  1. set up your Cloudflare account
    1. Select the ‘Free plan’
    2. let Cloudflare scan your top domain DNS settings
    3. make sure your blog domain goes through Cloudflare
  2. change your DNS nameservers
    1. Cloudflare will propose the new names of your DNS servers
    2. Configure these in the admin interface of your domain name service (tip: if you want to know what they are now, use the tool dnscheck.pingdom.com)
  3. WP plugin: Cloudflare
    1. add new plugin (search on ‘cloudflare’)
    2. get your Cloudflare API key: go to your Cloudflare profile page and copy the Global API Key
    3. configure plugin: fill in your email, paste your API key and save API credentials
    4. click ‘Optimize Cloudflare for WordPress’
  4. WP plugin: HTTP / HTTPS Remover
    1. Add new plugin (search on ‘https’)

      this will replace the “http://” in front of your images into “//” which is the correct way to work in both https and http
  5. WP plugin: Disable Emoji (optional)
    1. Add new plugin (search on ‘disable emoji’)

      because otherwise this one .js file will keep on popping up as the 1 file you still keep fetching over http. If you really need emoji recognition in your text, then skip this step.
  6. enable Cloudflare SSL
    1. Wait for your SSL certificate in Cloudflare
      it will go from this

      to this

      While there is no certificate yet, you will get the following error if you try to use https anyway (in Chrome):
    2. Crypto settings
      1. SSL: Flexible (or Full, Cloudflare will normally detect this correctly)
      2. Enable “Always use HTTPS”
      3. Enable “Automatic HTTPS Rewrites”
  7. check your SSL settings
    1. Enter your blog domain name in toolstud.io HTTPS Readiness check

Bewaren

💬 security 💬 Wordpress 🏷 certificate 🏷 cloudflare 🏷 crypto 🏷 encryption 🏷 https 🏷 pki 🏷 rewrite 🏷 security 🏷 ssl 🏷 tls 🏷 web 🏷 Wordpress