After encountering a problem securing my website using SSL, I put together a small guide on how I solved the issue.

How to make your website secure and what is a SSL certificate?

It’s very important to secure your website and to do this you’ll need to get an SSL certificate. Google will also give a rankings boost to websites with HTTPS. SSL stands for Secure Sockets Layer and it uses encryption to securely transfer data between a user and site.

Once you secure the website with an SSL certificate, you’ll see https:// and a padlock symbol in your address bar.

The address bar of the browser showing the padlock symbol

There are different types of SSL certificates: Extended Validation Certificate and a Domain validated certificate. For a personal website or blog, only a domain validated certificate is required.

I created a new WordPress site recently using Softaculous auto installer. I migrated the site from my local development environment to my hosting provider. To get an SSL certificate was easy with SiteGround, as Let’s Encrypt is integrated into the cPanel. Let’s Encrypt is an official Certificate Authority (CA) and you can be issued with a certificate at a click of a button!

So where’s the problem? Shouldn’t a website be automatically secure after an SSL certificate is issued?

I’ve learned that it’s not automatic, resulting in website being partially secure.

What was the issue? Why wasn’t my site secure?

I got some useful information from the Chrome browser, by clicking on the “i” symbol in the address bar:

Screen shot of information on an insecure connection

As you can see in the image above, I have a valid SSL certificate but the problem was my images. A good way to debug a problem is to view the page source. You can do this in Chrome by right clicking and selecting “View Page Source”. I found that the all my image URLs were serving via http:// not https:

Image tag with a src attribute containing a URL with http://

What was the solution?

I found a very useful guide from WPBuffs. It’s detailed and gives you seven possible solutions to solve your HTTPS problems.

I had to replace all my http:// links with https:// within the database. There’s is a good plugin that makes this process easy: Search & Replace. I made a backup at this point. This is best practice before you implement any big changes! If something goes wrong, you can fall back on this.

After I installed and activated the plugin, it appeared under Tools > Search & Replace. I want to replace all references to http:// to https:

Screen shot of search and replace plugin with "search for" and "replace for" fields populated

Click on Dry Run so you can see all the replacements that will be made before it’s implemented. Once you’re happy, deselect Dry Run and select “Save changes to Database” > click on “Do Search & Replace”.

Screen shot of "Dry Run" box ticked

I refreshed the browser and my site is now secure! You can click on the padlock in the address bar to get more information.

Screen shot of website displaying secure connection and information

With browsers like Chrome warning visitors away from insecure websites, it makes sense to invest the time to fully secure your website.