How to Fix the Mixed Content Error in WordPress

Have you ever worried about seeing the mixed content error in WordPress? The main cause of the mixed content error is incorrect HTTPS/SSL settings. Usually, the error doesn’t affect the functionality of the website. But, that may lead to adverse effects on the SEO of the website and also user experience. So, in this post, I am going to help you to fix the mixed content error in WordPress.

What is a mixed content error in WordPress?

I am going to start the article with the fact that after July 2018 Google Chrome marked all HTTP versions of the website as insecure. So we strongly recommend you add HTTPS/SSL in WordPress.
The advantages of SSL are it adds a security layer around the transferred data from your website to user browsers and search engines like Google recommend using SSL on your website as well.
Nowadays all the best WordPress hosting companies are offering free SSL as a part of their packages. If your hosting company currently doesn’t offer that, you can get free SSL through Let’s Encrypt for your WordPress site.
Once you implemented SSL on your website accurately, there will be a green padlock icon next to your website URL in the browser address bar as shown in the image below. Similarly, if your HTTPS/SSL settings are not set up accurately, an info sign or a broken padlock icon will be shown in the address bar. This sign indicates that even though your website is using an SSL certificate, some content in your site is still served from non HTTPS URLs. 
Using the inspect tool, you can check which content is served through an insecure protocol. A mixed content error will display as a warning in the console for every mixed content item. If there is only one mixed content item you can fix that manually. You just have to edit the post, page, or theme file where it appears.
But in most instances, these items are added dynamically by WordPress or stored in your database. So, it will be difficult to detect all of them and fix them manually.
While keeping that in mind, let’s move onto the fixing options.

Fixing Mixed Content Error in WordPress

The very first thing you have to do is install and activate the SSL Insecure Content Fixer plugin. You can read how to install a WordPress plugin if you don’t have an idea about that.
Once you activate the plugin, go to the Settings » SSL Insecure Content page to configure the plugin settings.
As you can see in the above picture, this plugin offers various levels of fixes to the mixed content error. Let’s take a look at them one by one.

#1 Simple

For all beginners, this is the fastest and most recommended method. It will automatically fix the mixed content error for scripts, stylesheets, and WordPress media library images.

#2 Content

This option remains the second choice if the simple method didn’t work for you. In addition to all the features of simple, it looks for fixes inside WordPress content and text widgets.

#3 Widgets

This option contains all the fixes applied in the content level and an added feature to resources loaded in all WordPress widgets on your website.

#4 Capture

This particular option captures everything on every page of your website from header to footer and replaces all URLs with HTTPS. A disadvantage is that it is a bit slow and will affect the performance of your website.

#5 Capture all

This remains as the last resort. It can fix everything which may lead to some unexpected behavior on your website. And also has the most negative impact on performance.

Once you have selected a fixed level from the above list, just scroll down to the HTTPS detection section. In this section, you can select how to detect the HTTPS content on your website.

The default option is to use a WordPress function and will work for most of the websites.
Then you will see other options somewhat beneficial if you are using Cloudflare CDN, Nginx web server, and more. Just pick a method that you think suits your website depending on your setup. Please make sure to click on the save changes button after selecting.
Now you can go and check on your website whether the issue is gone or not. And don’t forget to clear your WordPress cache before checking the website.
If the mixed content error is still there, you can go to the plugin’s settings again and select a different fix level.
Good luck! 🙂