26 December 2016
a-idea studio»General»How we made the switch to HTTPS on a WordPress Multisite

How we made the switch to HTTPS on a WordPress Multisite

If you are following the news in the web development world, you might have already heard that 2017 will be the year of HTTPS. Rumors can be read everywhere that if you don’t switch your website to use HTTPS as soon as possible, you’ll be penalized by Google…

In this article I will unveil the truth about 3 things:

  1. What HTTPS/SSL exactly is
  2. Why HTTPS/SSL became suddenly so important
  3. What steps you have to do in order to switch from HTTP to HTTPS


1. What is HTTPS and why should you care about it?

I won’t start here explaining how the different transfer protocols work over the internet, there are articles like this that explain it with good details.

What you need to know: if your website’s URL address starts with http://, like http://www.example.com, all the data sent from the website to your computer and back, goes through an unsecure channel. It means that some tricky bad guys – hackers, cyber pirates – can steal your personal data: your name, email address, your passwords, and the worst of all: your bank card details.

While if a website’s address starts with https://, like https://www.example.com, then the data is sent via the HTTPS (HTTP Secure or HTTP over SSL) protocol. It means that all the data sent over the internet is encrypted, and you are a lot more protected to send sensitive data (like passwords or bank details) by using online forms.

OK, but I’ve seen so many websites are using the simple HTTP protocol, why would I need HTTPS now?


2. Why HTTPS/SSL became suddenly so important

Up till 2016, we could split the world of websites into 2 big groups:

  • Websites that deal with money and sensitive personal data: like banks, social networks, different APIs, online shops, etc. If these sites wanted to be trusted by the users and wanted to avoid lawsuits filed by their users who became victims of phishing, then it was inevitable for them to use HTTPS
  • All other websites: blogs, personal sites, static websites, portfolio websites, etc. that simply don’t deal with sensitive data: up till now they were just fine with simple HTTP

How did the things change recently?

  1. Google has recently modified its search algorithm in a way that it adds some boost in their search rankings to sites with the HTTPS protocol. While it is a very small boost, if there are two websites with the same value: one of them using HTTP and the other one using HTTPS, then the HTTPS site is likely to get the better position.
  2. Google has announced that in future versions of its Chrome browser there will be a notification if the user is on an unsecure (non-HTTPS) website. While in the beginning it will only warn users if they have to enter data like bank account details on an unencrypted site, later it can widen the range of the warnings to a broader group of non-HTTPS sites.
  3. Automattic (the company behind WordPress) has announced that future versions of WordPress will contain some functionalities that will require HTTPS.

Until now you could say: “OK, ok, HTTPS is more secure than HTTP, but it doesn’t affect my business significantly”. Now being on HTTPS has real marketing benefits. I think the scariest thing of the 3 above is point 2.: just imagine that a visitor comes to your home page and Chrome tells him/her that your site is not secure any more.

Would you buy anything from someone who is said to be not secure? I probably wouldn’t.


3. What steps you have to do in order to switch from HTTP to HTTPS

I will tell you our story. First of all, it didn’t cost us a penny. While lot of website owners don’t switch to HTTPS because they think it’s expensive, since Let’s Encrypt is available, you can have a HTTPS site for free.

Secondly, we did it on our website, which is a WordPress Multisite network with subfolder installation. It doesn’t mean that the steps below won’t work on single WP sites. The contrary, usually it’s always easier to perform something on a single site.

First Step: setting up the Certificate

WARNING: from now on, this article will be a bit techy. So if you are not comfortable with dealing with web hosting control panels, wp-admin and databases, you’d better ask for an expert's help!

UPDATE (26 Oct 2017): change to the Migrate DB part: now it’s even easier!

As we are on a shared hosting plan at SiteGround, and SiteGround is among the hosting providers who support Let’s Encrypt out of the box, setting up the SSL Certificate was extremely easy.

All I had to do was to log in to cPanel, click on the Let’s Encrypt icon in the Security box and… I realized that the site’s certificate was already set up. What? I didn’t even asked for it and SiteGround did it for us automatically (or do I just have issues with my memory? :)). Anyway, it was a nice surprise – as I had to do one step less.

In case it’s not set up yet in your cPanel, you can easily create a certificate for your domain, all you have to do is to select your domain name and enter your email address, click on Install – and that’s it!

Setting up Let's Encrypt in cPanel
Setting up Let’s Encrypt in cPanel

Now you can test the HTTPS connection by entering your URL starting with https:// into the browser’s address bar. E.g. https://yourdomain.com.

Probably this step has the same difficulty level on all hosts that support Let’s Encrypt. For other hosts, VPSs and dedicated servers this step may be different / more difficult. In this case ask your hosting provider for help.

Step 2: Backup

As we are going to change most of the URLs on the site, it’s highly recommended to create a backup of your whole website and save it to a secure location on your local machine.

