Fixing mixed content errors after enabling SSL

After activating an SSL certificate on your WordPress site, one of the most common issues users encounter is the Mixed Content error. This error occurs when your site's main page loads over the secure HTTPS protocol, but some of its resources (images, scripts, stylesheets, or media files) are still being called with the old HTTP address. The result is a security warning in the browser, the absence of the green padlock next to your site's address, and in severe cases, complete blocking of certain elements.

In this article, you'll learn how to use the browser console to identify problematic resources, fix them in WordPress, and prevent this error from recurring. This guide is useful for anyone who has recently activated SSL or is dealing with a Mixed Content error.

Why Does the Mixed Content Error Occur?

When your browser opens an HTTPS page, all resources on that page must be loaded via HTTPS to maintain a secure connection. If even a single image or script uses an HTTP address, the browser identifies it as Mixed Content. This typically happens for one of the following reasons:

• The site address in WordPress settings (WordPress Address and Site Address) is still saved with HTTP.
• Images and media files in the database are stored with old HTTP addresses.
• The theme or plugins have hardcoded HTTP addresses.
• CSS or JavaScript files are loaded directly from external sources over HTTP.

It's important to know that browsers handle Mixed Content in two ways: passive resources (like images) are usually loaded with a warning, but active resources (like scripts and iframes) are completely blocked. That's why fixing this error is critical for your site's health and security.

Step 1: Finding Problematic Resources with the Browser Console

Before taking any action, you need to know exactly which resources are causing the Mixed Content error. The best tool for this is the browser console (Developer Tools). This method is nearly identical across all modern browsers (Chrome, Firefox, Edge).

Opening the Console and Viewing Errors

1. Open your site's homepage in the browser.
2. Press the F12 key or select Developer Tools from the browser menu.
3. Go to the Console tab.
4. In the console filter, enable the Errors or Warnings option.

Mixed Content errors typically appear like this:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/wp-content/uploads/2023/image.jpg'. This request has been blocked.

This message shows the exact address of the problematic resource. If there are multiple errors, copy them into a text file so you can fix them in bulk later.

Checking the Network Tab to Find Blocked Resources

Sometimes the console doesn't show all errors. To be thorough, go to the Network tab and check the Name column. Resources loaded over HTTP are usually displayed in red or with a warning icon. You can use the mixed filter in the Network search bar to see only problematic resources.

Step 2: Fixing URLs in WordPress Settings

The first and simplest step is to ensure the site address in WordPress settings is correct. You can do this in two ways:

Fixing from the WordPress Dashboard

Go to Dashboard → Settings → General and check the following two fields:

• WordPress Address
• Site Address

Both should start with https://. If they still use http://, correct them and save the changes. After this, your site may be temporarily unavailable for a few moments; don't worry, this is normal.

Fixing via the wp-config.php File

If you don't have access to the dashboard or want to be more certain, you can add this code to the wp-config.php file:

define('WP_HOME', 'https://example.com');
define('WP_SITEURL', 'https://example.com');

Make sure to replace example.com with your actual domain. This method is especially useful when the site becomes inaccessible after changing settings.

Step 3: Fixing URLs Stored in the Database

WordPress settings only solve part of the problem. Many images, links, and old content in the database are stored with HTTP addresses. There are several methods to fix these:

Using Search and Replace Plugins

The best and safest way to fix the database is to use plugins like Better Search Replace or Velvet Blues Update URLs. These plugins allow you to search and replace across all database records.

Steps for using the Better Search Replace plugin:

1. Install and activate the plugin.
2. Go to Tools → Better Search Replace.
3. In the Search for field, enter http://example.com.
4. In the Replace with field, enter https://example.com.
5. Select all database tables.
6. Enable the Dry Run option to first see the number of matches found.
7. If the number looks reasonable, disable Dry Run and run the operation.

Manual Fix with SQL Query

If you have access to phpMyAdmin and are familiar with SQL, you can run this query:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://example.com', 'https://example.com');

Note that the wp_ prefix may differ on your site. Only run this query on tables that contain text content; running it on unrelated tables could damage your database.

Step 4: Checking the Theme and Plugins

Sometimes the issue comes from the theme or plugins. Some themes have hardcoded HTTP addresses in their files. To find these:

1. Go to Appearance → Theme Editor (only if you have admin access).
2. Open the header.php, footer.php, and functions.php files.
3. Use the browser's search (Ctrl+F) to search for http://.
4. Change any matches to https://.

For plugins, first deactivate all plugins and check the error. If the error is resolved, reactivate the plugins one by one to find the problematic one. Then either update it or contact its developer.

Step 5: Preventing the Error from Recurring

After fixing the error, you need to ensure it doesn't come back. There are several preventive measures:

Using the HSTS Header

By enabling HSTS (HTTP Strict Transport Security), you force the browser to always use HTTPS. You can do this by adding the following code to your .htaccess file:

<IfModule mod_headers.c>
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
</IfModule>

Note that you should only enable HSTS after you're completely sure SSL is working correctly; otherwise, users may be unable to access your site for a long period.

Using SSL Plugins

Plugins like Really Simple SSL can automatically change HTTP addresses to HTTPS and prevent insecure resources from loading. These plugins are very useful for sites with a lot of content.

Common Mistakes in Fixing Mixed Content

During the process of fixing this error, users commonly make several mistakes:

• Only changing WordPress settings: This only solves part of the problem. URLs stored in the database remain HTTP.
• Using incorrect search and replace: If you enter the domain incorrectly, you could damage your site's data. Always use Dry Run.
• Ignoring external resources: Some scripts and fonts are loaded from external CDNs. If that CDN doesn't support HTTPS, you need to change the source.
• Enabling HSTS before fully fixing the error: This can block user access for a long time.

Conclusion

Fixing the Mixed Content error after SSL activation is a multi-step process that requires care and patience. Using the browser console, you can identify problematic resources, then fully resolve the issue by correcting WordPress settings, the database, and theme files. The most important thing is to back up your site before making any changes and apply changes step by step.

If you've recently activated SSL and encountered this error, don't worry; it's a very common issue and can be resolved by following the steps in this article. If you need secure and reliable hosting for your WordPress site, you can use ServerNet's hosting services, which natively support SSL and modern security protocols.