Moving to HTTPS on WordPress

I just recently took CSS-Tricks «HTTPS everywhere». That is, every URL on this site enforces the HTTPS (SSL) protocol. Non-secure HTTP requests get redirected to HTTPS. Here’s some notes on that journey.

1. Get an SSL certificate

2. Force HTTPS Redirection With Apache

3. Mop up Mixed Content Warnings

In this case, it was some images being used in a CodePen embed with an HTTP src.

But it could be anything. HTTP <script>s, HTTP CSS <link>s, HTTP <iframe>s. Anything that ends up making an HTTP request that isn’t HTTPS will trigger the error.

You just need to fix them. All.

4. Protocol Relative URLs! (or just relative URLs)

You know, those ones that start with //, like this:

<img src="//" alt="image">

5. Harder problem: images within legacy content

There are thousands and thousands of pages on this site, and lots and lots of images within those pages. Right in the content itself. There are a bunch on this very page you’re looking at. The problem is those images had fully qualified HTTP links on them.

I didn’t relish the idea of using some WordPress filter on content to kinda hotswap those URL’s out — I just wanted to fix the issue. Essentially fixing the src of images to be protocol relative.

UPDATE wp_posts SET post_content = ( Replace (post_content, 'src="//', '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;

We even fixed the Custom Fields in much the same way:

UPDATE wp_postmeta
SET meta_value=(REPLACE (meta_value, 'iframe src="//','iframe src="//'));