Firstly the really boring part, what is SSL?
“SSL provides a secure channel between two machines or devices operating over the internet or an internal network. One common example is when SSL is used to secure communication between a web browser and a web server. This turns a website’s address from HTTP to HTTPS, the ‘S’ standing for ‘secure’”
Ok, more importantly for website owners, it’s how to display the green padlock at the beginning of the address bar. As well as the numerous technical benefits for your website and it’s users, it adds that visual trust element to a website visitor, soon to be customer, that your site and their data is secure.
If that’s not enough, check why Google developers say ‘Why HTTPS matters‘
So how do we install the SSL Certificate?
So lets break this down into simple steps, the following instructions are for installing this on the WordPress CMS platform:
1# Backup your website
I can’t stress this enough. Before making any major changes to your website or plug-ins, always back up your site. Sometimes your host as a backup plan included, personally I use ManageWP to look after all of the websites I build and host.
2# Install the certificate
I use ‘Lets Encrypt’ for all of my SSL certifcates, it’s free and we all love free! This is now normally added to your domain automatically by your host, if unsure take a look at your hosts cPanel.
3# Change your site urls
In WordPress, you’ll find these under ‘Settings / general’. Simply change your website address from http:// to https://.
4# Update your htaccess file to force the redirect to https
Ok, using cPanel file manager or FTP we’ll need to make changes to your htaccessfile.
If your site uses www. place the following code at the top of the file:
# Redirect http to https
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
If your website doesn’t use www. (displays as http://yourwebdomain.com) then place the follwing code at the top of your htaccess file:
# BEGIN Redirect to non-www https
# Redirect www to non-www https
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*) http://%1/$1 [R=301,L]
# Redirect http to https
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
# END Redirect to non-www https
5# Fixed any mixed content issues with a find a replace plug-in
If you visit your website, you should now find that it redirects to https, but more than likely it will not show the green padlock in the adress bar, instead it will show as having unsecure content. This is because some of your site content, such as images will have retained their original non https address (view the source code of an image to confirm). This is a simple fix and the easiest way to do this is with a plug-in. Many recommend the ‘better search replace‘ plug-in, but I found that this often misses some content, so I used the ‘search & replace‘ plug-in instead.
Use which ever one you wish, when your run it, search for http://www.yourdomain.com and replace this with https://www.yourdomain.com. Once this is done you can delete the plug-in.
That’s it! If you followed these steps correctly, your WordPress website should now proudly be displaying a nice green ‘secure’ padlock in the address bar.
If you do not feel confident installing your SSL certificate on WordPress yourself, please get in touch with me.