How to Fix Mixed Content Warnings After Installing SSL on Your Website

by | May 7, 2026 | Uncategorized | 0 comments

Why Is Your Browser Still Showing a “Not Secure” Warning After SSL?

You just installed an SSL certificate on your website. Everything should be secure now, right? But instead of the reassuring padlock icon, your browser is throwing mixed content warnings. Visitors see security alerts, and your site looks untrustworthy despite having a valid certificate.

You are not alone. This is one of the most common issues site owners face after migrating to HTTPS, and the good news is that it is entirely fixable. In this guide, we will walk you through exactly how to fix mixed content warnings after SSL installation, whether you run a WordPress site or any other type of website.

What Are Mixed Content Warnings?

Mixed content warnings occur when your website is loaded over a secure HTTPS connection, but some of the resources on the page (images, scripts, stylesheets, fonts, iframes, or videos) are still being requested over an insecure HTTP connection.

In simple terms: your page is HTTPS, but it is trying to load something using plain HTTP. The browser flags this mismatch because it breaks the security chain.

Two Types of Mixed Content

Type What It Includes Browser Behavior
Passive (Display) Mixed Content Images, audio, video Browser may still load the resource but removes the padlock icon and shows a warning
Active Mixed Content Scripts, stylesheets, iframes, AJAX requests, fonts Browser blocks the resource entirely, which can break page functionality and layout

Active mixed content is the more dangerous type because scripts and stylesheets can be manipulated by attackers to alter your entire page. Browsers like Chrome, Firefox, and Edge block these resources by default.

Why Do Mixed Content Warnings Appear After Installing SSL?

Installing an SSL certificate changes your site’s protocol from http:// to https://. However, the certificate itself does not automatically update every URL reference across your website. Here are the most common reasons mixed content warnings persist:

  • Hardcoded HTTP URLs in your HTML – Images, scripts, or links written directly as http://yourdomain.com/image.jpg
  • HTTP references in CSS files – Background images or font imports using absolute HTTP paths
  • Database entries still pointing to HTTP – Especially common in WordPress where the database stores full URLs for every piece of content
  • Third-party resources loaded over HTTP – External scripts, CDN assets, or embedded content that have not been updated
  • Theme and plugin files – Older themes or plugins that hardcode HTTP URLs in their source code
  • Inline styles and legacy content – Old blog posts or pages with embedded media using HTTP links

Step-by-Step: How to Fix Mixed Content Warnings After SSL

Follow these steps in order. Each one addresses a different source of mixed content, starting with the quickest wins and moving to deeper fixes.

Step 1: Identify the Mixed Content on Your Pages

Before you fix anything, you need to know exactly which resources are causing the warnings.

Method A: Use Your Browser’s Developer Tools

  1. Open your website in Google Chrome (or any modern browser).
  2. Right-click anywhere on the page and select Inspect (or press F12).
  3. Click the Console tab.
  4. Look for warning or error messages that mention “mixed content.” They will look something like this:
Mixed Content: The page at 'https://yourdomain.com/' was loaded over HTTPS, 
but requested an insecure image 'http://yourdomain.com/wp-content/uploads/photo.jpg'. 
This request has been blocked; the content must be served over HTTPS.

Each message tells you the exact URL of the insecure resource and what type it is (image, script, stylesheet, etc.).

Method B: Use an Online Mixed Content Checker

Several free tools can scan your pages for mixed content:

  • Why No Padlock (whynopadlock.com) – Scans a single page and lists all insecure resources
  • JitBit SSL Checker – Crawls your site and checks multiple pages at once
  • Chrome DevTools Security Tab – Built into Chrome under the “Security” panel in DevTools

Tip: Check more than just your homepage. Mixed content often hides on inner pages, blog posts, and landing pages that have older content.

Step 2: Update Your Site URL Settings

Make sure your site is configured to use HTTPS as the default protocol.

For WordPress:

  1. Go to Settings > General in your WordPress dashboard.
  2. Change both WordPress Address (URL) and Site Address (URL) from http:// to https://.
  3. Click Save Changes.

For Other Platforms:

Check your CMS settings or configuration file for the site URL and update it to use https://. For example:

  • Joomla: Update the $live_site variable in configuration.php
  • Magento: Update Base URLs in Stores > Configuration > Web
  • Static HTML sites: There is no central setting, so you will handle URLs directly in files (covered in the next steps)

Step 3: Force HTTPS via .htaccess or Server Configuration

Set up a redirect so that all HTTP requests are automatically forwarded to HTTPS. This prevents visitors (and search engines) from accessing the insecure version of your site.

Add the following to your .htaccess file (Apache servers):

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

For Nginx servers, add this to your server block:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}

Important: This redirect ensures visitors land on HTTPS, but it does not fix mixed content by itself. Resources hardcoded as HTTP within your pages will still trigger warnings even if the page itself loads over HTTPS.

