How to Fix Mixed Content in WordPress

Mixed content occurs when a webpage loads both secure (HTTPS) and insecure (HTTP) resources. Modern browsers block insecure content on HTTPS sites to protect user security, which can cause parts of your website — such as images, scripts, or stylesheets — to fail loading.

This guide explains what mixed content is, why it happens, and how you can fix it.

What Is Mixed Content?

When your site is served over HTTPS, all elements on the page — images, CSS, JavaScript, fonts, etc. — should also load over HTTPS.

If some elements load over HTTP instead, that results in mixed content. Browsers consider this unsafe and may block those elements from loading.

Example:

https://yourdomain.com
   image → http://yourdomain.com/image.png  ← insecure

                        
                    

This insecure content is where the problem starts.

Why Mixed Content Is a Problem

Mixed content can:

✔ Break parts of your website

✔ Show security warnings in browsers

✔ Lower user trust

✔ Hurt SEO performance

✔ Prevent HTTPS padlock from showing

Fixing mixed content ensures your site is fully secure and functional.

How to Find Mixed Content Issues

🔎 Use Browser Console

1. Open your website in a browser

2. Right-click and choose Inspect

3. Go to the Console tab

4. Look for warnings like:

Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure resource

                        
                    

These errors indicate insecure resources that need fixing.

📊 Online Testing Tools

You can also test your site using tools such as:

• Why No Padlock

• SSL Labs

• SecurityHeaders.com

These tools help pinpoint what resources are being loaded without HTTPS.

How to Fix Mixed Content

1. Change HTTP to HTTPS in URLs

Go to your website code or database and replace insecure URLs:

❌ http://yourdomain.com/image.png

✔ https://yourdomain.com/image.png

2. Use Relative URLs

Instead of hard-coded URLs, use protocol-relative or relative URLs.

Example:

/images/logo.png

                        
                    

This automatically loads using the current protocol (HTTP or HTTPS).

3. Update WordPress Site URLs

If you’re using WordPress:

1. Go to Settings → General

2. Set both URLs to start with https://

   • WordPress Address (URL)

   • Site Address (URL)

This ensures your main site URLs use HTTPS.

4. Update Database URLs (For WordPress)

If mixed content remains after updating settings, update insecure URLs in the database. You can use a plugin like:

✔ Better Search Replace

✔ Velvet Blues Update URLs

Replace:

http://yourdomain.com

                        
                    

with:

https://yourdomain.com

                        
                    

5. Update Hard-coded URLs in Themes & Plugins

Sometimes themes or plugins use hard-coded HTTP links. Check:

✔ Theme header

✔ CSS files

✔ JavaScript files

✔ Plugin settings

Update insecure links to HTTPS.

6. Force HTTPS Using .htaccess

You can use .htaccess to redirect traffic to HTTPS:

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

                        
                    

This ensures all traffic uses HTTPS, reducing mixed content issues.

7. Update CDN or External Resources

If your site loads assets from a CDN or external service:

✔ Make sure the resource supports HTTPS

✔ Update URLs to use HTTPS

✔ If not supported, replace with another service

Verify After Fixing

After making changes:

1. Clear your browser cache

2. Use the console to check for errors

3. Test again with online tools

No warnings should appear if everything is secure.

Tips to Avoid Mixed Content in Future

✔ Always use HTTPS in new links

✔ Avoid hard-coding HTTP links

✔ Keep themes/plugins updated

✔ Check after adding new content

For Support

For any questions or technical assistance, contact our 24/7 support through Live Chat, support tickets, or our official social media pages.

Frequently Asked Questions

Q1. What is mixed content?

Mixed content happens when a secure HTTPS page loads some resources (like images or scripts) over insecure HTTP.

Q2. How do I know if my site has mixed content?

Open your site in a browser’s console (Inspect → Console) and look for “Mixed Content” warnings.

Q3. Why doesn’t my padlock icon show?

Mixed content can prevent the browser from showing a secure padlock, even if your HTTPS certificate is valid.

Q4. Do I need to update mixed content after enabling SSL?

Yes. SSL only secures the connection — you still need to update URLs that use HTTP.

Q5. Can external scripts cause mixed content?

Yes. If external resources aren’t loaded via HTTPS, browsers will block them and cause mixed content warnings.