How to Fix Mixed Content Error in WordPress

You secure your WordPress website with an SSL certificate. You expect to see the secure padlock icon in the address bar. Instead, you see a warning. The browser tells you the connection is not entirely safe. This is frustrating. It confuses website visitors and hurts your reputation. This issue is known as a mixed content error.

It is a common problem for site owners moving from HTTP to HTTPS. When this happens, your site is technically secure, but some resources are not. The web browser flags this discrepancy.

Fortunately, you can fix this. This guide will walk you through exactly how to fix mixed content errors in WordPress. We will cover what it is, why it hurts your SEO, and the specific steps to resolve it permanently.

• A mixed content error occurs when an HTTPS WordPress site loads some resources over HTTP, triggering security warnings and trust issues.

• It negatively impacts website security, user confidence, and SEO rankings due to browser warnings and potential vulnerabilities.

• The most common causes include incomplete HTTP-to-HTTPS migration, hardcoded HTTP links, and insecure external resources.

• You can fix it by updating URLs to HTTPS, replacing old links in the database, using SSL plugins, enforcing HTTPS redirects, and fixing hardcoded links.

What is a Mixed Content Error in WordPress and Why It Matters

Before you can fix the mixed content, you must understand its mechanics. It involves how a web server and a browser communicate.

Definition of Mixed Content Error in HTTPS WordPress Websites

When you install an SSL certificate, your website switches from HTTP to HTTPS. The “S” stands for Secure. This encrypts the data between the user and the server.

A mixed content error occurs when the main HTML page loads over a secure HTTPS connection, but requests other files (such as images, scripts, or stylesheets) over an insecure HTTP connection.

Think of it like a fortress. The main gate (your URL) is locked and guarded. However, the side windows (images or scripts) are left wide open. The browser sees these open windows. It knows the security is compromised. Therefore, it displays a mixed content warning.

There are two main types of mixed content:

• Passive Mixed Content: This usually involves content like images or audio. It is less dangerous but still triggers a warning in the URL bar.

• Active Mixed Content: This involves scripts (like JavaScript) or iframes. This is dangerous. Hackers can intercept this content. Browsers often block this content entirely to protect the user.

How Mixed Content Affects Website Security, User Trust, and SEO

Ignoring this issue is dangerous. It affects more than just a visual icon.

• Website Security: Mixed content creates vulnerabilities. If a script loads over HTTP, an attacker can tamper with it. They might inject malicious code or steal user data. This is often called a “Man-in-the-Middle” attack.

• User Trust: Modern browsers like Chrome are aggressive about security. If your WordPress site has mixed content, the browser may display a “Not Secure” message next to your domain name. This scares website visitors. If they do not trust your site, they will leave. This ruins the user experience.

• SEO (Search Engine Optimization): Google prefers HTTPS. It uses HTTPS as a ranking signal. If your site has mixed content errors, it is not entirely secure. Google may penalize your rankings. Furthermore, if users bounce quickly because of security warnings, your SEO metrics drop further.

Common Causes of Mixed Content Error in WordPress

To fix mixed content, you must find the source. Most issues stem from a few familiar places.

HTTP to HTTPS Migration Without Updating Internal URLs

This is the most frequent cause. You install an SSL and change your site address. However, your database still holds thousands of links pointing to the old HTTP version.

For example, you wrote a post two years ago. In that post, you inserted an image. The URL for that image was saved as http://yoursite.com/image.jpg. Even after you switch the site to HTTPS, that specific image link remains HTTP in the database. When the page loads, that image triggers the content error.

Hardcoded HTTP Links in WordPress Themes and Plugins

Sometimes a developer creates a theme or plugin that uses absolute paths. They might write code that looks explicitly for http:// instead of using protocol-relative URLs.

If your theme references a stylesheet or a script using http://, it will cause a mixed content issue on every page where that theme loads. This is common in older themes that have not received support or updates in a long time.

External Scripts, Images, and Fonts Loaded Over HTTP

Your WordPress website likely pulls resources from other places. You might use Google Fonts, external jQuery scripts, or images hosted on a different server.

If you copy an embed code for a widget or an ad, and that code uses HTTP, you get a mixed content error. The host of that external script must support HTTPS. If they do not, you cannot load that resource securely on your site.

How to Identify Mixed Content Error on a WordPress Website

You know you have a problem. Now you need to find the specific files causing it. You do not need to be a developer to do this.

Using Browser Developer Tools to Detect Mixed Content Warnings

The best tool is already in your web browser. Most browsers, including Chrome and Firefox, have a built-in console that displays errors.

• Open your website where the error appears.
• Right-click anywhere on the page.
• Select Inspect or Inspect Element.
• Click on the Console tab at the top of the developer pane.
• Look for red or yellow warnings.

You will see messages that say: “Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure image ‘http://…’.”

This message tells you exactly which file (image, script, etc.) the culprit is. Note down the filenames. These details help you decide which fix to apply.

Using Online SSL and Mixed Content Scanner Tools

If you have a large site, checking every page manually is impossible. You can use automated tools.

Website scanners like Why No Padlock crawl your URL. They identify insecure items. They provide a report listing the mixed content. This saves time and prevents you from missing a hidden script on a random page.

Another option is using SEO audit tools like Ahrefs or SEMrush. These tools perform a full site audit and list all HTTP resources that need fixing.

