Force HTTPS On All Pages Of Your WordPress Site

Because of popular request, I decided to make my entire WordPress blog secured behind an HTTPS connection. In addition to requests, I also read that search engines such as Google reward site owners that have complete sites behind HTTPS.

In a previous post I made, I explained how to generate and install an SSL certificate to an Apache web server, but things are a little different in terms of WordPress.

In this guide, I’m going to show you how to secure your entire WordPress application, including the administrative pages. To simplify this, the guide will be broken into the following parts:

1. Force SSL for administrator and sign in pages
2. Secure all non-administrator pages with HTTPS
3. Fix .htaccess to process website assets such as CSS and JavaScript under HTTPS
4. Clean up any loose ends such as caching

When all this has been completed you should have a WordPress website or blog that takes full advantage of HTTPS.

Force SSL for administrator and sign in pages

When I first installed my SSL certificate, my initial thought was to only put my administrator and other protected pages behind HTTPS. This can be done by opening your wp-config.php file at the root of your WordPress directory and including the following:

define('FORCE_SSL_ADMIN', true);

Many other tutorials may tell you to include define('FORCE_SSL_LOGIN', true); but it is my understanding that this is deprecated. Using FORCE_SSL_ADMIN seemed to be enough for me.

At this point, every time you visit http://blog.example.com/wp-admin you should be redirected to an https version.

Secure all non-administrator pages with HTTPS

I read not too long ago that Google rewards site owners that put their entire site behind HTTPS. How true this is, I don’t know, but in any case my readers wanted it and I care about them more.

In your WordPress administrator dashboard, go to Settings -> General and change both URLs to have https:// rather than http://. It will look something like below:

After changing both the WordPress and Site Address, all links internal to your application will include https at the beginning. However, this will leave you with broken assets such as CSS and JavaScript.

Fix .htaccess to process website assets such as CSS and JavaScript under HTTPS

This is the thing that got me when I was making the full transition to HTTPS for my blog. After changing the site name, all my CSS and JavaScript assets were still coming in with the HTTP URL path rather than HTTPS. This caused my site to appear broken in pretty much every browser.

These site asset files can easily be corrected by fixing the rewrite rules in your .htaccess file found at the root of your WordPress application.

# BEGIN WordPress
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{SERVER_PORT} !^443$
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Notice the highlighted lines in the above code. We’re saying that if the current port isn’t 443, then rewrite the URL to use HTTPS with a 301 redirect. The rest of the above code should already exist in your WordPress .htaccess file. Usually it will be found at the bottom of the file.

Clean up any loose ends such as caching

If you’re like me, you’re using W3 Total Cache to improve performance and extend data load on your blog. It’s a great tool, however, it may cause weird things to happen after making large changes to your application. Simply empty all caches for your application and it should render your assets and pages with the correct URL paths.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.