How To Fix Mixed Content Error In WordPress! (Solved)

Last Updated on 2nd December 2022 by Ajmer Singh

This article contains a detailed guide on how to fix mixed content errors in WordPress.

Have you ever run across a mixed content issue on your site? Oftentimes, it is a result of migrating from HTTP to HTTPS.

During the process of migration, some files were carried over.

Hence, the end product is a mixed content error. 

Wondering what the mixed content error is? I will explain this in the next paragraph.

Let’s proceed.

What is a mixed content error?

Mixed content is a term used by web browsers to describe pages viewed over HTTPS that include insecure assets, such as images or scripts loaded from HTTP locations.

If your website uses HTTPS then it will have an SSL certificate which basically secures the connection between the user’s browser and your server.

The problem is that not all web servers are properly configured for hosting websites with SSL certificates, so sometimes people see this kind of error message in their browser:

That’s why I recommend choosing fully performance-based hosting like Cloudways (for best performance) or Bluehost (for low-budget users).

Mixed Content Example:

The page at ‘https://domain.com/page-1’ was loaded over HTTPS, but requested an insecure script ‘http://domain2.com/script2.js’.

This request has been blocked; the content must be served over HTTPS.

Mixed content example in Google Chrome

In case you see this warning in your browser – it means that the page is trying to load javascript code over an http (insecure) connection.

First, let’s understand what causes mixed content:

Some web servers do not support hosting multiple websites with SSL certificates and also scripts and images from external sources or other websites.

Secure way to serve shared files: /home/site1/subdir1/script2.js –> https://domain.com/subdir1/script2.js

Unsecure way to serve shared files: /home/site2_subdir4_sharedimage3.png –> http://third-partydomain-or-IP/sharedimage3.png

As you can see – the first way is clean and secure, while the second one includes all kinds of variables that may create security flaws on your site.

In case you have a WordPress website then there are two possible solutions for mixed content:

mixed content error solution

1) You manage your web hosting account and configure it to support secure websites.

In this case, contact your hosting provider and ask them to enable an SSL certificate on your web server.

Also, they should ensure that scripts from external sources will be requested over the https:// connection as well.

2) If you do not have control of the hardware or hosting plan used by your web host,

then you have to use some other way how to fix mixed content errors in WordPress.

For example, by using some plugin that forces all your content to be served by https://

Really simple SSL or WP Force SSL is one of such plugins and it will redirect all http requests over SSL as well as force scripts and styles to use https connections – basically mitigating mixed content error in WordPress.

We can conclude that the main reason for mixed content is insecure servers that cannot host websites properly.

So do not forget about contacting your hosting provider and asking them to fix the issue.

What does the mixed content error mean?

mixed content error solution

Mixed content error is said to happen if your website loads over a secured HTTPS connection,

but other content such as the image, and scripts are loaded over an insecure HTTP connection.

If a site displays a mixed content error, it simply means that some of the content on that site is not secured and is susceptible to malware attacks.

However, there are two types of mixed content, and I will be explaining them below;

Types of mixed content error!

We have two types of mixed content errors namely:

  1. Passive mixed content error
  2. Active mixed content error

1. Passive mixed content error

Mixed content error is said to be passive when the HTTP content of the site is restricted and cannot react with the rest of the page. (Images and videos)

For instance, an attacker can have access to only the videos or image content on the site,

but is restricted and can’t have access to alter any change to the rest of the page.

Oftentimes, the passive mixed content error is not considered a threat to a site, but in actual fact, it is.

mixed content error solution

An attacker can decide to replace the image or video content on your site with nudes and indecent content,

or with ads that redirect users to a different site.

This defaces your site to users, hence the need to act fast.

2. Active mixed content error

A mixed content error is said to be active when the unencrypted HTTP content is not restricted, It can interact with and alter the entire page.

The active mixed content poses more threat to a site’s page than the passive mixed content.

Once compromised, an attacker has access to the entire webpage and can alter or make changes to the entire page.

The attacker has access to sensitive information about your users and this might include their login details, their bank information, etc.

He can decide to redirect users to an attacker’s site and can also make use of the sensitive information of users against them.

Most browser often indicates that a site isn’t secured and contains mixed content, However, some browsers block the active mixed content.

However, each rule varies with different browsers.

Causes of mixed content error!

