How to Fix Mixed Content Error in WordPress (Visual Guide)

Disclosure: We may earn a commission when you click on links to products or services we recommend. This helps us keep our content free for all. Learn more about how One Smart Sheep is funded.
Are you trying to switch from HTTP to HTTPS, but your WordPress still has mixed content error even after trying everything on the internet?

I can understand your frustration.At One Smart Sheep, we get clients like you who face WordPress issues and waste hundreds of dollars. We give them an extremely affordable solution.Did you know that mixed content warning can affect your site’s SEO performance negatively?Google announced in 2014 that HTTPS would be a ranking factor, and the mixed content warning is the biggest culprit that doesn’t let you take full advantage of HTTPS security.

HTTPS as a ranking factor from Google

Not only does it harm your website on Google, but users see your site as suspicious—not visiting your site ever again.To address the issue, Google has made HTTPS a ranking factor so that webmasters focus on fixing the issue, and hackers cannot steal users’ confidential information from their websites.In this article, you'll learn:

  • What Is Mixed Content Error in WordPress?
  • Examples of Mixed Content Error
  • What Triggers Mixed Content Error?
  • How to Check Checking HTTPS Warnings in Bulk?
  • How to Fix Mixed Content Error Without a Plugin?
  • How to Fix Mixed Content Error with a Plugin?
  • Why Not to Use Really Simple SSL Plugin?
  • Is Cloudflare Effective to Fix Mixed Content?
  • Is 'Better Search and Replace' Safe?
  • Chrome No Mixed Content Warnings Examples

What Is Mixed Content Error in WordPress?

As the name suggests, the mixed content error is when scripts load over HTTP and HTTPS simultaneously, and a warning appears in the address bar of the user's browser. Images, JS, and CSS are script files that load when visiting a website. Even a single file that loads over HTTP can cause a mixed content error in WordPress.

Examples of Mixed Content Error in Different Browsers

Here are the examples you can see how the mixed content errors look like in different browsers:

1. Google Chrome Mixed Content Error Example

According to Statcounter, Google Chrome has a whopping 66% market share.

Browser Market Share September 2020

Google Chrome started to show Not Secure in all the latest Google Chrome versions across all operating systems. See the below screenshot here is how Chrome shows mixed content error. Google Chrome warns, "Your connection to this site is not secure"

Google Chrome Mixed Content Warning

2. Firefox Chrome Mixed Content Error Example

Firebox has a market share of only 4%. Most people love to use it since its memory consumption is a lot lower than on Chrome. Firefox is more descriptive when it comes to showing mixed content warnings.

Firefox Mixed Content Error

3. Opera Chrome Mixed Content Error Example

Opera dominates only 2% of the browser market. Opera isn’t as dangerous as Chrome since Chrome shows users the site is not secure without clicking the padlock.

Opera Mixed Content Warning

4. Edge Mixed Content Error Example

Microsoft is putting real efforts to make Edge better and adopting technologies that have made Google Chrome a hit. Now Edge runs on the Chromium engine, but Microsoft engineers have customized it to look different. Edge shows exactly like Chrome but with different styles, fonts, and icons.

Edge Latest Verion Mixed Content Error Example

What Triggers Mixed Content Error?

Several reasons cause mixed content errors, but I've listed five common reasons:

1. Incorrect WordPress URL Addresses

Most users forget to put HTTPS in WordPress Address (URL) and Site Address (URL) from the General section that falls under Settings, especially when they install a new WordPress instance.

Incorrect WordPress Address

Most of the time, merely putting HTTPS in the URLs fixes the problem without any plugins and external support from your hosting.

2. Installing WordPress from cPanel as HTTP

Most users install WordPress as HTTP since cPanel shows a warning that the respective domain doesn’t have an SSL certificate.

cPanel WordPress HTTP Issue

I strongly recommend to install your blog as HTTPS and install SSL certificates immediately after creating your blog.But if your hosting provider offers a free Let's Encrypt certificate, you don’t need to worry about installing the SSL certificate,.

