How to add SSL and HTTPS to your WordPress website

Last updated: Friday October 02nd 2015
Reading time: 8 minutes

Installing SSL (https) on a WordPress website

Are you looking to move from the standard HTTP protocol to HTTPS and install a SSL certificate on your WordPress site? This blog post will show you how to add SSL and HTTPS in WordPress.

Don’t worry, if you have no idea what SSL or HTTPS is. I’ll explain that as well.

What is HTTPS and SSL?

Every day we share our personal information with different websites whether it’s making a purchase or simply logging in. Yep, that Facebook, Online Banking – everything!

In order to protect the data transfer, a secure connection needs to be created. Most of the time you won’t even notice this encryption but it looks like this:

ssl-https-on-wordpress-website

HTTPS or Secure HTTP is an encryption method that secures the connection between users’ browser and your server. This makes it harder for hackers to eavesdrop on the connection.

Each site is issued a unique SSL certificate for identification purposes. If a server is pretending to be on HTTPS, and it’s certificate doesn’t match, then most modern browsers will warn the user from connecting to the site.

ssl-error-message-google-chorme

Now you are probably wondering, why would you ever need to move from HTTP to HTTPS and install a SSL certificate?

How to Setup WordPress to Use SSL and HTTPS

If you are starting a new site and/or want to use HTTPS everywhere on your site, then you need to update your site URL.

You can do this by going to Settings » General and updating your WordPress and site URL address fields.

add-ssl-and-https-wordpress-website-easily

Now if you’re adding SSL to your existing site, then you need to setup WordPress SSL redirect from HTTP to HTTPS.

You can do this by adding the following code in your .htaccess file:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://www.yoursite.com/$1 [R,L]
</IfModule>

Don’t forget to replace yoursite.com with your site URL.

If you are on nginx servers (most users are not), you would add the following to redirect from HTTP to HTTPS:

server {
listen 80;
server_name yoursite.com www.yoursite.com;
return 301 https://yoursite.com$request_uri;
}

By following these steps, you will avoid the WordPress HTTPS not working error because all your site URL and content will be on SSL.

If you want to add SSL and HTTPS on your WordPress multi-site admin area or login pages, then you need to configure SSL in wp-config.php file.

By adding the following code in your WP config file:

define('FORCE_SSL_ADMIN', true);

This wp-config.php snippet of code will work for single WP installs and multi-site installs.

How to Use SSL Properly and Avoid the Yellow Lock Symbol

I’m sure you may have at one point seen this error in a browser window?
Your connection to “your website” is encrypted with 128-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page.
Well, It’s not really an error. It’s warning you that there are other elements on the page that are not secure and can be cause for a hacker to still hack the page. Hackers can use these vulnerabilities to hack your visitors. There is no point in installing SSL unless your site/page is FULLY secure. It’s kind of like the same people who put security stickers and signs around their house, but they really don’t have a security system.

avoid-the-ssl-ellow-lock-symbol

It’s an easy fix and there should be no reason as to why you shouldn’t make the lock green for a fully secure site.

How to Fix the Yellow Lock For WordPress HTTPS

  • Make sure any external scripts you have running on a webpage are using HTTPS. Not HTTP. This can include google fonts, backgrounds images, etc..
  • Make sure all images on the page are using HTTPS in the URL rather than HTTP
  • Make sure to block all widgets that may be calling HTTP code. If your using WordPress you can use widget logic to block widget elements on just this page alone. All you have to do is simply call a conditional that tells the browser to not display those widgets on this particular page. Here is a sample code: !is_page(23) This code says, if this page is page ID 23, do not show this widget on this page.
  • Sometimes you might be calling HTTP inside your CSS or PHP code. Use your console to check running scripts. It will tell you exactly what is being blocked and why.

Implement these fixes and you should have no problem generating a green lock for a fully secure site. If you have run into other problems that generated a yellow lock, please describe below and what you did to fix it.

About the author
Laurence

I am a 26 year old WordPress Web Designer and SEO Consultant based in Banbury, Oxfordshire, UK. I have designed and maintained sites with over 20,000 pages on large corporate websites, smaller small business sites, and tiny personal websies and blogs. I provide freelance WordPress web design services in my evenings and weekends and also work full time at Toast Design in Banbury. You can connect with me on Twitter, Facebook and on Google+.