Served via HTTPS

Written on 2 January 2017, 01:11pm

Tagged with: , , , ,

Starting 01/01/2017 this blog is served via HTTPS. Thanks to Cloudflare, the certificate set up was a breeze.
But switching a WordPress site from HTTP to HTTPS is not that easy. Luckily, css-tricks.com came to help. Below the full list of steps I did to move this website to HTTPS:

1. Buy the dedicated certificate from Cloudflare

This website already used Cloudflare (since 2011), so adding a dedicated certificate was really easy:

2. Activate the option “Automatic HTTPS Rewrites”

3. Enable https for the admin part

This is not so straightforward, you have to add the line below in wp-config.php:
define('FORCE_SSL_ADMIN', true);
Of course, the https was already enabled for my website at this point.

4. Modify WordPress and Site Address

WordPress/Settings/General:

5. Update legacy content: images

The queries from CSS-Tricks did the trick (!) and replaced the paths of all the images in the wp_posts table:

UPDATE wp_posts 
SET    post_content = 
        ( Replace (post_content, 'src="http://', 'src="//') )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

6. Update legacy content: links

I used the Velvet Blues plugin to update all the links in the database. Please note – this plugin is supposed to be used only once, then you can de-activate it. Make sure that you make a database backup and that you donate a few dollars to the plugin authors:

7. Redirect all http traffic to https

Add this to your .htaccess file:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Voila, after this step everything should be done. The dedicated HTTPS certificate shows up nicely in all the browsers. No need for an Extended Validation certificate just yet 🙂

For another website that I am managing, the shared HTTPS certificate looks like that:

Final note: the new images that will be uploaded will have https:// in their path. For me that’s fine, since I don’t plan to go ever go back to HTTP, but if you want to be 100% sure follow the step 7 from css-tricks tutorial. Moreover, I can always replace all the https:// paths to protocol independent // paths using the Velvet Blues plugin.
PS: Thanks again to CSS-Tricks for the great tutorial.

Comments (1)

Leave a response