How to Secure Your WordPress Website with SSL

Graphic. Mock-up of a website with the URL address bar glowing green, "secured" by SSL, with a https:// address.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

As of July 2018, the popular and powerful search engine Google has been “penalizing” unsecure websites. Websites without HTTPS encryption and SSL certification now display a “Not Secure” message in the URL address bar, a warning to any browsing visitors that their information isn’t safe. Webmasters see something else too—a negative impact on their site’s SEO. However, despite the growing pains, Google’s push for HTTPS and SSL is a good one. It promotes safe browsing, protects user information, and protects the website from cyberattacks. Secure your WordPress website with SSL.

Fortunately, webmasters can easily secure their sites with HTTPS encryption and SSL certification by purchasing, installing, and maintaining a SSL certificate. This tutorial discusses the steps to obtain, download, and install a SSL certificate with its accompanying seal.

Lara Lee Design | How to Secure Your WordPress Website with SSL, Learn More

Purchase a SSL certificate to receive a public key.

Many web hosts and domain registrars also sell SSL certificates from trusted Certificate Authorities (CA). For example, I used Namecheap to purchase a SSL Certificate from the CA, Comodo. Other well-known CAs include Let’s Encrypt, Symantec, and Digicert. The certificates are tiered, with higher tiers costing more. The purchase of a SSL certificate allows the applicant to begin the certification process. You’ll receive a public key with the SSL certificate purchase.

Characteristics to Compare SSL Certificate Levels

Term Definition Impact on Web Security

Domain

A website.

A single domain includes a single website:

  • www.site.com,
  • site.com

A multi-level domain includes a website and its sub-domains:

  • www.site.com,
  • site.com,
  • mail.site.com,
  • login.site.com

Multiple domains include two or more websites:

  • site.com,
  • example.org
Multiple websites and/or multi-level websites may require an extended SSL certificate to encrypt the domain(s) and subdomains, which often cost more to purchase. However, no domain type is more secure than another.

Assurance

A background check of the applicant to verify existence and legitimacy, including names, phone numbers, physical addresses, and other legal checks.
Both low and high assurance levels provide the same level of encryption. However, a high assurance level helps garner higher levels of consumer trust and may be necessary for large organizations or e-commerce.

Key Length

The number of characters within the security key of the certificate. Keys are used to translate encrypted data.
Longer key lengths are more secure because they require more time and resources to crack.

Encryption

A string of randomly generated characters that masks the original data.
Encryption levels with higher bit amounts are more secure because they use a wider range of characters (such as the difference between using numbers only versus a combination of alphanumeric and special characters).

Warranty

Insurance against legal fall-out after a cyberattack, in which the certificate vendor pays the certificate owner a dollar amount to cover losses endured and/or resulting consumer lawsuits by the cyberattack.
Both high and low warranties provide the same amount of encryption, but higher warranties help cover higher legal costs in the event of a data breach or security lapse.

Obtain a Certificate Signing Request (CSR) from your web host.

Now you must pair your public key with a private key. This key pair decrypts the data. A Cryptographic Service Provider (CSP) uses a specific algorithm to generate the key pair once it receives a Certificate Signing Request (CSR), an application that sends the customer’s identifying information along with a copy of the public key.

To obtain the CSR, login to the web host of your website. Within the Control Panel (cPanel) of the webhost, look for something like “SSL / TLS Manager,” then “Certificate Signing Request,” then an option to generate a new key.

The webhost returns your private key, which will act as your unique signature for the CSR. Save a copy of the encoded version of the private key. This is the first part you’ll need later when actually installing the SSL certificate.

Finally, the Certificate Request is digitally signed using the private key.

Save a copy of the CSR too. This is the second part you’ll need later.

This step helps you verify your identity. Next, you’ll need to verify you actually own the WordPress website for the SSL certificate.

Graphic. Mockup of a web host's cPanel options for generating a Certificate Signing Request (CSR), the first step in making a website https.
A generic form of a web host's cPanel options for generating a Certificate Signing Request (CSR), the first step in converting a website from http to https.

