CloudFlare has made SSL free for all accounts to encrypt the connection between its servers and web browsers. Recently, they’ve also enabled HTTP/2 to boost performance of websites using SSL/TLS, therefore, SSL is expected to be widely adopted in the upcoming time.
However, setting up the Universal SSL is not an easy single click like CloudFlare said. Although you don’t have to worry about buying a certificate, installing it on your server and renewing it, you still need to set up properly or your site will be broken.
I will show you a step-by-step guide on how to migrate to HTTPS and set up CloudFlare’s SSL on your WordPress website.
1. Enable SSL
Log in to your CloudFlare account, choose your domain and click on the Crypto tab. In the SSL section, you can choose among some SSL options like Flexible SSL, Full SSL and Full SSL (Strict). If you just have informational websites with no sensitive information, you can choose Flexible SSL as it is the easiest way to implement and doesn’t require an SSL certificate on your server. Although this is less secure, I think it is enough for majority of news sites out there.
2. Set up SSL on WordPress
Install CloudFlare plugin, it will add Protocol Rewriting option to support Flexible SSL.
Open PHPMyAdmin, choose your database, then run the SQL query to change URLs of all your images and links in your posts.
UPDATE wp_posts SET post_content = REPLACE(post_content, ‘http://www.yourwebsite.com’, ‘https://www.yourwebsite.com’) ;
3. Force https for your Site
Go to CloudFlare, navigate to Page Rules tab and add the new rule: *yourdomain.com* and switch on the “Always use https” toggle.
You don’t need to change Website address and Site Address (URL) in General Settings. Besides, editing .htaccess file in your WordPress directory is unnecessary because you’ve just forced HTTPS in the above step.
Now you might see the infinite redirect loop error on your website or Wp-admin dashboard. Just add the lines to your site’s wp-config.php file (it applies to Flexible SSL option):
if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)
You should see a green lock icon on the address bar when opening your website now.
Those are all the steps I did to migrate my website to HTTPS. Let me know if you have any issue following the tutorial.