3. Using Outdated or Nulled Theme

Users download nulled themes from the internet, and many scripts are served over HTTP connections so that hackers can steal the content. Most nulled themes have malware that mostly servers over HTTP connections.

Webshell

Most outdated themes were not built with SSL security in mind, so they frequently cause mixed content errors.It’s better to audit the WordPress theme before you hit the purchase button.

4. Importing Demo Content

Importing demo content is one of the most common reasons before the mixed content warning.Demo content, usually written in XML, is the file that helps your WordPress blog exactly like the demo.

demo content WordPress XML

It has links served over HTTP, and WordPress catches the insecure HTTP links embedded in the demo XML file.Keep reading; we’ve provided a quick solution to this problem.

5. Hosting Limitations

Users fall victim to cheap hosting providers who don’t mention SSL availability until they buy the package.They take full advantage of the people’s ignorance since people don’t have any idea about SSL unless they see the insecure padlock icon.Later on, hosting companies force to use a premium package to use the SSL certificate.

Godaddy SSL

Godaddy provides a free SSL certificate to people who opt for the Ultimate package that costs $13 a month.

How to Check Checking HTTPS Warnings in Bulk

Do you think you have fixed the mixed content warnings from your homepage and you’ve successfully passed the mission?Nope.Your website may have other scripts that might be loading over the HTTP protocol.I suggest checking your whole site for HTTP insecure content.You might be thinking about how to check?

Method 1: Ahrefs Free Webmaster for SEO

Ahefs just made their premium SEO audit tool for free to all webmasters.

Ahrefs Webmaster

It crawls your whole website and finds out all the technical SEO issues on your website.To find all the URLs being served over HTTP, go to Page Explorer and click Filter and choose HTTP protocol.

Ahrefs Mixed Content HTTP Issue SEO Audit

Method 2: Screaming Frog

Screaming Frog has been the industry leader in detecting SEO technical issues, including mixed content issues.The free software is limited to 500 pages only, but it’s enough to find out the culprit.How to get started?Download Screaming Frog from the official website.Put your website and click scan.

Screaming Frog finds HTTP insecure links

Once completed, you’ll find out all the HTTP requests under the Security section.It’s simple, isn't it?

Method 3: Google Advanced Command

The fastest way to find HTTP web pages from your website is to use Google advanced command.The command runs:site:yourwebsite.com -inurl:https

onesmartsheep doest have any SSL and mixed content issue

We’ve optimized our website well so that's why you’ll not find mixed content issues on our website.I recently found out using Google advanced operator that Amazon has several URLs that are still served over HTTPsite:amazon.com -inurl:https

Google Advanced command and operator to find out all insecure HTTP links from your website

Even the biggest company in the world can make mistakes :D

Your connection to this site is not secure issue on Amazon

Check SSL Certificate Before You Try to Fix Mixed Content Issue

When you install a new WordPress instance, it’s highly likely that you see the red padlock.If your hosting company provides free Let’s Encrypt certificates, it’ll take a few minutes until it’s fully activated.You can use different tools that can show either SSL is properly installed on your website or not.Visit whynopadlock.com and check your SSL certificate status.

whynopadlock

It’s crucial otherwise fixing mixed content and insecure connections wouldn’t fix the issue.You can install Cloudflare or Let’s Encrypt that provides free SSL.If an SSL certificate is not installed, you’ll get an error message.Dlg_flags_sec_cert_cn_invalid

Dlg flags sec cert cn invalid error

How to Fix Mixed Content Error with a Plugin

I strongly recommend fixing the mixed content warning without a plugin.But if you’re a newbie to WordPress, you can use the Really Simple SSL plugin that is the best for fixing the mixed content problems.Install the plugin and activate it.

Really Simple SSL plugin installation

When you hit the activity button, you’ll be redirected to this page.