Step-by-Step Guide to Fix Mixed Content Error in WordPress

Now we move to the solution. Follow these steps in order. We will start with the easiest methods and move to advanced manual fixes.

Step 1: Update WordPress Site Address and Home URL to HTTPS

First, ensure your core WordPress settings are correct.

• Log in to your admin dashboard.
• Go to Settings → General.
• Look for WordPress Address (URL) and Site Address (URL).
• Ensure both start with https://.
• If they start with http://, change them to https://.
• Click Save Changes.

This forces the main site links to use the secure protocol. It might log you out. Simply log back in. If these settings are greyed out, they might be defined in your wp-config.php file. In that case, you will need to edit that file via FTP.

Step 2: Replace HTTP URLs in WordPress Database Using Search and Replace

Changing the settings in Step 1 does not fix links within your content (such as the old image example). You need to update the database.

Warning: Always back up your database before doing this.

Do not run a raw SQL query if you are not an expert. WordPress stores some data in serialized arrays. A raw SQL query will break these arrays, causing your widgets or themes to crash. Instead, use a plugin designed for this.

• Install and activate the Better Search Replace plugin.

• Go to Tools → Better Search Replace.

• In the Search for field, enter your HTTP URL (e.g., http://yourdomain.com).

• In the Replace with field, enter your HTTPS URL (e.g., https://yourdomain.com).

• Select all tables in the list.

• Check the “Run as dry run?” box first. This allows you to see how many changes will be made without actually changing data.

• Click Run Search/Replace.

• Review the result. If it looks correct, uncheck the “dry run” box and rerun it.

This method updates every post, page, and comment in your database. It is the most effective way to fix mixed content caused by old internal links.

Step 3: Fix Mixed Content Error Using WordPress SSL Plugins

If you prefer a “set it and forget it” approach, you can use an SSL plugin. The most popular is Really Simple SSL.

• Install the Really Simple SSL plugin from the WordPress repository.
• Activate the plugin.
• The plugin will automatically detect your SSL certificate.
• It will ask if you want to activate SSL. Click the button to confirm.
• Go to the plugin settings. Ensure the “Mixed content fixer” option is enabled.

This plugin works by dynamically replacing http with https before the page is sent to the browser. It catches images and scripts that the database search might miss. It is highly recommended for beginners.

However, note that this adds a small processing load to your web server because it filters content on the fly. The database search method (Step 2) performs better, but this plugin is easier to use.

Step 4: Force HTTPS Redirects to Prevent Mixed Content Issues

Even after fixing links, you want to ensure no one visits the insecure version of your site. You should force HTTPS redirects at the server level.

For Apache Servers (Most Common): You need to edit your .htaccess file. You can access this file using the File Manager in your hosting control panel or via FTP.

Add this code to the top of the .htaccess file:

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

For Nginx Servers: If your host uses Nginx, you cannot use .htaccess. You must add this to your Nginx config file:

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

This ensures that any request made over HTTP is immediately redirected to HTTPS.

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

If you still see mixed content warnings after the steps above, the issue is likely hardcoded in a file. This requires a manual fix.

• Use your browser’s developer tools to identify the specific file causing the error.

• If the file is part of your theme (e.g., a background image defined in style.css), you must edit that file.

• Connect to your site via FTP or use the Theme File Editor in the admin area (Appearance → Theme File Editor).

• Locate the file.

• Search for http://.

• Change it to https:// or just //.

Pro Tip: Using // (e.g., //example.com/script.js) creates a protocol-relative link. It tells the browser to use the protocol the current page uses.

If the issue is in a plugin, do not edit the plugin files directly. Your changes will be lost when the plugin updates. Instead, contact the plugin’s support team or the plugin’s developer. Ask them to update their code to support HTTPS. If they do not respond, consider finding an alternative plugin.

How to Test and Verify Mixed Content Error Fix in WordPress

You have applied the fixes. Now you must verify that the job is done. You want that green padlock to stay green.

Checking Browser Console and Security Indicators After Fix

After applying the fixes, it is essential to verify that all mixed content warnings are resolved and your WordPress site is loading securely over HTTPS.

• Clear Caching: If you use a caching plugin, clear the cache. Also, clear your browser cache. Browsers often save old versions of pages.

• Reload the Page: Go to your website. Refresh the page.

• Check the Padlock: Look at the address bar. Is the padlock closed and solid? If yes, great.

• Check the Console: Open developer tools again (F12 or Ctrl+Shift+I). Go to the Console tab. It should be free of “Mixed Content” red text.

• Check the Security Tab: In Chrome DevTools, there is a Security tab. Click it. It should say “This page is secure (valid HTTPS).”

If you see green indicators everywhere, you have successfully fixed the mixed content error.

Conclusion

A mixed content error is a minor technical glitch with a significant impact. It hurts user trust, lowers your SEO rankings, and leaves your WordPress website vulnerable.

By following this guide, you have moved your site from an insecure state to full HTTPS compliance. Whether you used the Search and Replace method, an SSL plugin, or manual coding, your site is now safer.

Remember, website security is an ongoing process. Whenever you add new images, install a new plugin, or change your theme, keep an eye on that padlock. If it disappears, you now have the knowledge and resources to bring it back.

FAQs About Mixed Content Error in WordPress