How to Fix the Mixed Content Error on WordPress (Step-by-Step)
So, you finally got your SSL certificate installed. You're expecting that little padlock to show up, looks clean, looks secure. But nope. The browser's yelling at you. Your site is loading weird. And you're thinking, what now?
That's the mixed content error. It creeps in after switching to HTTPS, but some parts of your site still load over plain old HTTP. A broken image here, a blocked script there, it messes up your layout and your vibe.
I've been there. And if you're on WordPress, it's not as scary as it looks. You just need to know where to look and what to fix. Let's get into it.
What is WordPress Mixed Content Error?
A mixed content error happens when your website uses HTTPS, but still tries to load some things using HTTP.
It usually shows up after you install an SSL certificate. Your site is now secure, but some parts of it are still pulling from non-secure links. That’s where the problem starts.
Let’s say your page loads over HTTPS, but your logo image or a script is linked using HTTP. The browser doesn’t like that. It sees both secure and non-secure content loading at the same time. That’s why it throws a mixed content warning or blocks the insecure stuff.
The result?
- Your padlock icon disappears
- Some files don’t load
- Your site may look broken
- Search engines won’t like it
Most of the time, these insecure links come from images, CSS files, JavaScript, or third-party embeds. Sometimes, it’s something inside your theme or plugin.
How to Check If Your Site Has Mixed Content
The easiest way to know if your site has mixed content is to check your browser. If the padlock is missing in the address bar, something’s not right.
(i) Use Your Browser’s DevTools
- Open your site in Google Chrome
- Right-click anywhere on the page and click Inspect
- Go to the Console tab
- If there’s mixed content, you’ll see warnings like:
Mixed Content: The page was loaded over HTTPS, but requested an insecure image.
It tells you exactly which file is causing the problem.
(ii) Use Online Tools
You can also run your site through free tools like:
Just enter your website URL. These tools will list out all the insecure links for you.
Step-by-Step Guide to Fix Mixed Content Error in WordPress
Fixing the mixed content error in WordPress is mostly about finding and replacing the insecure links.
You don’t need to be a developer to fix it. Just follow these simple steps one by one. Most of the time, a good plugin and a quick scan are all you need.
- Backup Your Website
- Install and Use SSL Plugin
- Update Hardcoded HTTP Links
- Fix Mixed Content from External Sources
- Check Your Theme and Plugins
Let’s go through the process.
01. Backup Your Website
Before you make any changes, take a full backup of your site.
Even simple fixes can go wrong. A backup keeps you safe in case something breaks. You can roll back anytime.
Use a plugin like UpdraftPlus, BackupBuddy, or Jetpack Backup. Most of them let you back up with just one click.
Make sure you back up both files and the database. Once that’s done, you’re ready to move on.
If you don't know how to backup your website, check it our blog on backing up a WordPress website and set automatic or manual backup for your site.
02. Install and Use SSL Plugin
We’re using the SSL Insecure Content Fixer plugin because it’s built specifically to fix mixed content errors. It automatically corrects insecure links throughout your site.
- To install and activate this plugin, navigate to your WordPress dashboard -> Plugins -> Add New Plugin, then search for the plugin.
- Now, install and activate the plugin from the search result.
- After activating the plugin, navigate to Settings -> SSL Insecure Content from your admin dashboard to configure the plugin.
- The Fix insecure content field determines the level of fixing that the plugin will apply. The Simple option focuses on scripts, stylesheets, and WordPress media files, which minimizes impact on website performance. Start here and escalate if needed until the warning is resolved.
- The HTTPS detection field dictates how your WordPress site identifies HTTPS pages. You can set it to the standard WordPress function or choose another option below it if you’re using a reverse proxy like NGINX or Cloudflare CDN.
- Leave other settings as they are and click Save Changes.
- Visit your WordPress site to check if the mixed content error has been resolved.
03. Update Hardcoded HTTP Links
Sometimes, your site has links that are written with HTTP directly into the content. These are called hardcoded links. The plugin can’t always fix these, so you’ll need to update them yourself.
The easiest way is to use the Better Search Replace plugin.
- After installing the plugin, navigate to Tools -> Better Search Replace from your admin dashboard.
- Fill the Search for field with your HTTP website address (
http://yourwebsite.com
), and add the HTTPS version (https://yourwebsite.com) to the Replace with field. - The Select tables field determines which tables to update. Press Ctrl or Command and click each entry to select all the tables.
- Leave additional settings as they are. The form should look like this:
Start with a dry run to check what it finds. If everything looks good, run the real one.
This will replace all HTTP links in your posts, pages, and other content. Once done, check your site again. Most of the broken links should now be fixed.
04. Fix Mixed Content from External Sources
The .htaccess file controls how your web server handles requests, including redirects. Adding a redirect from HTTP to HTTPS here will also stop mixed content errors in WordPress.
Modifying the .htaccess file is simple but can have far-reaching consequences for your website if you get the syntax wrong. We recommend you double-check the text you enter before you save the file.
For Apache servers:
- Log in to your web host’s cPanel or equivalent
- Select File Manager and navigate to the root directory of your website
- Locate .htaccess in the directory, right click and select edit.
- Paste the following at the bottom of the .htaccess file outside the section that begins with # BEGIN WordPress and ends with # END WordPress. Don’t add code between those tags.
IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourdomainname.com/$1 [R,L]
</IfModule>- Change where you see ‘yourdomainname.com’ to your own domain.
- Save the file.
- If you use NGINX instead of Apache, you’ll need to paste the following instead:
server {
listen 80;
server_name yoursite.com www.yourdomainname.com;
return 301 https://yourdomainname.com$request_uri;
}- Change where you see ‘yourdomainname.com’ to your own domain.
- If your web host uses a different port than port 80, change that too.
If the process is successful, users visiting your website through an insecure HTTP link will be redirected to a secure HTTPS connection.
Conclusion
I’ve run into the mixed content error more times than I can count. The first time, it took me hours to figure out what was going on. Now? It’s usually a 10-minute fix.
If you're seeing that padlock missing or your browser throwing warnings, don’t panic. It’s almost always just a few outdated links.
Start with a full backup. Then use the SSL Insecure Content Fixer, it's saved me more than once. After that, clean up those leftover HTTP links. It’s a bit of a hunt, but totally doable.
Once you’ve cleared it all out, refresh your site. That green padlock? It’ll feel like a small win. And it actually makes a big difference for your visitors and your SEO.