Go ahead and activate SSL

Let me explain the three points:

  1. The CSS and JS files are to be changed from HTTP:// to //. If you’re a complete beginner, ignore it.
  2. Some images and other scripts may be serving from HTTP servers where the SSL certificate is not installed. It’s recommended to remove these files or install SSL from other servers. It happens with a demo theme that imports files from the servers with no SSL certificates.
  3. Making a backup is essential.

Click Go Ahead and activate SSL.You’re done.Your mixed content warning will disappear. If it doesn’t, try the manual method.

How to Make a Backup of My WordPress Blog?

Go to cPanel, and find WordPress that falls under the Scripts section.

WordPress in Script in cPanel

Scroll down to the Current Installations section, and click the Backup Icon.

Backup in the Current Installation section

Select Backup Directory, Backup Database, and select the Default Backup option.

Backuping up WordPress in cPanel

And click Backup Installation.

Click Backup Installation

How to recover? Easy. Click the Backup & Restore icon. You can recover any backup instantly or download to your machine.

Backup and Restore WordPress in Cpanel

How to Fix Mixed Content Error without a Plugin

Sometimes even if you install and activate a Really Simple SSL plugin, your site may not be fully secure. Here are a few ways you can fix:

Way 1 - String Locator and cPanel Editor

You can fix the issues with the String Locator plugin that you can delete later on once you’ve fixed the issue, unlike Really Simple SSL that reset the settings.Check out the below site even with Really Simple SSL installed; still, it has mixed content issues.

Mixed content issue in Inspect Element

The reason? The URL doesn’t have an SSL certificate installed since it's hosted on every hosting. It doesn’t work with https.How can you fix it?First, I need to find the location of the URL in my WordPress directory so that I can replace it.You can use String Locator to find out the URL.

String Locator plugin in WordPress

Go to Tools and select String Locator. Paste the URL that has a mixed content issue by going to inspect elements.

Paste the URL and hit search to find the file that has HTTP

Click Edit.It will redirect you to this complex page. You can make changes here, but sometimes you may not edit properly.

String Locator Editor

It prefers to edit with a cPanel editor since you can’t edit it here if it’s a complicated file.We first need to find the file location.

Find out the location of the file via String Locator

Go to File Manager.

File Manager in cpanel

Go to the desired folder and edit the file.

Locate the file that is causing the mixed content issue

Press Ctrl+F (Control+F in Mac) and paste the URL that is loading in HTTP.

Find the insecure HTTP url in cPanel

Either you can remove it or replace it with the HTTPS version. Upload a file on your blog via Media Library and paste the URL here.

Upload the image in media library

Copy the URL shown on the right side.

Copy the URL from Media Library WordPress

Replace the URL and paste into the url("YOUR COPIED URL HERE") and save changes.As you can see, there are no mixed content issues.

here is how it looks when fixed the mixed content issue in inspect element in console section

Way 2 - .htaccess Method

.htaccess is a highly recommended method that should be used since it works on the server-side that makes the site load faster.You need to go to File Manager in cPanel.

File Manager in Cpanel to locate the htaccess file

.htaccess doesn’t show up as it’s hidden as default. Click Settings and enable SHOW HIDDEN FILES.

settings to enable to see hidden file in cpanel

Refresh the page, and right-click .htaccess and Edit.

Right click the htaccess to edit

You don’t need to do anything, just click Edit.

the message opens when you click edit the .htaccess file

And paste the below code into the file and hit Save Changes.

Saving changes made in .htaccess via cpanel

RewriteEngine OnRewriteCond %{SERVER_PORT} 80RewriteRule ^(.*)$ https://www.website.com/$1 [R,L]Don’t forget to change your website name.Here is how we’ve done for our website:RewriteEngine OnRewriteCond %{SERVER_PORT} 80RewriteRule ^(.*)$ https://onesmartsheep.com/$1 [R,L]

Why Not Use the Really Simple SSL Plugin?