Complete Domain Control Validation (DCV) with your SSL certificate vendor.

Return to the SSL certificate vendor.

The vendor will offer several methods for you to verify you own your website. Select one of the methods, such as:

  • responding to an email,
  • uploading a file to your website’s root directory, or
  • updating CNAME records.

I selected HTTP-based validation to upload a file to my website’s root directory since the email address I had wasn’t on file. (I use Google’s custom domain Gmail accounts.) The SSL certificate vendor gave me a file to download, and then I used FileZilla to add that file to my website’s root directory. Follow any additional instructions for placement and naming of that file to ensure the CA can find it.

Once you’ve completed the method of your choice, return to the SSL certificate vendor and run the verification check. Once approved, and both you and your website have been verified, you can finally access the SSL certificate. Your WordPress website SSL begins with installing its certificate.

Download the CA bundle with the SSL certificate.

The SSL certificate vendor will email you the SSL certificate validation once verification is complete. Download or follow the link to save a copy of the SSL certificate. It’s usually attached as a zip folder with three files or so.

Find the plaintext file. It might end with a file type extension like “.ca-bundle.” This is the third and final part you need to install the SSL certificate.

Install the SSL certificate on the web host.

Installing an SSL certificate requires all the parts you’ve gathered in their encoded forms. WordPress website SSL documents include:

  • The CSR
  • The Private Key
  • The CA bundle

Together, these three documents compose the SSL certificate. 

Return to the cPanel of the webhost and search again for something like “SSL / TLS Manager,” but this time select “Install and Manage SSL for your site (HTTPS).” Copy and paste the encoded versions of the CSR, Private key, and CA bundle. (Depending on the web host, the CA bundle may not be required, but it’s best to keep for recordkeeping anyway.)

Now that the certificate is installed, your website has an encrypted “https://” address with the green text in the URL address bar, “Secure.” The WordPress website SSL certificate is active!

Graphic. Mockup of a web host's cPanel options to install a SSL certificate on a website.
A generic form in a webhost's SSL Manager for adding an SSL certificate.

Force https:// on your WordPress website.

Navigate to your WordPress dashboard and click on “Settings.” The “General” tab lists two fields, “WordPress Address (URL)” and “Site Address (URL).” Add the “https://” to both addresses.

Installing the SSL certificate was one of the first things I did to my website, when there was no content, so this steps was the only one I needed to perform.

If however, your website has existing content, it’ll require re-directing. Use a file manager to access your website’s root directory and save a copy of the .htaccess file. Open the copy and add the following code, taking care to change the placeholder website with your actual website:

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

Save the file and re-upload it to your directory, overwriting the old .htaccess document.

Update any http:// URLs to their https:// versions.

Forcing site-wide https:// may have unintended consequences.

For example, anything linked to an http:// address will fail to load and/or display, since it requires communicating with unverified, unencrypted content.

Double-check any direct URLs to CSS and JS documents use an https:// address. I also needed to double-check anywhere I used the jQuery CDN that I used the https:// version there too.

Ultimately, in order to run a WordPress website SSL-approved, every link from your content and your plugins must have a HTTPS source.

Setup SFTP with FileZilla or other file transfer program.

The encryption and forced https:// now requires you to use a SFTP file manager. FileZilla is a popular FTP program with SFTP support too.

Search your web host knowledge base and/or support articles to find their port number for https:// and SFTP and take note of it.

You also need to know your IP address. Use a site like whatismyipaddress.com to find yours and write that down too.

Next, go to your web host cPanel and look for something like, “SSH / Shell Access.”

Use the cPanel to generate a user and password and assign a private key (PK) to that user. My webhost is picky and sometimes creates false negatives in its validation—my name and email address wouldn’t be accepted. Additionally, my FTP manager, FileZilla, requires passwords without special characters. Try to create a strong password within any constraints. Password managers like LastPass are useful. Input your info into the required fields:

  • First Name:
  • Last Name:
  • Email:
  • Password:
  • Allowed IP Address:

The cPanel then generates a private key. Click the link to open the PK text file and save your copy on your computer in a local directory, such as “My Documents,” giving the file a double-extension “.ppk.txt.” This location gives FileZilla full file access to the SSL WordPress website.

Screenshot. Adding a New Site to FileZilla's Site Manager with SFTP protocol.
Screenshot. Adding a New Site to FileZilla's Site Manager with SFTP protocol.
Open FileZilla FTP manager. Go to File > Site Manager > New Site and enter:

  • Host: ftp.[yourwebsite.com]
  • Port: [identified in the webhost support pages]
  • Login Type: Ask for password
  • User: [your cPanel username]
  • Password: [you choose the first time logging in; write it down!]

Then go to Edit > Settings > SFTP > Add Key File and select the .ppk.txt file from earlier. Choose “Convert” and enter the same password as previously. Proceed with the conversion and rename it. Save both files in the same location on your computer for FileZilla to find.

SFTP setup is complete! To login with SFTP, open FileZilla and find your site in the Site Manager. In the password prompts, enter the SSH private key file’s password HERE, BOTH TIMES, not your webhost’s password even once.

Add the SSL certificate seal to your WordPress website at last.

Now that the SSL certificate, HTTPS encryption, and force HTTPS is complete, it’s a good time to add the SSL certificate seal to your website. The SSL certificate vendor emailed a link to the graphics soon after it emailed you the CA bundle and SSL certificate.

Select your SSL certificate type from the dropdown menu, and a gallery of matching seals appears.

Download one (or all) and upload them to your WordPress Media library. Choose the size you want, then copy the image URL.

Screenshot. Certificate Authority (CA) Comodo verifies the image URL of its trust logo SSL seal on your website.
Screenshot. Certificate Authority (CA) Comodo verifies the image URL of its trust logo SSL seal on your website.

Return to the instruction screen of the CA. Input the image URL to verify your website. The following screens provide HTML code to add to all the pages of your website. Finally, you have the JavaScript code to display the interactive badge of your SSL certificate seal. When a website visitor hovers over the seal graphic, a modal window appears to detail the SSL certificate information and prove its legitimacy.

Fortunately with WordPress, you’ll only need to place these codes once. Copy the “before the closing tag” and paste it into your child theme’s header.php file. This validates your website with the CA.

Likewise, copy the “before the closing tag” and paste it into your child theme’s footer.php. The seal now displays underneath everything else on your website. I found it looks disjointed this way. Instead, I decided to add the “before the closing tag” code for the seal as a WordPress widget in my footer for greater control over its placement, while commenting the original code in the footer.php.

Finally, add the WordPress website SSL trustlogo seal and script to show visitors you’re secure.

Besides the email from the CA containing the SSL certificate, a separate email arrives with the SSL certificate trustlogo, a small seal graphic to add to your website. A WordPress website SSL seal is just as easy to install as any graphic and/or small script.

Include the whole script vs. just the image to boost user trust of your website. (The script confirms the WordPress website SSL is active and not just a placebo image used to trick users.) 

However, because the SSL is an executable script file, pasting the code directly into a WordPress or page builder widget like Elementor’s may “hijack” the webpage appearance to display just the certificate info.

To install the WordPress website SSL seal image and script on my website, I actually updated my functions php document. I escaped out the PHP to include HTML elements and CSS styles I “inspected” from my page builder. This way, I mimicked similar background colors and page widths. Alternatively, you can place the WordPress website SSL seal image and script in the header or footer php documents.

My WordPress website SSL functions php code snippet looks kinda of like this:

function add_trustlogo(){ ?>
  <div id="trustlogo" class=" "><!-- You add HTML and inline CSS like THIS! -->
    <script language="JavaScript" type="text/javascript">
      //Script from your SSL certificate vendor
    </script>

    <a id="sslVendor" href="#">SSL Certificate link from vendor</a>
  </div>
<?php }

add_action('wp_footer', 'add_trustlogo’);

Enjoy your newly secured WordPress website SSL!