How to Fix WordPress Mixed Content (HTTP/HTTPS) Errors – Complete Guide

When you migrate your WordPress site from HTTP to HTTPS (or enable SSL), one of the most common headaches is the dreaded Mixed Content Error. Your site is supposed to be fully secure, yet some assets (images, scripts, stylesheets, iframes) are still being loaded over HTTP, causing browsers to warn “Not fully secure” or block those resources. This can erode user trust, harm SEO rankings, and break functionality.

In this guide, I’ll walk you through every angle:

• What causes mixed content errors

• How to detect them

• Multiple methods (plugin, manual, .htaccess, search & replace)

• Code snippets

• Prevention best practices

• FAQs at the end

By the end, your WordPress site should display the green padlock, and you’ll have confidence that no insecure content remains.

What Is “Mixed Content” in WordPress?

When a page is loaded over HTTPS (SSL), but some of its resources (images, CSS, JS, fonts, iframes) are still fetched over HTTP (i.e. unencrypted), that is called mixed content. The browser detects this “mixed” usage and often blocks insecure parts or issues a warning.

There are two types:

1. Passive / Display Mixed Content – e.g. images, videos, audio, iframes. These may be loaded but flagged as insecure.

2. Active / Blocked Mixed Content – e.g. scripts, CSS, AJAX calls. Browsers often block these entirely for security reasons.

If any resources remain on HTTP, the browser might show warnings or refuse to load them. Users see a “Not Secure” label, and search engines may penalize your site (or at least not favor it).

Why Mixed Content Happens (Common Causes)

Here are the usual suspects:

• Your WordPress Address (URL) or Site Address (URL) settings are still HTTP.

• Hardcoded URLs in theme templates, plugin files, widgets, or page content using http://yourdomain.com/….

• Media assets (images, CSS, JS) uploaded or inserted before SSL was active, so they retain http:// links.

• External resources (third-party scripts, fonts, embeds) using HTTP instead of HTTPS.

• A plugin or theme uses absolute URLs instead of protocol-agnostic or relative URLs.

• Incomplete redirects or misconfigured server rules.

Even if SSL is correctly installed, a single mixed HTTP asset can break the padlock.

Step 1: Detect Mixed Content Errors

Before fixing, you must find which resources are causing mixed content.

A. Using Browser Developer Tools

1. Open your website in Chrome (or Firefox)

2. Right-click → Inspect / Developer Tools

3. Go to the Console tab

4. Reload the page

5. Look for warnings like Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure resource ‘http://…’

Each line will often show the URL of the offending resource.

B. Online Tools

• Why No Padlock – enter your domain, it reports all insecure resources

• Mixed Content Scanner / SSL checkers

• WhyNoPadlock.com
  These tools scan your pages and list resources still loading over HTTP.

C. Search & Replace in Database (preliminary check)

Search your WordPress database (using a plugin or via phpMyAdmin) for values containing http://yourdomain.com and inspect the related table/column.

Step 2: Backup First (Do This Before Making Changes)

Always create a full backup before modifying your database or code:

• Export your database

• Copy all files (especially theme/plugin customized files)

• If possible, test on a staging environment

This ensures you can roll back if something breaks.

Step 3: Use a Plugin to Fix Mixed Content (Quick & Safe)

If you prefer a low-risk method, there are reliable WordPress plugins that help fix mixed content automatically.

1. SSL Insecure Content Fixer

This plugin attempts to correct insecure content by filtering and rewriting URLs.

How to use it:

• Install & activate the plugin

• Go to Settings → SSL Insecure Content

• Choose a “Fix insecure content” level — typical options:

  • Simple: fixes CSS, JS, images at the WordPress / media level

  • Content: additionally checks post content and widgets

  • Widgets: includes fixes in widget output

  • Capture / Capture All: more aggressive — may include header/footer, AJAX, etc.

• Save changes and clear any site cache

• Review your pages to see if warnings disappear

If Simple doesn’t catch everything, gradually step up to Content or Widgets, but be cautious with Capture (performance impact)

2. Really Simple SSL

Another popular plugin — once activated, it can force your site to HTTPS, handle redirects, and attempt mixed content fixes. 
After activation, enable the Mixed Content Fixer toggle and possibly the back-end fixer if the admin area also shows issues.

Caveat: Plugins are convenient but may not catch every hardcoded reference. Always double-check manually after plugin fixes.

Step 4: Manual Fixes — Replace HTTP with HTTPS

For robust and lasting results, manual fixes are often necessary. This involves rewriting URLs in DB, files, theme templates, etc.

A. Update Site URL and Home URL

