How to Fix Mixed Content Issues in WordPress

Are you facing mixed content errors on your WordPress website? This blog shows you how to fix mixed content issues on your WordPress website with ease.

Having an SSL certificate for your website is now a necessity. The secured padlock symbol not only helps you gain the trust of your customers but also get you a better position on search engine. Unfortunately, during migrating from HTTP to HTTPS, you may face several issues. Such as “mixed content”, “insecure content” or show scripts that have been blocked. These issues occur when some particular attributes of your webpage aren’t being loaded securely over the SSL.

To help you out, today we’ll show to how to find which resources aren’t loading over HTTPS and how to fix this issue for the WordPress website and Elementor.

Why wait? Let’s start with the basic what is a mixed content error.

What is Mixed Content Error in WordPress

A mixed content error is a common issue on WordPress that occurs due to incorrect SSL settings while encrypting it on your website.

The mixed content error doesn’t affect your website functionalities. But makes a negative impact on your website’s SEO performance and user experience.

Having a secure website is very essential because users are feeling secure sharing their confidential information like email, passwords, etc while using your website.

Encrypting an SSL certificate adds a padlock icon next to your website’s URL in the browser. This tells users that your website is safe to use.

Mixed content errors occur when you add an SSL certificate to your WordPress website and your website contents are running on both HTTP and HTTPS connections. This means after the SSL encryption some of your same website resources loaded on both the secure and insecure connection. Check the below example-

• https://yourwebsite.com/image.jpg (Secure)
• (http://yourwebsite.com/image.jpg) (Insecure)

Even search engine giant Google also recommended adding SSL on your WordPress website otherwise it will count your website as insecure. Here is an example of a non-SSL website.

Most of the WordPress hosting service providers offer free SSL features in their packages. If your hosting company doesn’t offer it, you may use plugins like Really Simple SSL for adding a free SSL certificate to your site.

How to Find Mixed Content in Your WordPress Website

You can check your website’s mixed content following the below steps:

First Step: You can check the website’s mixed content errors by going to Inspect (Ctrl+Shift+I) for Windows or (Cmd+Alt+I) for macOS.

Then you need to go to the Console tab using the Google Chrome browser. Then you will get an interface like the below image.

Second Step: You are able to check the mixed content warning in the Security tab of your Chrome DevTools.

Third Step: Similarly, you can check the mixed content error in the Chrome DevTools Network area.

How to Fix Mixed Content Issues in Your Website

Now we are going to show you how to fix mixed content errors on your WordPress website.

Let’s get started:

You can simply fix mixed content warnings on your website by installing the SSL Insecure Content Fixer plugin. Check the guide to learn how to install a WordPress plugin.

After installing and activating the plugin, you need to go to the Settings->SSL Insecure Content area.

You’ll get all the essential settings to fix your mixed website content. In the following part, we’ll explain the settings.

Simple
This is the fastest and most recommended way to fix your mixed content. This option fixes your website mixed content for scripts like javascript, stylesheets CSS, and media files such as images & videos.

Content
You can select the Content option if the Simple method doesn’t fix your mixed content. This method resolved your inner WordPress Content and Widgets Text content. This means links that you’ve added inside the website content like anchors, paragraphs will be updated with HTTPS.

Widgets
You’ve used a shortcode or internal link to your website widget and that still stats with HTTP after activating the SSL. By enabling this option, you can convert all the URLs from HTTP to HTTPS loaded in your website Widgets.

Capture
The header and footer are the most essential parts of a website where we keep many scripts, stylesheets, and other links. When we activate the SSL many of the links in the header and footer remain the same. That means these links are loaded with an HTTP connection. If you checkmark the Capture method then your website Header and Footer mixed content by replacing it with HTTPS.

Capture All
If all the above methods don’t fix your problem, you can try the Capture All option. This method forcefully fixes all your website mixed content.

There are some other settings you will also get in the plugin settings area.

If you want to fix the specific plugins and themes’ mixed content, you can select the Fixes for Specific plugins and themes option.

You are able to select Ignore external sites option if you want to leave your website content pointing to external sites as HTTP.

After finishing the mixed content fix level, you can define the HTTPS detection. With this setting, you can select how to detect the HTTPS content on your WordPress website. The default standard WordPress function is recommended. So you don’t need to change it.

At last, you have to click on the Save Changes button for saving the setting.

Bonus 1: Fixing Mixed Content Error for Your Elementor Website

If your website is built with WordPress and Elementor and needs to fix the mixed content on the website, you may follow the following steps.

First, you need to visit the Elementor->Tools area.

On the next, you’ll get the Elementor tools settings. Just click on the Replace URL tab. Then insert your website’s old URL (http://yourwebsite.com/) and (https://yourwebsite.com/) into the Update Site Address (URL) area.

Finally, you need to hit the Replace URL button to replace all of your website URLs from HTTP to HTTPS.

That’s it.

There is another way to solve the mixed content issue. You need to contact your hosting provider to resolve this error. if the fic your SSL encryption error then most of your website mixed content warning will be solved. Then you can follow the above method to fix the other mixed content problem.

Bonus 2: Examples of Some Mixed Content Types

There are many types of content on your website that would be mixed due to the error SSL setup. Below are the notable:

Stylesheet: There are several types of stylesheets used on your website while building. It’s a very common content that would be mixed after activating the SSL. Check the below image to get an idea about it.

Script: Like the stylesheets, your website Script files would be faced mixed content errors. Here is an example.

Media Files: After migrating from HTPP to HTTPS, many of your website media files like images, banners, etc are still loaded with the HTTP connection. Here is an example of a hardcoded image file that counted as mixed content.

Widgets: In a WordPress website, the widget is an essential feature that we used to display static and linkable content. So there always be a chance of mixed content in the widget area.

Theme & Plugin: Sometimes developers mistakenly used HTTP like white developing theme or plugin. So these HTTP link still remains on your website even after you encrypt the SSL certificate. So you need to be careful to fix this mixed content later in our tutorial part you’ll learn how to deal with this issue.

Conclusion

In the above guide, we’ve shared a detailed guide on how to fix mixed content issues on your WordPress website. We’ve also discussed what is the mixed content error and how to fix the Elementor website’ mixed content issues.

If you still need more information or have any questions about this topic, you can comment on us.

Also, check this blog and learn how to fix your WordPress website’ not loading issues.

We request you to connect with your Facebook and Twitter channels and subscribe to our newsletter.