Uncategorized

How to Fix Mixed Content Errors After Migrating to HTTPS

ajith July 13, 2025

Migrating your website from HTTP to HTTPS is one of the best moves you can make for security and SEO. But once the SSL certificate is installed and the site loads with a padlock, many website owners are surprised to see that the lock icon disappears on some pages or the browser shows a “Mixed Content” warning.

This article explains what mixed content errors are, why they appear after switching to HTTPS, and how to fix them manually even if you’re not a developer. We’ll also share best practices to avoid them in the future.

This guide is written from a hosting customer’s point of view and doesn’t require advanced server or developer knowledge.

What Are Mixed Content Errors?

When your website uses HTTPS but loads some elements (like images, scripts, or stylesheets) over HTTP, the browser identifies this as a “mixed content” issue.

Two types of mixed content:

  • Passive Mixed Content: Non-critical files like images, audio, or video loaded over HTTP. These often just remove the padlock.

  • Active Mixed Content: Scripts, iframes, or stylesheets loaded over HTTP. These are riskier and may block the page from loading properly.

Why Do Mixed Content Errors Happen After Migrating to HTTPS?

During an HTTPS migration, many site owners:

  • Install an SSL certificate

  • Force HTTPS using a plugin or .htaccess

But they don’t update the hardcoded HTTP links within their theme files, content, or database. That’s what causes mixed content.

Examples:

  • <img src="http://example.com/logo.png">

  • <script src="http://example.com/js/app.js"></script>

These links bypass the secure HTTPS protocol and trigger browser warnings.

How to Fix Mixed Content Errors Step-by-Step

Here’s a practical guide to identifying and fixing mixed content manually or semi-automatically:

1. Check if Your SSL Is Working

Before fixing anything, verify that your SSL certificate is:

  • Properly installed

  • Not expired

  • Covers all domain variants (with/without www)

Use free tools like:

2. Identify Mixed Content Sources

Use any of the following to detect the exact files causing the error:

Browser Tools:

  • Open your website in Chrome

  • Press F12 to open Developer Tools → go to the Console tab

  • Look for messages like:
    “Mixed Content: The page at https://example.com was loaded over HTTPS, but requested an insecure image http://…”

Online Scanners:

3. Update URLs in the WordPress Database

Hardcoded HTTP URLs in your content or metadata can be updated using:

Plugin Method (Quick & Safe):

  • Install Better Search Replace or Velvet Blues Update URLs

  • Search for: http://yourdomain.com
    Replace with: https://yourdomain.com

  • Test with a dry run first, then perform the changes.

Manual SQL Query (Advanced):
If you’re confident using phpMyAdmin:

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘http://yourdomain.com’, ‘https://yourdomain.com’);

Always back up your database before running any changes.

4. Fix Hardcoded Links in Theme Files

Theme or plugin developers sometimes hardcode HTTP links directly into:

  • header.php, footer.php

  • Enqueued scripts and styles

  • JavaScript files

How to Fix:

  • Go to Appearance > Theme File Editor

  • Look through header.php, functions.php, etc.

  • Replace all instances of http:// with https://

Alternatively, use relative URLs like /images/logo.png to avoid future issues.

5. Update External Resource URLs

If your site links to external scripts like:

<script src=”http://cdnjs.cloudflare.com/jquery.min.js”></script>

Try changing to:

<script src=”https://cdnjs.cloudflare.com/jquery.min.js”></script>

If the external source doesn’t support HTTPS, consider:

  • Hosting the file locally

  • Replacing it with a secure alternative

6. Force HTTPS in .htaccess or Hosting Panel

Even if you fix the content, ensure all HTTP requests are automatically redirected to HTTPS:

.htaccess redirect:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

If you’re on cPanel or similar, use the “Force HTTPS Redirect” toggle in your domain settings.

7. Clear Your Cache and CDN

After fixing URLs:

  • Clear your WordPress cache

  • Clear browser cache

  • If using Cloudflare or any CDN, purge the cache to update the URLs

Best Practices to Avoid Mixed Content in Future

  • Always use HTTPS-compatible themes and plugins

  • Use relative URLs for internal links and images

  • When copying content, remove any hardcoded http:// references

  • Keep your site and plugins updated

Final Thoughts

Fixing mixed content errors might seem technical, but with a few checks and tools, you can quickly secure your entire site. It’s not just about removing browser warnings it’s about building trust with your visitors.

Still facing issues? Contact your hosting support and share the specific URLs showing errors. They can help you identify server-side redirection problems or missing SSL coverage.