Step 4: Search and Replace HTTP URLs in Your Database (WordPress)

This is the most impactful step for WordPress users. Your database stores thousands of URLs for posts, pages, images, widgets, theme options, and plugin settings. Many of these will still reference http://.

Option A: Use the Better Search Replace Plugin

  1. Install and activate the Better Search Replace plugin from the WordPress repository.
  2. Go to Tools > Better Search Replace.
  3. In the Search for field, enter: http://yourdomain.com
  4. In the Replace with field, enter: https://yourdomain.com
  5. Select all tables in the database.
  6. Check the Run as dry run box first to preview changes.
  7. If the dry run results look correct, uncheck the box and run the replacement for real.

Option B: Use WP-CLI (Command Line)

If you have SSH access to your server, WP-CLI is faster and more reliable for large databases:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables

Option C: Use a SQL Query (Advanced)

If you are comfortable working directly with your database via phpMyAdmin:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://yourdomain.com', 'https://yourdomain.com');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://yourdomain.com', 'https://yourdomain.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://yourdomain.com', 'https://yourdomain.com');

Always back up your database before running search-and-replace operations. A small typo can break your site.

Step 5: Fix Hardcoded HTTP URLs in Theme and Plugin Files

Some mixed content comes from your theme or plugins rather than the database. Check the following files for hardcoded http:// references:

  • header.php
  • footer.php
  • functions.php
  • Custom CSS files in your theme
  • JavaScript files that load external resources

Search for http:// in these files and replace with https:// where the resource supports it. Alternatively, use protocol-relative URLs by replacing http:// with just //:

<!-- Before -->
<img src="http://yourdomain.com/logo.png">

<!-- After (option 1: explicit HTTPS) -->
<img src="https://yourdomain.com/logo.png">

<!-- After (option 2: protocol-relative) -->
<img src="//yourdomain.com/logo.png">

Note: Protocol-relative URLs are falling out of favor. Explicitly using https:// is now the recommended approach.

Step 6: Fix Mixed Content in CSS Files

CSS files can contain HTTP URLs in properties like background-image, @font-face, and @import. Open your stylesheets and search for any http:// references:

/* Before */
body {
    background-image: url('http://yourdomain.com/bg-pattern.png');
}

/* After */
body {
    background-image: url('https://yourdomain.com/bg-pattern.png');
}

If you use a CSS preprocessor (SASS, LESS), check your source files as well, not just the compiled output.

Step 7: Handle Third-Party Resources

External resources loaded from other domains can also cause mixed content. Common culprits include:

  • Google Fonts (older embed codes may use HTTP)
  • jQuery or Bootstrap loaded from CDNs
  • Embedded videos, maps, or social media widgets
  • Analytics or advertising scripts
  • Custom fonts from external providers

What to do:

  1. Check if the third-party resource supports HTTPS. Most modern services do.
  2. Update the URL from http:// to https://.
  3. If the external resource does not support HTTPS, consider downloading it to your own server and serving it locally over HTTPS.
  4. As a last resort, remove the resource if it cannot be served securely.

Step 8: Add a Content Security Policy Header (Optional but Recommended)

As an extra layer of protection, you can add a Content Security Policy (CSP) header that tells the browser to automatically upgrade insecure requests to HTTPS:

Content-Security-Policy: upgrade-insecure-requests;

Add this to your .htaccess file:

Header set Content-Security-Policy "upgrade-insecure-requests;"

Or in Nginx:

add_header Content-Security-Policy "upgrade-insecure-requests;";

This header instructs the browser to silently change any http:// requests to https:// before they are sent. It is a great safety net, but it should not replace actually fixing the URLs in your code and database.

Step 9: Clear All Caches and Verify

After making changes, you need to clear every cache layer to see the updated results:

  1. Browser cache: Press Ctrl + Shift + Delete or test in an incognito/private window.
  2. WordPress cache plugin: If you use WP Super Cache, W3 Total Cache, WP Rocket, or similar, purge all caches.
  3. CDN cache: If you use Cloudflare or another CDN, purge the cache from their dashboard.
  4. Server-side cache: If your hosting provider uses Varnish or another server cache, clear it as well.

After clearing caches, revisit your site and check the browser console again for any remaining mixed content warnings. Repeat the process for any resources you may have missed.

Quick Reference: Mixed Content Fix Summary

Source of Mixed Content Where to Fix It How to Fix It
Post/page content (images, links) Database Search and replace http with https
Theme files (header, footer, templates) Theme editor or FTP Edit PHP/HTML files directly
CSS background images and fonts Stylesheet files Update URLs in CSS
JavaScript files loading external resources JS files or inline scripts Update URLs in JS files
Third-party embeds (CDN, fonts, widgets) HTML or plugin settings Switch to HTTPS version or host locally
Widget and plugin settings Database (options/meta tables) Search and replace or update via plugin settings page