The mixed content error appears often times after the migration of a WordPress site from HTTP to HTTPS.

Some of the content refuses to be loaded over the HTTPS, hence mixed content warning occurs.

Below are some of the causes of mixed content warnings;

  1. Images that have hardcoded URLs (Images that run over HTTP)
  2. Links attached to the HTTP version of external scripts
  3. Embedded video script that is loaded on HTTP instead of HTTPS 

Where to check mixed or insecure content?

mixed content error solution

To know if your site contains the mixed content error

-Simply right-click or Ctrl+SHIFT+I on your web page

-Choose the ‘inspect‘ option from the series of options displayed

-A page will pop open on the right side of the page.

-Click on the console tab. If your site has any mixed content error, it will be displayed here.

How to fix mixed content errors in WordPress?

mixed content error solution

The first approach to getting the mixed content error fixed in WordPress is to install and activate the SSL Insecure Content Fixer plugin.

SSL Insecure Content Fixer Plugin Settings

Upon activation, navigate to the settings page of the SSL insecure content fixer plugin to get it configured.

The plugin provides five levels for fixing the mixed content error, I will give an explanation of each one of them.

  • Simple
  • Content
  • Widgets
  • Capture
  • Capture all

1. Simple

This is the most recommended and fastest method of fixing mixed content errors in WordPress for beginners.

It fixes mixed content errors for scripts, style sheets, and WordPress media automatically.

2. Content 

If after trying out the simple method, the mixed content error on your site isn’t fixed, try out this method.

It uses all the features found in the simple method, but it also has an additional feature of fixing WordPress content and text widgets.

3. Widgets

These contain all the features in the content method.

It has an additional feature of fixing resources loaded in the WordPress widgets of your site

4. Capture

The capture method, however, captures every page on your website including the header and footer of your page.

It also replaces all URLs with HTTPS.

The disadvantage of this method is that it is quite slow and it affects the performance of your site.

mixed content error solution

5. Capture all

After you have tried out all the methods listed above, and you still don’t get your expected result, try this method.

The capture-all method fixes everything on your site.

However, the downside of this method is that it has a negative impact on the performance of your site. 

After you have successfully activated and configured the SSL insecure content fixer plugin, it’s time to verify that the issue is solved.

How to verify that the mixed content issue is solved?

In this paragraph, I will be illustrating how you can verify that the mixed content error issue on your site has been solved.

To verify, simply use the whynopadlock online tool to check.

This tool consequently checks your website and informs you about the success of the process.

All you need to do is simply visit the whynopadlock website on your browser. Enter the URL of your site.

Click on the test page option displayed.

You will receive a response similar to the image below if the mixed content issue has been resolved on your site.

mixed content error check whynopadlock

Another method of verifying that the mixed content error issue has been fixed is by clicking around a few pages and checking the browser status indicator in the search bar.

A secured padlock indicates that the error has been fixed  

If after clicking a few pages, the mixed content error isn’t fixed, you will have to revisit the plugin and restart the configuration process.

FAQS about Mixed Content Errors!

Q: What is a mixed content error?

A: A mixed content error occurs when there are HTTPS referenced resources, but the page itself is being served over HTTP.

Q: When would I see a mixed content error?

A: You would see this error when you are connected to the Internet through a secure HTTPS connection,

but trying to view a webpage over an HTTP connection.

mixed content error solution

Q: Are there other ways to handle mixed content?

A: You can set up HTTPS on an alternate port or subdomain so that you are not serving over HTTP at all.

This solution requires SSL certificates and may require a separate IP address.

Q: I have a secure SSL certificate installed on my webserver and my page still shows a mixed content error. What should I do?

A: You can check your website with WhyNoPadlock to determine if you have a mixed content issue.

If the checklist results in one or more errors, then you will need to resolve them before your site is secure.

A migration from HTTP to HTTPS needs to be handled carefully, and it is recommended that developers of websites use a professional migration service.

We recommend using Cloudways as a web hosting provider with their free professional migration service.

mixed content error solution

Conclusion

Webmasters and site owners need to be aware of mixed content errors, as they can cause a number of problems with your website.

If you’ve noticed that some parts of your sites are not loading properly or you have security warnings about certain scripts on the page,

then it is possible that there may be an issue with mixed content.

We hope we were able to answer any questions and provide helpful information in regard to fixing your mixed content error issue.