Summary

This tutorial provides step by step instructions for securing your small business website with https.

The step by step instructions use the technologies we recommend for small business, in this case: a WordPress self hosted site, Bluehost web hosting, and a domain name registered with GoDaddy.

Time required: 2 hours

What will it cost: Depending on the options chosen it will cost around $100 or more per year to have https in place (these are costs from GoDaddy and Bluehost).

Prerequisites: You should complete our tutorial on setting up a WordPress small business website. You will need administration access to your WordPress site, Bluehost and GoDaddy for this tutorial.

Complexity level: Medium

The tutorial will cover the following:

What is https and do you need it?
How does https work?
How to setup https
How to resolve common https problems

What is https and do you need it?

By default, WordPress uses http as the protocol for communication between a users web browser and your website. Traffic using https is not encrypted, and as such is vulnerable to compromise from people with malicious intent. As an example, before Facebook used https, it was vulnerable to hacking when used on public WiFi.

As of today, every major social site uses https including Facebook and Twitter.

Every bank uses https.

Every major search engine uses https.

Every credible online service uses https.

When https is in place, all web browsers display a padlock symbol, as shown for Google Chrome, Microsoft Internet Explorer, and Apple Safari, below:

Chrome toolbar showing https IE toolbar with https Safari browser on OSX showing https

 

Https has the following advantages:

  • It will help protect you WordPress administration login for being compromised.
  • If will help protect the credentials of your users who login to your site (i.e. for subscription content or courses).
  • Google will give you credit in its search ranking if you use https.
  • Some users will consider your site more trustworthy if they can see https being used.

There are some downsides of using https:

  • Your site may load marginally slower, but really any decrease is insignificant.
  • It takes some effort to implement, as described in this tutorial.
  • Its not free! you need to buy something called a certificate – I’ll briefly describe why this is in the next section.

So do you need https? Well that’s really your value judgement on the above advantages and disadvantages. In my view, there is always a net advantage, and I recommend you put https in place. In addition, the earlier you put it in place, the less likely you will get issues with incompatibilities with existing website content. If you agree with me, please follow to the next section.

Back To Top

How does https work?

Don’t worry, I’m not going to get into technical detail. But having a conceptual understanding of how https works will make the setup steps easier to follow.

Https encrypts the traffic (http) between a visitors web browsers and your website, this results in a secure connection (and thus the “s” in https).

To understand the conceptual process of encryption, the following analogy may help. Imagine you want to securely receive a letter from a friend in another country. Now suppose you send them a box with an open padlock, and tell them to put their letter in the box, close the padlock and return the box. When you receive the box, and then open the padlock, you can be reasonably confident that no one read the contained letter while it was in transit – assuming of course that you are confident your key is the only one!

The fundamental part of the above analogy was that there was something you could provide to anyone publicly (the open padlock), and something you held privately (the key) that enabled communication to be secured.

Encryption works using similar concepts to the above.

Https website encryption also uses a “private key” that only you have, and something called a “public key” which is akin to the open padlock. A small number of trusted companies across the globe, called certificate authorities (CA), will wrap your “public key”, into something called a certificate. The certificate is a computer file that is then used to enable https.

If you are interested, you can read more in our encryption explanation that uses Lego!

The result of implementing https is an environment based on good old fashioned trust:

  • you trust that website traffic to your visitors is secure, as you, and only you, hold the “private key”.
  • your users also trust that your website traffic is secure.

Back To Top

How to setup https

The steps below are required to setup https:

  1. Order a dedicated IP from Bluehost for your Website.
  2. Generate a “Certificate Signing Request” (CSR).
  3. Request a certificate from GoDaddy.
  4. Upload your certificate to Bluehost.
  5. Request Bluehost install the certificate.
  6. Change your WordPress site name to https.
  7. Redirect visitors from http to https.
  8. Validate that https is working as expected.
  9. Update Google about your site change to https.

Lets now cover each step in detail.

Step 1 – Order a dedicated IP from Bluehost for your Website.

This applies if you use shared hosting, and if you are not sure, then you are using shared hosting :).

If you use dedicated hosting then you will have a dedicated IP already.

(the IP address, or Internet Protocol address, is you websites address on the internet).

Login to Bluehost, and navigate to the upgrades section, choose Dedicated IP and follow the instructions.

This will cost $3.99/mo.

Bluehost dedicated IP

Step 2 – Generate a “Certificate Signing Request” (CSR)

Go to the security section of your Bluehost administration page. Select “SSL/TLS Manager”.

 

SSL manager on Bluehost

Select “Generate, view, or delete SSL certificate signing requests”.

Blueshot generate SSL certificate signing request

Then complete the certificate signing request form. See below using information I used to complete a request for my test site bonzr.co.

Please note, in the very first field, make sure “generate a new 2,048 bit key” is selected.

Bluehost certificate signing request 2

 

After you select “generate” in the previous step, the below page will appear.

Select the text shown and copy this to a safe place. Your selection should start with “begin certificate request” and be sure to select all the way to “end certificate request” by scrolling down.

You can ignore the fields that follow, “decoded certificate signing request”, etc.

Bluehost SSL CSR

 

Step 3 – Request a certificate from GoDaddy

In this step you will request a certificate from GoDaddy at https://uk.godaddy.com/web-security/ssl-certificate.

Please note, if you have a test site that you want to practise on first, then you can use a free certificate for a limited period (90 days) at https://ssl.comodo.com/free-ssl-certificate.php

There are various certificate options available from GoDaddy as shown below.

GoDaddy SSL domain options

 

