Configure Cloudflare SSL on nginx using WordPress

Configuring SSL is tricky sometimes, especially in cloudflare.

In this post we’ll see how to implement flexible SSL offered by cloudflare on a WordPress based site running on nginx on Ubuntu 14.04 server.

Please note, go step by step to avoid any misconfiguration. Doing steps in different order can result in server issues that can’t be solved by someone not experienced in all this stuff.

Cloudflare Settings

First step is to do settings with in the cloudflare.

We’ll do two settings:

  1. Setup ssl in cloudflare
  2. Setup page rules in cloudflare

1. Turn on Flexible SSL on cloudflare

First step is to turn on flexible SSL. Note that there are other options available for ssl too, but that’s beyond the scope of this article.

Follow these steps to do so:

  • Login to cloudflare
  • Click on “Crypto” in top menucloudflare-ssl-settings
  • Select “Flexible” from options for SSL

enable-cloudflare-flexible-ssl

2. Setup Page Rules in cloudflare

Select “Page rules” from the top menu in cloudflare account

Add the rule:

Pattern: http://*domain.com/*

Change the domain.com to your own domain name.

And change “Always use SSL” to on.

Save the rule and make sure that it’s on top of all the rules if you’re having other page rules in your account for this domain too.

Note: Now your site is being redirected to https version. However this is only cloudflare half of the settings. If you visit your site front end you may see that it’s broken or gives any other error. We’ll be fixing it through the next half of the settings inside wordpress now.

WordPress Settings

We’ll be making few changes to our WordPress, including:

  1. Installing 2 plugins and configuring them
  2. Settings up settings for WordPress

1. Installing plugins

We will install and configure two plugins:

  • Cloudflare official plugin: https://wordpress.org/plugins/cloudflare/
  • SSL insecure content fixer: https://wordpress.org/plugins/ssl-insecure-content-fixer/

Configuring cloudflare plugin on wordpress

Configuring this plugin for WordPress is simple, simply add your domain name, api key, email id, keep the development mode off and HTTPS protocol rewriting turned on. Save the settings and we’re done with it.

Configuring SSL insecure content fixer

Goto its settings and select (these settings vary based on your WordPress blog or site configuration, so check carefully the ones you need, I liked to use these):

Fix insecure content: Capture

Fixes for specific plugins and themes: Select Nothing (or select the ones you need)

HTTPS detection: unable to detect HTTPS

Save and you’re done.

2. Modifying WordPress settings

Goto: WordPress Settings > General and change both WordPress Address (URL) and Site Address (URL) to the “https://…” version of your website (change http to https).

Save the settings.

Make sure you do this as the last step or you might face an error.

Clear your cache (both of any cache plugin in your WordPress site and of your browser, or any server based too if necessary) and you’re done.

Let me know if you face any difficulty and want me to setup ssl for your site through cloudflare on nginx running wordpress or any other setup.

Leave a Reply

Your email address will not be published.