WordPress Mix Content Error: Easy Way to Fix It

If you run into a mixed content warning on your WordPress site, don’t just wave it off. This warning indicates misconfiguration. This warning may lead to a more serious problem if not addressed, but luckily you can fix mixed content warnings fairly easily.

In this WordPress tutorial, we will learn what a mixed content warning is, why it is important, and how to fix it easily.

What Is Mixed Content Warning?

Depending on your browser, you will find different information that indicates the mixed content warning.

Basically, the warning informs that there is insecure content found on your website’s page. In most cases, this happens after migrating from HTTP to HTTPS.

When you migrate from HTTP to HTTPS, you do it to create a more secure connection.

But if the change is not configured correctly, WordPress wouldn’t load all the resources over an HTTPS connection. The outcome is the browser issuing the mixed content warning.

Furthermore, there are three circumstances that cause a mixed content warning:

• When the developer uses an HTTP link for theme and plugin coding — absolute path over the relative path.
• When you link to resources without HTTPS enabled.
• When you call other resources scripted using HTTP.

But, why do you need to use  HTTPS over HTTP? Simply put, it adds security.

HTTPS stands for Hyper Text Transfer Protocol Secure, meaning that all the data transferred is encrypted for security. With this encryption, anyone who is not entitled to the data can’t read it. All sensitive information like credit card details is protected.

If your WordPress website is SSL protected – uses HTTPS – you will see a green padlock in the address bar. You can click on it to get the details of the certification.

Why Is It Important?

Simply put, your website may be unsafe. That’s why debugging your WordPress site is essential.

Security

Today, security is not an option.

In fact, it is one of the top priorities when managing WordPress sites. If you use a secure HTTPS connection, you reduce potential risks that may affect your visitors.

An insecure connection might make your customers hesitate to make any financial transactions on your website. So, if you run an online business, make sure your customers don’t meet this warning before the buying process.

The SEO Factor

SEO is a vital factor for any website that wants to attract visitors organically.

Google has officially confirmed that HTTPS is a major SERP rank factor. Mixed content may affect your website’s loading speed too. Keep in mind that speed is an SEO factor as well. Hence, ignoring the mixed content warning would challenge your SEO efforts.

Reliability

The insecure content displayed in your visitor’s browser might break your company’s reputation. The warning may create a bad user experience and hinder you from building customer trust.

So, if you have great, informative content but suffer security issues, the visitors will leave as quickly as they come.

Types of Mixed Content

There are two types of mixed content:

• Active Mixed Content – known as mixed scripting. This mixed content loads the webpages in an HTTPS connection but the scripts load over an HTTP connection. You should pay the most attention to this type of mixed content. It attracts attackers because they can intercept the connection and take advantage of it by stealing data or injecting malware.
• Passive Mixed Content – occurs if audio, video, or image files are loaded through HTTP instead of HTTPS.

Identifying HTTP Assets Loaded on an HTTPS Page

Before you get into the fixing part, you need to identify the problem.

The first thing you need to make sure of is whether you already have an SSL certificate protecting your website.

Now, let’s continue with identifying the errors using three different methods: a plugin, online testing site, and inspect element.

Using Plugins

You can install a plugin to identify HTTP elements before repairing them.

WordPress HTTPS (SSL) is one of the best plugins to handle the task. Once you install and activate the plugin, you can go to the HTTPS settings page in the dashboard. There you will have options to:

• Enter all the secure URLs into SSL Host
• Force SSL enabled
• Individually secure posts and pages

Using an Online Testing Site

You can also use WhyNoPadLock. This online testing site has helped more than 5 million websites manage their security.

All you have to do is enter your URL and start testing the page. If you have issues, you will see an output similar to this:

But, if you have a green checkmark, that means your website is well-configured.

Alternatively, you can try HTTPS checker. This great tool has an online and desktop version. It will help you check any active or passive mixed content, insecure redirects and links, and your site’s SSL certificate status.

Using Inspect Element

The third method is our recommendation.

If you use Google Chrome as your main browser you can use the inspect element tool by right-clicking on a page then clicking Inspect -> Console.

Basically, you don’t have to search for the errors manually, as the tool would help with the list of errors that need to be fixed. But, keep in mind that this way you would check the problem page per page.

If you want to check problems in bulk, you can use the Ahrefs audit tool. This tool will help you check links and resources that cause issues. In fact, this tool can do a more thorough site audit besides identifying only mixed content.

How to Fix Mixed Content Warning

After identifying the issue, it’s time to fix mixed content on your WordPress site.

The easiest way of doing it is to change from HTTP to HTTPS for the identified problems. To do this, you can go to the WordPress dashboard, Settings -> General. Then, make changes to both the WordPress Address (URL) and Site Address (URL).

But, this method would be time-consuming if you have to fix the issue on the whole site manually.

You can install the SSL Insecure Content Fixer plugin to help you diagnose the problems easily.

Once installed and activated, go to the Settings page. You can choose one of the five fix levels:

• Simple – this is the default setting. With it, the plugin will fix scripts and stylesheets registered, along with images or other media. While this is simple, it can’t fix any images or iframes that are hardcoded into HTML.
• Content – this level performs the simple fixes plus cleans up the frames and embedded media in your content and widgets.
• Widgets – this option adds the functionality to clean up all widgets, not only the text ones.
• Capture  – with this you get complete fixes including scripts, stylesheets, and embedded media on your WordPress page.
• Capture All – this level is the top level that also includes AJAX requests. While this level is powerful, you have to use it carefully, as it may cause serious conflicts.

Our recommendation is to start with the default option and gradually move to the next levels if you want to perform more advanced fixes.

Conclusion

Ignoring the mixed content warning is a bad idea. It creates a weak link in your website’s security, so immediate action is highly recommended.

We have learned that fixing mixed content warnings in WordPress is not as hard as it seems. You’re free to use the methods that you prefer. But, sometimes, you need to do more advanced troubleshooting if the problem persists.

Happy fixing and keeping your WordPress website safe!