Most people recommend using the Really Simple SSL plugin to solve all SSL and HTTPS problems.But it’s not the right way, according to many experts.Many hosting providers have banned the plugin since it consumes a lot of CPU time and causes the site to shut down.

A hosting banned Really Simple SSL plugin

It’s the reason when you deactivate Really Simple SSL; your HTTPS version doesn’t work.The main purpose of a plugin is to make money. Really Simple SSL provides premium packages.

Really Simple SSL paid packages

You should fix mixed content issues without any plugin for maximum performance instead of relying on plugins that have high consumption, and you end up buying an expensive plugin.At One Smart Sheep, we fix the mixed content issue without any plugin, making the site faster as requests are made from the server level.

Is Cloudflare Effective to Fix Mixed Content?

Cloudflare has several features that may fix the mixed content problem, but it doesn’t. When you turn on Always Use HTTPS and Always HTTPS Rewriters, the issue will not be resolved, most probably.

Always USe HTTPS on Cloudflare

People have been complaining about it on many social media platforms, including the Cloudflare community.

Cloudflare HTTP to HTTPS Issue and people talking about mixed content

You should fix it from on server rather than Cloudflare.If Cloudflare has fixed your issue, let us know in the comment section.

Is ‘Better Search and Replace Plugin’ Safe For Fixing Mixed Content Issue?

Better Search and Replace’ plugin is a helpful plugin that can fix HTTPS issue, but not in all cases.I installed a demo theme on a dummy WordPress to show you how it works.I’ll try to fix the mixed content issues with the help of the plugin.

Mixed Content Error in Inspect Element in Developer Tools

I activated it.

Search for the plugin Find Replace in WordPress

I added a rule.

Adding a Marking Rule in Find and Replace from HTTP to HTTPS

When I added the rule, the site was destroyed. It didn’t work as expected.

Website is not loading properly when a rule added in FIND Replace plugin

But the good news is that you can remove the rule that you added that fixes the issue that you have encountered.

Remvoing a rule in Find and Replace if HTTPS doesnt work

Why Is Elementor Not Working with HTTPS?

If you’re using Elementor, there is a greater chance of having mixed content issues on your website.You can quickly fix it by going to Tools>ReplaceURL and type your old URL without HTTP and replace it with HTTPS.

Replacing URL in Elementor from HTTP to HTTPS

And don’t forget to regenerate files otherwise, the changes will no longer work.

Elementor Regenerate files for fixing HTTPS and insecure connections

Does the issue persist still?Try the manual method without a plugin. Keep reading...

Examples of No Mixed Content Error in Different Browsers

Here are real examples of different browsers and how they look when mixed content issue is resolved:

1. Chrome No Mixed Content Warnings Example

If you’ve fixed the mixed content issue, Chrome will award you with a green padlock :)

Google Chrome No Mixed Content Warning

2. Firefox No Mixed Content Warnings Example

Firefox indicates the connection is secure after you’ve fixed the mixed content warning. When you click the > icon, you can see which authority has issued the certificate.

Firefox No Mixed Content and Green Padlock

3. Edge No Mixed Content Warnings Example

Edge runs on chromium shows the same as Google Chrome.

Edge No Mixed Content Warning

4. Opera No Mixed Content Warnings Example

Opera also runs on chromium, but it doesn’t show the green padlock :D

Opera No Mixed Content Warning and Green Padlock

Final Thoughts

Fixing mixed content is not easy to solve in most cases, but having technical knowledge can really help you.It doesn’t only impact your user experience, but also negatively affects your SEO performance.If you can’t afford to fix your WordPress issue every second day and don't want to waste hundreds of dollars, you should hire One Smart Sheep that fixes, builds, maintains, hosts websites on ultra high-speed servers and many other great features for a flat rate so that you don't need to worry about any issue that may arise in future.The most effective method is the one that is done manually with the .htaccess file since it doesn’t put any strain on the CPU otherwise using Really Simple SSL and other plugins cost you money in the long term due to higher consumption of your resources.