On SiteGround I did it using Softaculous:

  1. Clicked on Autoinstallers > WordPress in cPanel
  2. In the icon menu clicked on the All Installations (crate) icon
  3. Clicked the Backup icon of the site I needed the backup for
  4. After the backup process was ready, I navigated to the backups tab using the Backups and Restore (zip) icon
  5. From the list clicked on the Download icon of the latest backup, and saved the ZIP file to my computer

Step 3: Changing the permalinks

Before I finally did the change with this method I’ve read carefully the tutorials on WPBeginner and CSS-Tricks. So first I tried it the easy way: by installing the Really Simple SSL plugin. Unfortunately I realized that this method had 2 issues:

  • It didn’t change all the links on the multisite’s sub-sites (while it worked fine on the main site).
  • Then I tried to figure out why it happened and found out that the links in the posts / pages were not changed at all: they are changed on the fly to HTTPS when the page is displayed in the front end.

Unfortunately the Really Simple SSL method didn’t change the links in the database. While it can be a simple method for non-techies to turn a single site to HTTPS easily, this doesn’t seem to be the way to go with multisite. My two biggest concerns about this method were:

  • It makes the site slightly slower if the plugin has to change the links from HTTP to HTTPS every time I load a page
  • What happens if I deactivate the plugin? Yes, I tried it and everything went back to HTTP, and some conflicts also appeared when I tried to log in to wp-admin

I knew that I didn’t wanted to turn back to HTTP in the future, so I wanted a solution where all the links in the database are changed to HTTPS.

Step 3/A: Forcing the admin to use HTTPS.

As I read Cris Coyier’s article on CSS-Tricks, I did exactly what he recommends in his point 2: adding this line to wp-config.php:

I logged in to wp-admin with this new setting and was really forced to use https:// there. Cool.

Step 3/B: Changing the URLs throughout your site

Here we had to be really careful, because we only wanted to change the internal links. So we didn’t change anything that went outside our side, because we didn’t know if they already had an HTTPS version or not.

So, let’s do it by following these steps:

  1. Install the WP Migrate DB plugin
  2. Go to Tools » Migrate DB in wp-admin
  3. Select Find & Replace
  4. Add the following settings:
    1. Find: your website’s current URL, starting with http://, without the trailing slash
    2. Replace: your new URL, starting with https://
WP Migrate DB settings for multisite transition to HTTPS
WP Migrate DB settings for multisite transition to HTTPS
  1. Click on Find & Replace button

Step 4: Check if you have the green lock in the browser’s address bar

Is the green lock present in the address bar?
Is the green lock present in the address bar?

If not, it usually means that a CSS or a JavaScript file is loaded from an unencrypted location. This is the phenomenon of mixed content. Some hints how to fix this issue:

  • Check the page’s source code for “http://”: if there is any, you’ll have to change these links. It usually needs tweaking with the theme or some plugin settings. The easiest way is to change hard-coded http:// links to protocol-relative links (e.g. from http://example.com to //example.com). However, unless you are an expert it’s not recommended to alter theme files. Anyway, if the theme author doesn’t change these links in the next version, the next theme update can break it again. So it can be a better idea to…
  • Tell your theme’s author to change the resource links from http:// to //. If they actively support the theme they can update it in the next version and you’ll be okay
  • Or – if you are really desperate – can try enabling the Really Simple SSL plugin again. That will hopefully change these resource links for you – however, at the cost of some redundance.

What you should pay extra attention to are web fonts and icon fonts. On our site they didn’t work right after switching to HTTPS. And that happened because they were called from a CSS file with a http:// link.

Step 5: redirecting HTTP to HTTPS

Now your HTTPS site is probably working fine. The only problem is that your old HTTP site is also accessible, making it appear as a duplicate of your primary site. So let’s get rid of the old address with some 301 redirection.

You’ll have to place this code into your .htaccess file, somewhere near the beginning, but after the RewriteEngine is turned On:

Now try again entering the old HTTP address to the browser’s search bar. If it’s redirected to HTTPS, you’re fine.

Step 6: tell Google Analytics that you are using HTTPS now.

Log in to Google Analytics, select the site you’d like to edit. Then in the ADMIN tab click on the Property Settings and in the Default URL line select HTTPS instead of HTTP.

Adjust the new URL in Google Analytics
Adjust the new URL in Google Analytics

Step 7: other little cleanups

Now we are literally ready, however, you may consider changing the links on different places that have links to your site, e.g.:

  • Google Search Console / Webmaster Tools
  • Your site’s Facebook page
  • Your site’s Twitter account
  • etc.

Good luck with the switch! Hope this article was helpful for you.


If you’ve got stuck with setting up HTTPS on your site, you can hire me for the task on Codeable:

Make my site HTTPS


Comments

Leave a message!