Add WordPress SSL and Move from HTTP to HTTPS

If your WordPress site has no SSL certificate, all your visitors will get the message “site not secure.”
At worst, your visitors will immediately leave your website at this point and look somewhere else. In this article, we’re moving your WordPress website from HTTP to HTTPS to get better search results and protect your visitors’ data from being sniffed out by attackers.

Video: How to Add SSL to WordPress

If you prefer watching a video instead of reading this article on how to add SSL to WordPress, you can watch this entire article as a video:

When visiting your WordPress website, visitors share various data with you, regardless of whether they are making a purchase and providing payment details or just logging into your website. A secure connection must be established between your website’s server and the visitor’s browser to protect the transmitted data.

This is where SSL and HTTPS come into play.

Definition of the Terms HTTP, SSL, and HTTPS

Since many people still find it difficult to differentiate between HTTP, HTTPS, and SSL, I’d like to briefly explain the terms before activating and installing the SSL certificate.

If you are already familiar with it, you can directly jump to the next chapter.

HTTP stands for Hypertext Transfer Protocol; it is a protocol for transferring data. It is mainly used to load websites from the World Wide Web, such as your WordPress website, into a visitor’s web browser.

SSL stands for Secure Sockets Layer; it’s an encryption protocol for securing data transmission on the Internet. A unique SSL certificate can identify each website.

HTTPS stands for Hypertext Transfer Protocol Secure and is a combination of the two previous protocols. Using the SSL certificate, a protected identification and authentication of the two communication partners, A. your WordPress website and B. the visitor’s browser, takes place in the HTTPS protocol. The protocol then exchanges a session key. HTTPS then uses the key to encrypt the user data. In this way, your WordPress site and the visitor’s browser can securely transfer data.

Why you Need an SSL Certificate

There are two simple reasons why you should invest your time in activating and using an SSL certificate.

1. To protect the data of your visitors from theft, for which you can be held responsible depending on the local legal situation.

2. And Search Engine Optimization that is known as SEO. Since Google wants to provide the most severe and suitable search results possible, it ranks websites without an SSL certificate significantly lower.

Okay, enough theoretical background knowledge, let’s start with the implementation.

Check Whether an SSL Certificate is Available

The first thing to do is to find out whether an SSL certificate is available for your website or not.

There is a quick way to check this: Try entering https://your-site.com instead of the original HTTP URL http://your-site.com. You should see the padlock to the left of the URL bar, which will show more information about the certificate when you click on it.

An SSL Certificate is Available

If this process works, you already have an active SSL certificate, but your WordPress site does not make use of it and only takes effect if someone explicitly calls your page via the https: // link.

In the next step, you will learn how to set up the SSL certificate on your WordPress site correctly.

An SSL Certificate is not available.

If this process did not work, and you still end up on the http:// link and receive the error message “not secure,” there are two steps you can do before setting up WordPress through https:

Step 1: With some hosting providers, an SSL certificate may be available for your domain, but you will have to activate it manually first.

The procedure for activating the SSL certificate differs from provider to provider. First, go to the hosting provider’s dashboard (often cPanel) and search for the SSL item.

Depending on the provider, it is now possible to run the Auto SSL option under SSL status, which checks and activates the SSL certificate.

Other providers support an SSL certificate from the non-profit organization Let’s Encrypt that provides free SSL certificates.

Search for “Let’s Encrypt.”

Step 2: If you cannot find the sub-item SSL, your hosting provider does not provide a free SSL certificate.

Contact the support of your hosting provider and inquire about the costs of an SSL certificate. Many hosting providers charge up to $60 a year for an SSL certificate. In this case, decide if a change of provider could make sense.

How to Add SSL to WordPress

The method of manually setting up the https connection is a permanent and performance-optimized solution. We use the same method at wp-staging.com. So it’s the recommended way instead of using an SSL WordPress plugin, but in this article, I will also show you a plugin solution if you still want to give it a try.

First, go to the Settings > General page. From there, update your WordPress and site URL address fields by replacing http:// with https://.

Once you’ve saved the settings, WordPress might log you out and ask you to log in again.

Adjustments in the .htaccess file

Next, set up a rule to redirect all traffic from HTTP to HTTPS by customizing the .htaccess file. You can access this file via the hosting provider’s dashboard, which is often based on cPanel, or via an FTP tool like FileZilla.

To do this, open the .htaccess file and add the lines of code to it.

1 2 3 4 5

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] </IfModule>

Adjustments in the Nginx.conf file