Frequently Asked Questions

How do I fix the mixed content error?

Mixed content errors occur when a website is not fully secure, meaning that some elements of the page are loaded over HTTP instead of HTTPS. This can happen when you install a new plugin or theme or update your site's settings. It's important to fix mixed content errors as soon as possible to ensure that your site is secure and your visitors' data is protected.Here are some steps you can take to fix mixed content errors:

  • Update all internal links to use HTTPS: This includes updating any internal links within your site, such as links to images, scripts, and other resources. You can do this manually by editing each link in your site's code, or you can use a plugin like Better Search Replace to automate the process.
  • Update any external links to use HTTPS: This includes links to external resources, such as social media profiles or third-party services. You can usually find the HTTPS version of a resource by adding "https://" to the beginning of the URL.
  • Use a plugin to fix mixed content errors: There are many plugins available that can help you fix mixed content errors, such as Really Simple SSL or Better Search Replace. These plugins can automatically update links and resources to use HTTPS, making the process much faster and easier.
  • Check your SSL certificate: Make sure that your SSL certificate is valid and installed correctly. You can check this by visiting your website and looking for the padlock icon in the browser's address bar. If the padlock is not present, there may be an issue with your SSL certificate.
  • Use a content delivery network (CDN): A CDN can help to improve the security of your site by encrypting all traffic between your server and visitors' browsers. This can help to prevent mixed content errors from occurring in the first place.

How can I bypass mixed content errors?

While it's not recommended to bypass mixed content errors, there are some ways to temporarily ignore the error and access the site. However, this is not a long-term solution and can compromise the security of your site.One way to bypass mixed content errors is to disable HTTPS and revert back to HTTP. However, this will remove the security benefits of HTTPS and could leave your site vulnerable to attacks.Another way to bypass mixed content errors is to use a browser extension or plugin that allows you to ignore the error and access the site. However, this is not a recommended solution, as it could put your data and privacy at risk.The best way to address mixed content errors is to fix them by updating all links and resources to use HTTPS, ensuring that your SSL certificate is valid, and using a content delivery network (CDN) to encrypt traffic. By fixing mixed content errors, you can ensure that your site is secure and your visitors' data is protected.

How do I get rid of mixed content errors?

Mixed content errors occur when a website is loaded over HTTPS, but some of its resources are loaded over HTTP. To fix this, ensure all resources (like images, scripts, and CSS files) are loaded over HTTPS. You can do this by updating URLs in your website's source code or database to use "https://" instead of "http://". Tools like SSL Insecure Content Fixer can help automate this process.

How do I fix WordPress plugin errors?

To fix a WordPress plugin error, first identify the problematic plugin by deactivating all plugins and then reactivating them one by one. Once identified, check for updates for that plugin, as an update may resolve the issue. If the problem persists, contact the plugin developer for support or look for alternative plugins.

How do I fix WordPress theme errors?

If a WordPress theme is causing errors, switch to a default WordPress theme (like Twenty Twenty-One) to see if the issue resolves. If it does, the error is likely within your theme. Update the theme if an update is available, check for conflicts with plugins, and ensure all theme files are correctly uploaded. If necessary, contact the theme developer for assistance.

How do I fix mixed content issues with Elementor?

In Elementor, mixed content issues can be resolved by ensuring that all URLs in your Elementor content use HTTPS. Use Elementor's "Tools" section under "Elementor" > "Tools" > "Replace URL" to update URLs from HTTP to HTTPS. Additionally, check your site settings and make sure the WordPress Address (URL) and Site Address (URL) are set to HTTPS in the WordPress settings.

Switch From Wix to WordPress
We offer a professional migration service to move your Wix website to WordPress seamlessly and securely.
Details
Custom Webflow Website Services
Our Webflow experts at One Smart Sheep offer affordable and professional Webflow design services.
Details