How to install SSL/HTTPS on a WordPress site

TUTORIALS, RESOURCES & NEWS

https

Since we just moved to a secured SSL connection recently, I decided to write an article about how You can move your website to HTTPS / SSL.


What is HTTPS, SSL and why is it good for my site?

When you visit a website, your browser and the webserver exchange information via HyperText Transfer Protocol (HTTP). However the data is sent over the connection in clear text, so an eavesdropper can see the websites you're visiting and capture sensitive data like messages, passwords, credit card information, etc. That's why HyperText Transfer Protocol Secure (HTTPS) was created. HTTPS encrypts information before exchanging, only the sender and the recipient know the code to decipher message. SSL (Secure Sockets Layer) and TSL (Transport Layer Security) are the technologies that encrypts the data.


Should I move my website from HTTP to HTTPS / SSL?

If you're selling products/services on your website or your users can give sensitive information, then you definitely should use HTTPS. It gives your visitors a sense of trust which might also increase your conversion.

Another important benefit is that Google gives secure sites a ranking boost.


How to get SSL for my WordPress site?

In order to enable HTTPS (SSL/TLS) on your website, you'll need an SSL certificate. This digital certificate works like an electronic passport. It authenticates the identity of a website and encrypts the information. The price of SSL certificate ranges from $5 to a few hundred dollars per year depending the features. Some webhosting company provide it for free if you purchase a hosting plan.

You can also get free SSL certificate from Let's Encrypt. This non-profit group provides them for free to create a more secure and privacy-respecting Web. If your hosting provider offers Let’s Encrypt support, they can request a free certificate on your behalf, install it, and keep it up-to-date automatically. Here is a list of those hosting companies: https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920


Prepare WordPress theme for SSL

First, you have to make sure there are no hardcoded links to internal resources, starting with http://. Perform a search in all PHP files of your WordPress theme with Total Commander or alternatively open all PHP files in your preferred text editor and search for http:// in all opened document. If you find an internal link (a link that points to a file hosted on your server) with http://, replace it to https://. For external, third party assets use protocol relative links when these assets are available via both HTTP and HTTPS. Protocol relative link means that you remove the http: or https: part from the link. This way the visitor’s browser will determine the correct protocol to load. For example a proper way to load Google Fonts would look like this:

function mytheme_frontend_load(){
	wp_enqueue_style('mytheme-google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,700');
}
add_action( 'wp_enqueue_scripts', 'mytheme_frontend_load' );

Of course if you're using one of our themes, you don't have to worry about preparing the theme, because all of them are prepared for SSL connection. :)


After installing an SSL Certificate on WordPress

Once SSL is set up on your hosting, you need to update your site URL. Log in to your WordPress admin and in Settings - General update your WordPress and site address field.

wordpress https site url

If you want to use HTTPS everywhere on your site, then you need to setup a redirect from HTTP to HTTPS. Open your .htaccess (located in your webserver's root directory) and add the following code:

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

Don't forget to replace yoursite.com to your URL.

secured website

The final step is to verify changes. Visit your website, click all the pages and make sure that a green lock appears everywhere next to the address bar. If you can't see it, that means one or more resource is still being loaded via simple HTTP protocol on that page. Using your browser's developer console you can find the problematic assets in the mixed content notifications. In some cases your content images - which are inserted into posts/pages - might still use a HTTP link. Replace them one by one manually or use a plugin like this if there are a lot of of them.

That's it, I hope I didn't forget anything important. If you get stuck somewhere along the process, feel free to contact your webhosting support, they should help you for free.

RISK-FREE, NO RECURRINGS, ZERO COMMITMENT!

Choose a plan and get access to all of our WordPress themes, templates and PSDs for the price of one!
We offer a 14 Day Money Back Guarantee!

BUY THEM NOW!

All major credit cards are accepted and PayPal too!
Payment is processed through 2Checkout, a 100% secured website (see below).

payment   payment   payment

A new theme has been added recently! It’s called Photographer!