How to Fix Mixed Content Error in WordPress After Adding SSL Certificate

184Shares
Fix Mixed Content Error in WordPress
  • Save

The whole world is moving their websites from HTTP to HTTPS!

Why?

Because it makes their sites secure & rumour has it that search engines favor websites using the “https” protocol.

Sooner or later, you will be moving your site to HTTPS. But before you do, you need to consider a few factors in order to make a successful migration from HTTP to HTTPS.

In this article (& in upcoming articles), I will cover migration techniques for different scenarios.

Here’s our first scenario:

  • The site is hosted on a Nginx server.
  • DNS is managed by CloudFlare.
  • SSL certificate by Let’s Encrypt.

Let’s Encrypt + Nginx + CloudFlare : Scenario 1

In this case, my hosting people configured a free SSL certificate from Let’s Encrypt.

However, one big downside of using Let’s Encrypt is the certificate expires in 90 days. So after every 90 days, you or your hosting people need to renew the certificate.

Most paid SSL certificates stay valid for one year.

Since I’m setting up HTTPS for an information-based website with no transactions, I prefer the free solution over other paid SSL certificates.

Server admins can use Certbot for installing an SSL certificate from Let’s Encrypt.

Once the certificate is installed, we need to configure HTTPS from CloudFlare & make some changes on our WordPress blog.

Here is how you can get started:

  • Login to your CloudFlare account & select the website.
  • Click on “Crypto” & from the “SSL” tab.
  • Select either “Full” or “Full (strict)”.
Full Strict SSL Cloudflare
  • Save

Since I’m using a Let’s Encrypt SSL certificate,  I selected “Full”.

If you have purchased an SSL certificate from other places like DigiCertGeoTrust, or any other, use the “Full (strict)” mode.

  • Wondering what the difference is between the two?
    • Full (strict) checks for a valid certificate on your origin server, whereas Full checks for any certificate.

Full SSL: Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.

  • You will need to have an SSL certificate on your server. However, CloudFlare will not attempt to validate the certificate (certificates may be self-signed).
  • Visitors will see the SSL lock icon in their browser.

Full SSL (strict): Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.

  • You will need to have a valid SSL certificate installed on your server, and the certificate must be signed by a trusted certificate authority.
  • Visitors will see the SSL lock icon in their browser.
Various SSL Cloudflare
  • Save

Once this is enabled, you should open your website in HTTPS mode.

Chances are you will see an error (like the one shown below).

The images will be broken & you will get a warning for “mixed content”.

(I have talked about mixed content earlier here.)

Let me quickly explain “mixed content” for you:

Your website is opening in HTTPS, but resources (like your images and theme files) are still using the HTTP protocol. Since your site is using two protocols, you will get this “mixed content” warning.

Take a look at these two images:

The first one shows the “https” sign in red & with a line through it.

Clicking on the link on Chrome will bring up the developer console (as shown in the 2nd image).

Broken image https issue
  • Save
Insecure broken https
  • Save

You can clearly see the warning for “Broken HTTPS” & “Active Mixed Content”.

Fixing Mixed Content Warning in WordPress: CloudFlare users

This is where the real work starts (& it’s going to be fun)!

I’m assuming you are using CloudFlare to manage your DNS. (That’s how this guide started! Isn’t it?)

Install the official CloudFlare WordPress plugin & activate it.

Go to Settings > CloudFlare & configure the plugin.

Toggle “On” the option that says “Automatic HTTPS Rewrites”.

  • Save

HTTPS Protocol Rewriting in this context converts links within your WordPress site to images, stylesheets, and scripts from using either “http://” or “https://” to using just “//”. This rewrite tells your browser to load all of these assets using the same protocol as the base page loaded.

Now, refresh the homepage & you will notice the red bar has turned into a green bar (No warning!).

Also, all of your WordPress broken images have reappeared.

Enforcing SSL for WordPress Admin Area:

Once we have fixed the mixed content warning, now it’s time to configure the rest for complete migration.

Now we will be enforcing our WordPress admin area to use the SSL protocol (HTTPS). For this, we need to edit the WordPress “wp-config.php” file.

For this, you need to login to your Hosting using FTP. (Here is a guide). At the root of your WordPress installation, you will find wp-config.php file. Before editing it, take a backup of the file.

Now, open the file & add below mentioned command as shown in the screenshot:

define('FORCE_SSL_ADMIN', true);

force ssl admin
  • Save

 Change Website Address To “https”:

  • After enforcing SSL for the Admin area, go to Settings > General (in the WordPress dashboard).
  • Change the WordPress & Site URL to “https”.
Website address changed to HTTPS
  • Save

This will ensure all images & links on your WordPress site open in HTTPS.

However, the job is not done yet, as we still need to redirect all traffic coming from HTTP to HTTPS.

Redirect All WordPress Traffic from HTTP to HTTPS

This step relies solely on what kind of server you are using.

If you are on regular shared hosting like Bluehost, HostGator, etc., you are most likely using an Apache server. Most managed WordPress hosting uses the Nginx server.

You can either edit the .htaccess” file yourself or use this free plugin called Really Simple SSL.

Really simple SSL WordPress Plugin
  • Save

This plugin works for both Apache & Nginx servers.

If you want to do it with code, pick the one that fits your scenario.

  • For an Apache server, the redirection can be done by adding the redirection code in your .htaccess” file:


RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

  • For a Nginx server, if you are the admin, following this guide, or ask your server admin to do it for you.

Additionally, you can use search & replace – http://domain.com to https://domain.com. (This step is highly recommended)

Here is a good script that works pretty well. You can follow these steps mentioned by Brian to use this script.

Search & replace
  • Save

HTTPS Testing Tool:

Now is the time to test your implementation of HTTPS.

You can use this tool to check your site.

Here is the report from the WordPress site that I just migrated to HTTPS:

SSL testing tool
  • Save

Check for SSL Errors:

This is another useful site that scans your website for non-secure content.

HTTPS Online Scanner tool
  • Save

Here are a few more things that you should do over the course of time:

  • Add the “https” site in the Google Search Console & Bing Webmaster Tool.
  • Submit your sitemap.
  • Update all of your social profile links to point to the “https” site.
  • Use the Broken Link Checker plugin to find redirected internal links & fix them with one click.
  • Go to Google Analytics & update the site’s URL.

Hope this helps you to setup HTTPS on your blog. In the coming days I will be sharing more scenarios for setting up SSL certificate for your WordPress site. If you haven’t downloaded our smartphone app, you should do it now to ensure you stay updated.

Download Android app || Download iOS App

Was this helpful?

Thanks for your feedback!
  • Save
184Shares
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

27 thoughts on “How to Fix Mixed Content Error in WordPress After Adding SSL Certificate”

  1. Debbie LaChusa

    Thank you for this step by step guide. I was experiencing all kinds of errors after implementing SSL on my WordPress site. I have easily resolved them all using your steps. THANK YOU!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
184 Shares