Converting Your WordPress Website To SSL

Converting your regular http protocol to https is something that is becoming a lot more common these days. Whether it's setting up a store to take payments, contact forms to collect information, or just because you have that pesky little "Your connection to this site is not secure" message in the browser, people want to setup a secure connection for transferring information. They want people to see that "Secure" indicator with the trusty color green giving their users an extra sense of security. It's a great thing to have, so why wouldn't you want it?

If you are using WordPress, you're in luck! If you're using Varial Hosting, even more so! Why would using Varial mean you're in luck? Well, as it turns out this fancy little hosting company gives a free SSL Certificate with their hosting plans saving you from purchasing one and going through the setup process. We aren't going to go over setting up the SSL Certificate for other hosting companies because so many hosting companies have different steps to take, but we will go through the steps that are required in WordPress once that is in place. If you want to setup an SSL Certificate with your current hosting they may have a walk through and if not, you can probably contact their support and they can walk you through the purchase and setup.

Before You Begin

You should understand what is required for a site to be served up using the https protocol. This means that all assets loaded through the site need to be served using that same protocol. What does that mean? All images, scripts, stylesheets, and links to Google fonts will need to be loaded in with the https in front of them. If your website was put together using relative link references, like /images/hero.jpg, then you should have no problem and hopefully no extra work! If you were using direct link references, like http://www.blackatlascreative.com/images/hero.jpg, every single one of those direct references will need to be changed to use https instead.

Steps In WordPress

Follow these steps in WordPress and you should get to where you need to go!

Update Your Site Address And WordPress Address

  1. Login to the administration panel in WordPress
  2. Click on 'Settings'.
  3. Replace your current website URL in both text boxes with the same thing but https:// in front.
  4. Click on 'Save Changes'.

Be aware that if your certificate is not setup properly this may make the website inaccessible. If you want to switch it back to gain access you won't be able to through the administration panel (since you can't access the site). If that is the case you may have to login to your cPanel to access the phpMyAdmin. Once you're in there you can find the 'wp_options' table and locate the 'siteurl' and 'home' records under 'option_name' column. Once you find those, update the 'option_value' for each with the old site url using http instead of https. This should make your site accessible again. You may have to clear your browser cache before reloading the website.

phpMyAdmin WordPress URL

Check For Unsecure Resources On Pages

At this point, your site may be ready to go. If you load it in something like Google Chrome and see the green Secure with a lock next to it on the address bar, that may be all you have to do. Check through all of your pages and if they are all secure, well, you're done! If any of them are not secure, you'll have to find out why. The 'why' is usually some resources being loaded through http instead of https. I'll use Chrome for this example.

  1. Load the page that is not Secure.
  2. Open the Inspector Tool. In Chrome, you can right click and select Inspect or the shortcut in Windows is CTRL+Shift+I.
  3. In the Inspect panel bring up the Find option. In Windows, the shortcut is CTRL+F.
  4. In the Find textbox, type in 'http://'.
  5. Run a search and as you find the resources (images, scripts, stylesheets), change them in the file or template they are loaded from.
  6. Once you have them all changed, reload the page and it should be secure.
  7. If not, you may have missed one, repeat the find.



Check For Unsecure Resources In Scripts And Stylesheets

This is something a lot of people will forget about. If you have any hardcoded resources in scripts or stylesheet files you will have to update those as well. This could come in the form of a background image using CSS for example. If your site isn't showing as secure, make sure to check all of these as well.

Unsecure Resources In Page Or Post Content

After going through all of your files and updating the unsecure resources, your pages may still be missing that secure indicator. If that is the case, you may have missed some http references inside the page or post content itself. This information is actually stored inside the database. You will need to go into each page or post through the WordPress admin and update them as you find them... OR! An easier way, if you are familiar with phpMyAdmin, would be to run a quick update query.

  1. Login to your cPanel and open up phpMyAdmin.
  2. Expand your WordPress database (usually has the suffix '_wp').
  3. Click on the table called 'wp_posts'.
  4. Across the top you should see Browse, Structure, SQL, Search, etc. Click on SQL.
  5. In the box that shows up you should see something like 'Select * FROM...'. Replace that with the following:
  6. UPDATE wp_posts SET guid = REPLACE( guid, 'http://', 'https://' )
  7. Once you have that copied and pasted inside the box. Click on the 'Go' button in the bottom right.

SSL phpMyAdmin Update Query

This should update all of the posts that had hardcoded http urls to https. If you had other links that were pointing to other sites they may get updated as well, but it shouldn't harm them. If those sites aren't using https they should technically have a redirect in place that changes the https to http anyway.

WordPress Templates or Frameworks

If you are using a template that you downloaded and installed or something like Cherry Framework to build your website's template there may be a couple extra things you have to do.

  1. Check parent templates for all of the same things we just addressed.
  2. Check options and settings in the admin panel for the template or framework.

Sometimes templates get you to select a logo or header image in the settings. When they ask you to select these they may get stored as http as well. Check all of these to make sure they are updated to either relative links to https.

That should cover the steps required to get your site up and running through https. If anyone comes across any other pieces we may have missed just leave a comment and we can add them in!

Posted on: October 5, 2017

No Comments Yet.

Leave a comment