If you’ve recently migrated your site from HTTP to HTTPS, your customers may find themselves running into what are known as mixed content errors. We’ll break down what you need to know about how to fix these website security-related errors in this quick WordPress mixed content fix guide
W3Techs reports that more than three-quarters of all websites (78.6%) use HTTPS as their default protocol. This is great news considering that https stands for “hypertext transport protocol secure,” which is a secure protocol that keeps your data secure using encryption as it transmits from users’ browsers to your site’ server.
But what happens when, as a site owner, you try to move your WordPress website from the insecure HTTP protocol to HTTPS? Usually, nothing bad — your site will be served via the secure HTTPS protocol as intended. But if you accidentally misconfigure something or miss an important step in the migration process, it can result in your site trying to serve up both HTTP and HTTPS content simultaneously. This collision of a “secure” connection trying to serve of “insecure” content result in displaying a mixed content WordPress error like this in users’ web browsers:
This isn’t a good look for your business’s website, is it? Having any type of warning message is a big red flag to users and prospective customers who visit your site. This is why you need to ensure that you don’t have mixed content errors driving away your business.
How to Fix Issues That Cause Mixed Content WordPress Errors
The best way to avoid having to fix mixed content issues in WordPress is to migrate your site properly in the first place. We’ve previously written about how to migrate your WordPress website from HTTP to HTTPS so as to avoid having this issue altogether. Of course, an important part of this process involves purchasing and installing a valid SSL/TLS certificate on your website. But if everything isn’t fully moved over to HTTPS, then your site will continue to display these mixed content WordPress warnings to your customers and other users.
Trying to deliver your site using both the HTTP and HTTPS protocols simultaneously is kind of like trying to run two trains on a single track: it just isn’t going to work, and you’ll quickly find yourself in a bad situation.
If users are still reporting seeing this error message on your site, it’s something you need to deal with immediately. Not only can it negatively affect your site’s performance and reputation with customers, but it can hurt your ranking with search engines as well. With all of this in mind, here are a few things you should try to fix the issue. Start by saving a backup copy of your website and then move through the steps outlined below until you’ve resolved the issue.
Mixed Content WordPress Fix Step #1: Check Your Site’s Settings
Let’s start with the most basic way to fix the mixed content WordPress error. Go to your WordPress Admin dashboard. Navigate to General > Settings and double-check the WordPress Address (URL) and Site Address (URL) fields. Both should list your website’s URL starting with the secure “https://” protocol instead of the insecure “http://.”
If this didn’t do the trick, then move on to the next step.
Mixed Content WordPress Fix Step #2: Check Your Site’s Resources for Insecure Resources
During your site’s transition from HTTP to HTTPS, it’s possible that there are a few things you may have overlooked (such as changing all of your resource URLs from HTTP to HTTPS or changing hard-coded URLs to relative URLs). So, you’ll want to double-check that you’ve properly redirected your entire website’s internal and external resources — all image or video files, JavaScript, CSS, iframes, scripts, plugins, themes, etc. — to load as secure (HTTPS) resources.
While this one may seem like a no-brainer, it’s easy to overlook. To see if this is your issue, open your browser’s console tab in a tool like Chrome DevTools. You’ll want to look at messages that are highlighted either yellow or red — yellow means that the content is automatically being changed to HTTPS and red means that the content is blocked altogether. For example, you might see something like this if you’re using a graphic that relies on an HTTP file:
Depending on a user’s browser settings, their browser may automatically block all or some HTTP content:
- Google Chrome (starting with version 79) began a gradual process of automatically blocking or auto upgrading mixed content with a slow rollout of several consecutive version updates.
- Mozilla Firefox also blocks active mixed content by default — this process started with Firefox version 23. However, depending on an individual user’s browser settings, they may still have it set so their browser displays passive mixed content.
Basically, what all of this means for you is that your users will more than likely see the red warning messages if they’re using one of these browsers and the files don’t automatically update to HTTPS.
Prior to the browsers’ updates, you used to have to go page by page looking for these issues to manually change the URLs from HTTP to HTTPS. Now, though, the browsers will automatically upgrade resources to HTTPS so they load using the secure protocol. But what if you’re still getting mixed content warnings because some resources aren’t available in HTTPS? You’ll need to locate all of those resources to HTTPS. A great way to locate those resources is to use third-party automation tools to help you find these insecure elements more easily.
Mixed Content WordPress Fix Step #3: Use Third-Party Tools to Scan for Mixed Media
Depending on your operating system, you might be able to use either online or offline tools to address this issue. A few free and commercial third-party tools and plugins you can use include the following (listed in alphabetical order):
- Ahrefs — Although AHREFS is a tool that’s largely used by marketers, it’s still useful for detecting mixed content-related issues on your site. Its Site Audit tool can help you identify changes to your site.
- HTTPSChecker — You can use this tool to scan your WordPress (or other) site for mixed content errors. It offers a free plan option or a paid version as well to meet your different needs.
- Linkchecker — This Python tool enables you to check your website for broken links.
- SSL Check — This tool allows you to enter your website’s URL into its form and it’ll automatically crawl your site to look for issues that could generate mixed content warnings.
- SSL Insecure Content Fixer — This plugin is specifically intended for use to fix insecure content and mixed media resource-related issues on WordPress websites. Just install it on your site and it’ll use automation to fix the tools yourself.
- WhyNoPadlock — This tool simplifies the process of checking for mixed content and other insecure resources.
(NOTE: The tools mentioned above are not recommendations; they’re just examples of some of the tools you can use to accomplish this task.)
For fun, we ran a scan of our entire website just to see if it would find any errors using two of these tools. As you can see from the very end of our search result, it didn’t find any issues:
It’s possible that these WordPress mixed content errors might be happening on specific areas or pages of your website and not the whole site across the board. If that’s the case, these tools can help you pinpoint which pages are linking to resources that are creating these warning messages
Once you’ve discovered the troublesome URLs in question, enter them into your web browser but change the beginning of the URL from http:// to https://.
- If the links load normally, then update them across your site (database) using a search-and-replace process. This will take some time but will likely resolve this issue for you. You can skip step four and move on to step five.
- If it doesn’t, it means you’ll need to migrate that resource to an HTTPS-secured server. Move on to the next step to learn more about that.
Mixed Content WordPress Fix #4: Migrate Internal Resources & Update Your Source File URLs
Now comes the not-so-fun part: You’ll need to migrate all of the resources that are throwing up mixed content red flags to your secure HTTPS domain server. Once this is done, you’ll then have to go back and update the source code that corresponds with each of those resources’ URLs in your database(s).
But what if you have links to third-party resources on your site, such as scripts, that are using http URLs? You’ll have to go in and manually update those as well in your code. But if those third-party resource links aren’t available via HTTPS, the best course of action would be to reach out to the company or vendor directly to ask them to update their resource so it can be served via HTTPS.
Mixed Content WordPress Fix #5: Check Your Handiwork to Ensure No Mixed Content Warnings Remain
As the final step in the process of fixing WordPress mixed content errors, you’ll want to make sure that everything is working properly and that there are no resources throwing up those red flags. To do this, open a new browser and go to your website’s home page. Browse around your site for a bit, visiting different web pages while keeping an eye on your security padlock in the URL bar.
- If the security padlock displays and you see a message stating that your connection is secure, you’re golden and everything is good to go.
- Suppose you’re still seeing mixed content WordPress warnings. In that case, you’ll want to go back and run another automatic scan and manually check your resource links, if necessary, to ensure all resource links are updated.