WordPress-Specific Plugins That Can Help

If you prefer a plugin-based approach, here are some reliable options:

  • Really Simple SSL – Automatically detects and fixes many mixed content issues. Great for beginners.
  • Better Search Replace – For performing database-wide search and replace operations.
  • SSL Insecure Content Fixer – Offers multiple levels of mixed content fixing, from simple to comprehensive.
  • WP Migrate DB – Useful for search-and-replace operations, especially when migrating between environments.

Our recommendation: Use a plugin to handle the initial fix, but then work toward removing the dependency by fixing the root URLs in your database and code. Relying on a plugin to rewrite URLs on every page load adds unnecessary overhead to your site.

How to Fix Mixed Content Without a Plugin

For those who prefer a clean, manual approach (or who do not use WordPress), here is the condensed process:

  1. Use browser DevTools or an online scanner to list every insecure resource.
  2. Open each file that contains an http:// reference (HTML, CSS, JS) and change it to https://.
  3. For database-driven sites, run a search-and-replace query on your database.
  4. For third-party resources, verify HTTPS support and update the URLs.
  5. Add the upgrade-insecure-requests CSP header as a safety net.
  6. Set up a 301 redirect from HTTP to HTTPS at the server level.
  7. Clear all caches and test again.

Common Mistakes to Avoid

  • Only fixing the homepage. Mixed content can exist on any page. Check blog posts, product pages, and custom landing pages too.
  • Forgetting about your CDN. If you use a CDN, make sure it is configured to serve assets over HTTPS as well.
  • Not backing up before search-and-replace. A database-wide replace can cause damage if done incorrectly. Always create a backup first.
  • Ignoring serialized data. WordPress stores some data in serialized format. A simple SQL REPLACE query can break serialized strings. Use tools like Better Search Replace or WP-CLI that handle serialization properly.
  • Assuming the SSL certificate fixes everything. The certificate encrypts the connection. It does not rewrite your content. You still need to update your URLs.

How to Verify Everything Is Fixed

After completing the steps above, confirm your site is fully secure:

  1. Check the padlock icon in your browser’s address bar. It should show a locked padlock with no warnings.
  2. Open DevTools Console and confirm there are zero mixed content messages.
  3. Run an SSL test at SSL Labs to verify your certificate and configuration.
  4. Scan multiple pages using an online mixed content checker or a crawling tool like Screaming Frog.
  5. Check Google Search Console for any security issues or HTTPS-related errors.

Frequently Asked Questions

What causes mixed content warnings after SSL installation?

Mixed content warnings are caused by resources (images, scripts, CSS, fonts, or iframes) that are still loaded using http:// instead of https://. Installing an SSL certificate secures the connection but does not automatically update every URL reference in your website files and database.

Will mixed content warnings hurt my SEO?

Yes, they can. Google uses HTTPS as a ranking signal, and if your pages serve mixed content, the browser may block resources or show security warnings. This can negatively impact user experience, increase bounce rates, and signal to search engines that your site is not fully secure.

Can I fix mixed content in WordPress without a plugin?

Absolutely. You can use WP-CLI or a direct SQL search-and-replace query in phpMyAdmin to update all HTTP URLs to HTTPS in your database. Then manually update any hardcoded URLs in your theme and plugin files. This approach is cleaner and avoids the performance overhead of a plugin rewriting URLs on the fly.

What is the difference between active and passive mixed content?

Passive mixed content includes resources like images, audio, and video. Browsers may still load these but will display a warning. Active mixed content includes scripts, stylesheets, and iframes. Browsers block these entirely because they pose a greater security risk.

My SSL certificate is installed but the site still shows “Not Secure.” Why?

This almost always means mixed content is present on the page. Even a single insecure resource can cause the browser to remove the padlock icon. Follow the steps in this guide to identify and fix every insecure URL on your site.

Does the upgrade-insecure-requests header fix everything?

It helps by telling the browser to automatically upgrade HTTP requests to HTTPS, but it is not a complete solution. If the HTTPS version of a resource does not exist or returns an error, the resource will fail to load. It is best used as a safety net alongside proper URL updates.

How long does it take for browsers to show the padlock after fixing mixed content?

Once all mixed content is resolved and caches are cleared, the padlock should appear immediately on your next page load. If it does not, check for cached versions of the page in your browser, WordPress cache plugin, or CDN.

Need Help Fixing Mixed Content Warnings on Your Website?

If you have followed this guide and are still seeing browser warnings, or if you want a professional to handle the migration properly, our team at Creative Pixels Media can help. We regularly assist clients with SSL migrations, mixed content fixes, and full website security audits. Get in touch with us and we will get your site fully secured.

SUBSCRIBE TO OUR NEWSLETTERS