How To Fix WordPress Mixed Content Warning (Easy Step-by-Step Guide)

Did you just move your WordPress site to HTTPS only to be met with some weird mixed content warning instead of that beautiful green padlock that you were expecting? Or, maybe you’re still in the planning stages for using HTTPS at your WordPress site and wondering what to expect when you make the switch.

Either way, this post is going to be helpful for you because I’m going to show you how to fix one of the most annoying issues after moving a site to HTTPS/SSL:

The mixed content warning.

First, I’ll explain what the mixed content warning actually means and why it might be happening to you, as well as what it looks like in various popular web browsers.

Then, I’ll give you a step-by-step guide on how to diagnose and fix the mixed content warning for your WordPress site.

Here’s What The Mixed Content Warning Means And Why It Happens

When you use HTTPS and an SSL certificate, it encrypts all the data that passes between your server and your visitors’ web browsers. However, in order for that encryption to work, everything passing between the server and browser needs to use HTTPS.

For example, you need to load:

Images or videos (both your own media or media that you’re embedding from somewhere else)

The mixed content warning appears when your site is still loading some assets over HTTP instead of HTTPS.

So why is that a problem? Well, let me quote from Google here as they do a good job of summing the issue up. Mixed content…

…weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.

That doesn’t sound too nice, right?

Basically, even though you’re trying to do the right thing by using HTTPS, loading mixed content isn’t getting you the full benefits of HTTPS because a malicious actor could still hijack that HTTP content.

What The Mixed Content Warning Looks Like In Different Browsers

Because mixed content weakens the security of your page, most browsers show a warning to visitors if your site serves up mixed content. Here’s what the mixed content warning looks like in popular browsers, so you can tell whether or not it’s happening to your site.

Mixed Content Warning In Google Chrome (And Other Chromium Browsers)

In Chrome or other Chromium browsers (e.g. Opera), mixed content gets the generic information icon instead of the green padlock. Additionally, if users hover over the icon they’ll see that ominous “Your connection to this site is not fully secure” message:

Mixed Content Warning In Firefox

In Firefox, you see the same information icon, as well as a yellow alert symbol over the padlock. If users hover, they’ll see “Connection is not secure”:

Mixed Content Warning In Edge

In Edge, it actually shows the Not secure message, as well as a deeper explanation if users click:

Most Likely Causes Of Mixed Content On Your WordPress Site

Ok, if you just moved your site to HTTPS but are getting the mixed content warning instead of the green padlock, here are some of the most likely causes.

You’re Still Loading HTTP Images (Either Your Own Or Other People’s)

When you update your WordPress site’s URL to use HTTPS, it changes all the WordPress-generated links like:

Menu items

Post archive links

Widgets

Etc.

But it doesn’t change all of the links in your content (e.g. anything you typed into the WordPress editor), including the images that you’ve embedded. As a result, all of your old images are still loading over HTTP.

Thankfully, this is pretty easy to fix by running a search/replace on your database.

If you’re hotlinking images from other servers and loading them over HTTP, that might be another reason for the warning. You’ll need to fix these manually.

You’re Using External Scripts Or Embeds Over HTTP

Pretty much every site is going to load external scripts or embed external content. For example, the Google Analytics script, or a YouTube video.

If those scripts/embeds use HTTP, they’re going to trigger a mixed content warning.

Most modern scripts that you’d embed are already using HTTPS, but this can be an issue if:

You haven’t updated the embed code in ages (e.g. I had an Amazon embed code from years ago that still used HTTP, even though Amazon had since moved to HTTPS)

You’re using a lesser-known script that uses HTTP for some reason

One Of Your Plugins Uses Absolute Paths (A No-No)

This one should not be an issue if plugin developers use proper code standards. But some plugin developers use absolute paths instead of relative paths, which might cause some plugin content to load over HTTP.

You probably won’t run into this that often because most developers do things properly – but it can happen.

How To Fix WordPress Mixed Content Warning: Step-By-Step

Now that you know what the issue is and why it might be happening, let’s cover how to diagnose and fix it.

To start, you need to sniff out the HTTP content on your site that’s triggering the mixed content warning.

There are a few ways that you can do this.

First, there are lots of tools that can help you find mixed content on your site.

If you’re only getting the error on a single page, the free Why No Padlock tool is great. All you do is enter your URL and it tells you the exact resource that’s causing the problem:

It even tells you what you need to do to fix the issue.

Why No Padlock only works for a single URL, though. So if you’re seeing the mixed content error sitewide, you might want a bulk tool like HTTPS Checker, which will crawl up to 500 pages for free (or up to 10,000 pages for $9 per month).

Alternatively, you can also just use the Security tab of Chrome Developer tools to find what content is insecure:

Step 2: Fix The Issue (A Few Different Scenarios)

Once you find what’s causing the issue, you simply need to update the resource to use HTTPS (if possible) or stop loading the resource (if it doesn’t support HTTPS).

Here are a few ways to do that depending on what’s causing the problem.

Because some of these changes involve your database, I would highly recommend backing up your site before you continue.

Fix Your Own Images Or Content Still Loading Over HTTP

If your own images or other self-hosted content are still loading over HTTP after you’ve already installed an SSL certificate and activated HTTPS for your site, the best way to fix the problem is to run a search and replace on your database.

Basically, you’re going to find all instances of http://yoursite.com and replace them with https://yoursite.com.

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.