If you are on Nginx servers, you add this code to your Nginx.conf configuration file:

1 2 3 4 5

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

Don’t forget to replace https://your-site.com with your domain name.

Adjustments in the wp-config.php file

If you want to enforce SSL and HTTPS in your WordPress administration area or on your login pages, you need to configure SSL in the wp-config.php file.

Just add the following code above the line that says “That’s all, stop editing!” in your wp-config.php file:

1	define('FORCE_SSL_ADMIN', true);

Your website is now fully set up to use SSL / HTTPS.

Fixing Mixed Content Errors in the WordPress Database

Although we have achieved our intermediate goal by setting up the SSL certificate and route all traffic through HTTPS, so-called mixed content errors may occur on your WordPress website.

Sources such as images, scripts, or style sheets still loaded from http are causing these mixed content errors.

If this is the case, no secure padlock symbol is displayed in the address bar of your website, and the browser automatically blocks the insecure scripts and resources, which can make your website inaccessible. It, therefore, shows a padlock symbol with a warning.

Google Developer Tools

You can use the developer tools to find out which content is still provided via the insecure http protocol. You can access these tools in Chrome either by pressing F12 or by right-clicking and selecting “Inspect.” Then call up the “Console” tab in the upper menu. The Console tab will display the mixed content errors as a warning.

Most of these error messages, as mentioned, are based on images, iframes, and image galleries. However, you may also get error messages about scripts and stylesheets that WordPress plugins and themes are responsible for.

Better Search Replace Plugin

You can fix most of these errors through the WordPress database. To do this, you’ll need to find all the mentions of your old website URL that started with http in the database and replace them with your new website URL that starts with https.

The simplest tool to replace all these strings is the plugin Better Search Replace. Open the WordPress sidebar menu and click on Plugins and Add New.

After activation, go to the Tools tab and select the Better Search Replace menu item.

In the Search box, paste your old website URL starting with http://. Then add your new website URL with https:// in the “Replace” field.

Below that, you will see all of your WordPress database tables. Please select all of them.

The last step is to uncheck the box next to the option “Run as dry run?” and then click the “Run Search / Replace” button.

The plugin now goes through all tables in the WordPress database for URLs that begin with http:// and replaces them with the secure https:// URLs. Depending on your WordPress database size, it may take a while.

When this is done, the plugin should have fixed the mixed content errors on your site.

Fixing Mixed Content Errors Regarding Themes and Plugins

If you find other errors in the developer tools’ console at this point, it indicates that these mixed content errors are in the WordPress theme or plugin files, usually as hardcoded strings, and could not be replaced by the search & replace plugin in the database.

It’s worth noting that a decent WordPress theme or plugin that follows WordPress coding standards usually won’t cause such problems, so if you still get such mixed content errors, think about if you did some manual changes in the code. Suppose that’s the case you need to get into this and change all occurrences of http:// to https:// in the code base of the specific plugin or theme file.

Create a Secure Troubleshooting Environment with WP STAGING

To solve the remaining errors without breaking anything on your production site and test out if everything works, look at the free plugin WP STAGING, which can create a copy of your website for development purposes.

Install and activate the plugin from the plugin repository.

Then open WP STAGING and click on the create a staging site button. You can recognize the staging site by the orange menu bar.

After doing that, return to your actual website, called the production site.

Install and activate the “Really Simple SSL” plugin via the plugin repository.

After activation, go to Settings > SSL. The plugin automatically recognizes your https connection and fixes mixed content errors. The plug-in uses the output buffer technique. This technique can negatively affect the performance and speed of your WordPress site, as it replaces the HTTP content when your site is loaded. This effect only occurs when the first page loads and should be minimal if you use a caching plugin.

While the plugin says you can disable it without any problems, that statement is not 100% accurate. You have to leave the plugin active at all times, as deactivating the plugin will lead to errors with mixed content again. So this is only a temporary solution.

Make sure there are no more Errors.

Return to your staging site. Try to fix the problem by viewing and editing the error messages from the Google developer tools console. If this does not work, change the WordPress theme and check whether the error message still appears. If that doesn’t help, deactivate all plugins on the staging site, activate plugin by plugin and check when the error message appears again.

After you have fixed the errors, repeat the same steps on your production site.

Now you can deactivate the “Really Simple SSL” plug-in and check in the console if the mixed-content errors are gone.

Enough troubleshooting for today.

Congratulations, you have successfully moved your WordPress site from the HTTP to the HTTPS protocol!