Set up CloudFlare’s free Flexible SSL on your WordPress site

in WordPress

I’ve been meaning to play with CloudFlare’s free SSL options for a while, and I finally got around to give it a try. It took me a little while to get to a point where everything worked properly, but I think I finally figured everything out!

If you want to use CloudFlare’s free Flexible SSL on your WordPress site, here are some instructions that could help you!

  1. I set both my site address and WordPress address to use HTTPS under Settings > General in my dashboard.
  2. I enabled Administration over SSL (reference) by adding the following to wp-config.php:
    /**
     * Admin over SSL
     */
    define('FORCE_SSL_ADMIN', true);
    
  3. I set the port to 443 by adding the following to wp-config.php:
    /**
     * Set port to 443
     */
    $_SERVER['SERVER_PORT'] = 443;
    
  4. I installed and activated the CloudFlare plugin.
  5. I set up CloudFlare on my site by creating the site on CloudFlare.com and updating my DNS.
  6. In my CLoudFlare settings, I created a Page Rule to redirect all traffic from HTTP to HTTPS.
  7. Everything then seemed to work properly, but I ran into a redirect loop problem when trying to access my dashboard. The error was documented on CloudFlare’s website, and they suggested using their plugin to fix the issue, but it didn’t work on my end. So I added this to my wp-config.php file:
    /**
     * Solve the redirect loop issue when redirecting all traffic to HTTPS in CloudFlare
     * @see https://wordpress.org/plugins/cloudflare-flexible-ssl/
     * @see https://support.cloudflare.com/hc/en-us/articles/203487280--How-do-I-fix-the-infinite-redirect-loop-error-after-enabling-Flexible-SSL-with-WordPress-
     */
    if ( isset( $_SERVER['HTTP_CF_VISITOR'] ) && strpos( $_SERVER['HTTP_CF_VISITOR'], 'https' ) !== false ) {
            $_SERVER['HTTPS'] = 'on';
    }
    

    This comes straight from another plugin I found in the WordPress plugin repository, so you could use that plugin as well if you prefer.

  8. I added the following line to a functionality plugin to force Jetpack’s Photon module to serve images over SSL, and thus avoid mixed content warnings in my posts:
    add_filter( 'jetpack_photon_reject_https', '__return_false' );
    

That’s it! It seems that’s all there is to it!

Extra instructions if your site is hosted with Webfaction

If like me you host your sites with Webfaction, you might have some trouble setting up the site in the first place. Here is what you’ll have to do:

  1. Add the domain to your admin panel.
  2. Create a new application for your site, using the latest version of PHP available.
  3. Create a website named yoursite_https, set up to deliver content via HTTPS, and using the domain and website you just created.
  4. Now here comes the extra step: create an extra website, named yoursite_http, set up to deliver content via HTTP, and using the same domain and website.

It took me a while to figure this out. I had tried to set up a redirection via .htaccess, but nothing worked until I created that extra website.

Hopefully that will help the few of you trying to create the same setup!

  1. You might want to consider forcing the HTTPS version of the site now. Right now the you can access both …

    • Yeah, this site doesn’t use CloudFlare’s SSL just yet. Multisite and my caching plugin make this a bit more complicated than setting up CloudFlare on a single site, unfortunately. That’s for another weekend project, I guess :)

  2. Hi Jeremy,

    I followed your instructions, but immediately broke my site when I set the site and WordPress URL to HTTPS, and added the lines to wp-config.php to force admin through SSL. This works only if you have an SSL certificate on your server (self signed will do).

  3. Jeremy hello… im from colombia and i have a problem.

    Im making a site call: http://www.linaleal.com. In the frontpage of this site, i have biography, work (obra) blog and contact. I can see everything in the frontpage, but when I press OBRA OR WORK In the sidebar Menú i cant see all the projects that I had in homepage. Maybe i have to link pages with projects? can you help me please

Comments are closed.