In your WordPress Admin dashboard:

• Settings → General

• Change WordPress Address (URL) and Site Address (URL) to use https://yourdomain.com

• Save changes

Alternatively, via wp-config.php:

Or via SQL query (in phpMyAdmin or via WP-CLI):

⚠ Be careful with table prefix (if you changed wp_ to something else).

B. Search & Replace HTTP URLs in the Database

Many mixed content issues stem from hardcoded http:// links saved in posts, meta, widget settings, plugin settings, etc.

Methods:

1. Better Search Replace plugin (or similar)

   • Search for http://yourdomain.com

   • Replace with https://yourdomain.com

   • Select all tables

   • Run “dry run” first to see how many changes

   • Then execute

2. WP-CLI (if your host supports CLI):

Use --skip-columns=guid to avoid breaking attachments GUIDs.

3. Direct MySQL / SQL queries (advanced, with caution):

Also check option tables, widget tables, plugin config tables.

C. Update Theme / Plugin Files and Templates

In your theme (child theme ideally) or plugin code, search for any hardcoded http://yourdomain.com and update to https:// or use protocol-relative URLs (//yourdomain.com/...) or get_theme_file_uri() / plugins_url() etc.

Example:

Or use:

For CSS/JS enqueues:

Ensure that get_template_directory_uri() returns an HTTPS URL (it should, once site URL is set properly).

Also check for third-party assets (external) that may be using HTTP — if possible, switch to HTTPS or remove them.

Step 5: Force HTTPS via .htaccess (or Nginx / server)

Even if all internal links are fixed, you should force HTTP → HTTPS redirection on your server so that all inbound traffic is secure.

For Apache (.htaccess)

Add this at the top of your .htaccess (before # BEGIN WordPress):

This ensures any HTTP request is redirected to HTTPS.

For Nginx

In your server block:

Also, for CSP enforcement:

After changes, reload Nginx.

Step 6: Clear Caches & Recheck

After making the fixes:

• Clear WordPress caches (via caching plugin)

• Clear CDN cache (if applicable)

• Clear browser cache or test in incognito

• Revisit pages and re-run the developer console checks

• Re-run your mixed content scanner / Why No Padlock

Make sure all warnings are gone and the padlock appears.

Step 7: Prevention Best Practices (Don’t Let It Happen Again)

• Always use relative or protocol-relative URLs where possible (i.e. //yourdomain.com/…), or use WordPress APIs that handle protocol.

• Avoid hardcoding absolute HTTP URLs in content, themes, or plugins.

• When inserting external scripts / embeds, prefer HTTPS versions.

• Update plugins/themes regularly (some updates may fix HTTP resource loads).

• When migrating or migrating content, run search & replace from the beginning.

• Monitor for mixed content warnings periodically (especially after updates).

• Use a content security policy header like upgrade-insecure-requests to force browsers to upgrade HTTP → HTTPS when possible.

Complete Example: Putting It All Together

Here’s a hypothetical scenario and how you’d fix it:

You see in Chrome console:

What you do:

1. Confirm siteurl/home are https://example.com.

2. In theme header or functions.php, locate where style.css is being loaded:

get_stylesheet_uri() returns the correct URI under HTTPS automatically.

3. Run a search & replace: http://example.com → https://example.com in your posts, meta, etc.

4. Ensure .htaccess has redirect rules (see above).

5. Clear caches and validate the fix.

If there are many such warnings, repeat the process for each (images, JS, fonts, etc.).

FAQs (for Users & SEO)

Q1. What exactly is a “mixed content” error?
A: It arises when a page is loaded over HTTPS but contains assets (images, scripts, CSS) loaded via HTTP, causing a security mismatch.

Q2. Does mixed content impact SEO?
A: Yes. Search engines favor fully secure sites; mixed content may weaken your site’s trust signals and ranking potential.

Q3. Can I fix mixed content using just a plugin?
A: Often yes for many sites (using SSL Insecure Content Fixer or Really Simple SSL). But for deep or hardcoded references, manual fixes are required.

Q4. Will updating the database break my media links or images?
A: If done incorrectly, yes. That’s why backups and dry runs are critical. Avoid altering guid column in attachments, unless necessary.

Q5. Does forcing HTTPS via .htaccess solve everything?
A: No. It ensures users are directed to HTTPS, but doesn’t rewrite internal HTTP references. Mixed content warnings will persist unless internal links are fixed.

Q6. How can I avoid mixed content in the future?
A: Use protocol-agnostic URLs (or WordPress functions), always check third-party embeds, and run periodic audits after updates.