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.

Web Hosting

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)
  • Scripts (both internal or external tracking scripts)
  • CSS files
  • …you get the idea – everything!

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:

wordpress mixed content warning chrome

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 firefox

Mixed Content Warning In Edge

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

mixed content warning edge

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.

Step 1: Figure Out What’s Causing The Issue (i.e. Find The HTTP Content)

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:

Why no padlock

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:

Chrome dev tools mixed contnet

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.

The easiest way is by using a free plugin from Delicious Brains called Better Search Replace.

Once you install and activate it, go to Tools → Better Search Replace.

Fill out the form like this:

  • Search for: http://yoursite.com
  • Replace with: https://yoursite.com (note the addition of the S)
  • Select tables: – choose all tables

For now, leave the Run as dry run? box checked. This will do a test run before making any permanent changes. Then, click Run Search/Replace to run the test:

Better search replace

If the test run goes through without any issues, uncheck the Run as dry run? box to run it for real.

Fix External Content Loading Over HTTP

If the issue is external scripts or content loading over HTTP, you’ll want to fix things manually.

Let’s say the issue is that you’re embedding Font Awesome via the BootstrapCDN and the Font Awesome CSS file is loading over HTTP (BootstrapCDN uses HTTPS – this is just an example):

Script

In that screenshot, you can see that the offending script link is:

http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

To see if you can load this script over HTTPS, just add an “s” and see if it works in your browser. Below, you can see that I am indeed able to load the script over HTTPS and get the green padlock:

Loads over HTTPS

Once you’ve verified that the script/content loads over HTTPS, all you need to do is add the “s” to all instances of that script/content on your site.

Usually, you can do this by just going to where you’ve embedded the script and adding the “s” that way:

Fix issue

If you can’t find where you’ve embedded the script, another option is to use the same database search/replace method from the previous step to replace the HTTP version with the HTTPS version:

Search replace

Step 3: Verify That You Get The Green Padlock

Once you’ve replaced all the HTTP content with HTTPS, go back and verify that your site does indeed now get the green padlock:

Green padlock

And there you go – that’s how to fix the mixed content warning on your WordPress site. Have any other questions about WordPress mixed content warning issues? Leave a comment!

Colin Newcomer

Colin Newcomer

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.

2 thoughts on “How To Fix WordPress Mixed Content Warning (Easy Step-by-Step Guide)

  1. Однозначно полезная информация для новичков. С плагином вся работа занимает немного времени и результат положительный.
    С уважением

Join the conversation!