How to Fix Mixed Content Errors After Enabling HTTPS

You just installed an SSL certificate, and your website now loads over https://. But instead of a secure green padlock, your browser shows a grey warning icon, or text saying "Parts of this page are not secure." This is called a Mixed Content Error.

What is a Mixed Content Error?

A mixed content error happens when your main HTML page loads securely over HTTPS, but some of the resources on that page (like images, videos, stylesheets, or scripts) are still being loaded over the old, insecure HTTP protocol. Because a secure page is loading insecure elements, the browser flags the entire page as vulnerable.

How to Identify the Insecure Content

1. Open your website in Google Chrome.
2. Right-click anywhere on the page and select Inspect.
3. Click on the Console tab at the top of the developer tools panel.
4. Look for errors written in yellow or red that say: "Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure image 'http://...'. This content should also be served over HTTPS."

This console log tells you exactly which images or scripts need to be updated.

How to Fix Mixed Content in WordPress

Method 1: Use the "Really Simple SSL" Plugin (Easiest)

If you don't want to mess with databases, this free plugin will dynamically fix mixed content on the fly.

1. Log in to your WordPress dashboard.
2. Go to Plugins > Add New, search for Really Simple SSL, install, and activate it.
3. Click the prompt that says "Go ahead, activate SSL!"
4. The plugin will automatically detect your AutoSSL certificate and force all insecure links to load securely.

Method 2: Search and Replace in the Database (Best Performance)

While the plugin is easy, it adds slight overhead. The most permanent fix is to rewrite the URLs in your database.

1. First, ensure your site URLs are correct. Go to Settings > General and make sure both WordPress Address and Site Address start with https://.
2. Go to Plugins > Add New and install the Better Search Replace plugin. Activate it.
3. Go to Tools > Better Search Replace.
4. In the Search for field, enter your old URL: http://yourdomain.com
5. In the Replace with field, enter your new URL: https://yourdomain.com
6. Select all tables in the list, uncheck "Run as dry run", and click Run Search/Replace.

How to Fix Mixed Content in Custom HTML/PHP Sites

If you coded the site yourself, you will need to open your theme files or HTML documents and manually update the source links.

<!-- Change this (insecure): -->
<img src="http://yourdomain.com/images/logo.png">

<!-- To this (secure): -->
<img src="https://yourdomain.com/images/logo.png">

Pay special attention to CSS files (e.g., background-image: url('http://...')) and external font scripts.