This tutorial shows protecting one website.

As you can see this will cost $34.99 for the first year, and then $69.99 for each year after.

Next you will be asked for the type of certificate you need.

GoDaddy SSL types

All certificates provide a warranty, which effectively covers any financial loss that results from a defective certificate, i.e. someone breaks your secure traffic! (warranty details are here – contained within a Starfield Technologies document – Starfield is a subsidiary of GoDaddy). The Premium certificate results in the relatively obvious green address bar.

As you can see from the options above, the Deluxe SSL certificate includes variation that your business actually exists, this takes 2 – 5 days where they will contact you, as apposed to the Standard SSL certificate that is issued in minutes.

Select the certificate you want, and then follow the steps to order.

As part of the order steps you will need to provide the certificate signing request (CSR) that you generated earlier.

Providing the CSR will simply require a “cut and paste” of the text highlighted in the previous step.

Once your order is complete the certificate will be emailed to you – the certificate itself is just a file, so don’t be expecting anything physical to come in the post! :)

Step 4 -Upload your certificate to Bluehost.

Upload the GoDaddy issued certificate to Bluehost using tools with the Bluehost admin areas. Go to the security section of your Bluehost administration page. Select “SSL/TLS Manager”, and then “Certificates”.

Bluehost upload certificateUpload your certificate by pasting the text from the GoDaddy file into the below field.

Bluehost upload new certificate

Step 5 – Request Bluehost install the certificate.

In the previous step, the certificate was uploaded to Bluehost.

Now you need to contact Bluehost to have the certificate installed. Bluehost contact details can be found at https://www.bluehost.com/contact_us.html, choose the technical support option.

Step 6 – Change your WordPress site name to https.

Now go to your WordPress administration dashboard, and navigate to Settings, General. Then change your site names to “https” from “http”.

Change WordPress general setting to https
Step 7 – Redirect visitors from http to https.

The next step is to redirect visitors who arrive from http to https. This means all visitors to your site on http (for example, via links from other websites) will continue to work, but will automatically redirect to a https connection. This is done via a file called “.htaccess” which control hypertext access (hypertext is the “ht” in http and https).

There are various updates possible, but the recommended approach for rewritting http to https is to add the below text to the top of your htaccess file.

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

To make the modification, go to your Bluehost admin area, and click on File Manager in the Files section.

Bluehost cpanel file manager

Navigate to “public_html”, select the .htaccess file, and save a copy as a different name, i.e. “htaccess-before-Https”, so you can rollback any changes if need be.

If you cannot see the .htaccess file, add the following to the end of the URL in the address window, “&showhidden=1″ at it will appear (.htaccess is actually a hidden file, the URL change make it visible).

How to see hidden files in Bluehost file manager

Now select .htaccess and then click on edit.

Modify htaccess via Bluehost file manager

 

 

Now add the text identified earlier to the top of the .htaccess file, above any existing content if it exists.

modified htaccess file for WordPress SSL

This is the last step in setting up https for your WordPress site!

Next we will test that everything is working.

Step 8 – Validate that https is working as expected.
First, lets check that the http to https redirections are working.

You can do this just be visiting your site on http and checking you arrive on https.

Next check that rating that your secure connection achieves, by entering your website domain at https://www.ssllabs.com/ssltest/.

Anything from A+ to an F are possible, but you should expect an “A”.

If you get less than an “A” then something is wrong.

‘You should not expect an “A+” as to achieve this rating older web browsers will not work with your site (including Internet Explorer 8, which currently represents 10% of all web browsers) – even Bank of America doesn’t attempt an A+.

If you do not get an A, you will need help from a professional to resolve the specific issue.

Below is the result from my test site bonzr.co.

SSLtest report

Step 9 –  Update google analytics

Now that everything is confirmed as working, the last thing to do is to protect the search traffic that Google sends you. More specifically, you want to make sure your new https pages get the identical search rankings as your (now) previous http pages.

Go to https://support.google.com/webmasters/answer/83106 and follow the instructions to update your site address from http to https.

Back To Top

How to resolve common https problems

Padlocks missing

The most common problem is where your site is redirecting properly to https, but missing the “padlock” symbols.

So rather than seeing one of the following with a padlock symbol,

Chrome toolbar showing https

IE toolbar with httpsSafari browser on OSX showing https

 

 

you see the following, without padlock symbols:
https without green highlight in Chromehttps with no padlock using IE https and no padlock in safari on OSX

 

This issue will be due to some non https content that you have embedded on your website.

The fast way to find the culprit is to go to https://www.whynopadlock.com and then run a report on your website.

As shown below, a jpg picture file that is coming from a http site was the cause of the issue on bonzr.co.

SSL broken by insecure content

The above will be a common example for media embedded to your site before you moved to https. For media that you have uploaded to your site, this can be easily fixed by manually changing http to https. So for example, if you uploaded a picture call “house.jpg”, then embedded it into a page, the embedded address, will start with http. Just change the URL to start with https. This only works for content that you have uploaded to your site, rather than content that comes from an external website. After your site starts using https, all future content that you upload and embed will use https – thus the problem described here only relates to content uploaded “pre https”.

If the content comes from an external website, then you will need to check if they have a https link, otherwise you will will need to find alternative content, or just live without the padlock.

Things can get a bit more tricky if the source of http content is a plugin. In this case you will need to update/ replace the plugin so that https supported.

For the above reasons, the earlier you put https in place, the better, as you will not need to retrofit embedded content to be compatible with https. Rather you can embed content and check it also uses https as you go.

Back To Top