How to Fix Mixed Content Warning in WordPress?

Nowadays, using SSL with HTTPS protocol is mandatory for all websites even though your site serves only text/image content without collecting user data. Most WordPress hosting companies use free Let’s Encrypt SSL and automatically renews it to make things simple. However, the problem comes with mixed content warnings when there are insecure HTTP links on your site. In this article, let us explore how to find insecure content and fix mixed content warning in WordPress site.

Checking Mixed Content Warning

When you have SSL and the page is loading with HTTPS, it is not quite easy to find mixed content waning problems. There are two options for you:

Check browser console – right-click on your page and select “Inspect” or “Inspect Element” option. This will open Developer Tools section and check the errors under “Console” tab.
Check browser’s address bar – you may notice Chrome and other browsers are frequently showing “Not Secure” message in the address bar instead of a padlock when you visit your site. Sometimes, you will only see an information icon instead of a padlock and clicking on that will show the connection is insecure.

Why Mixed Content Warning Issue Happens?

Before fixing the issue, it is important to understand why it happens at first. There could be two major reasons for this:

You are using third-party script for ads or analytics which are loaded from insecure domain. In this case, you can force all files loaded on your site to use HTTPS. Since you can’t change external websites, you will still see browser console errors on your site. Since advertisements load dynamically each time, you may find mixed content warnings happen randomly and not always.
You missed some setup in WordPress though SSL is installed. For example, you might have migrated http URLs to https and did not change all instances of URLs inside your content. In this case, you can easily check and replace the URLs to fix the issue.

Fix Mixed Content Warnings in WordPress

First make sure to check you have SSL certificate installed on your domain with correct validity. After that, try the following things depending upon the situation.

1. Check WordPress Site Address Setting

Some hosting companies like SiteGround does not add HTTPS to site address when you install WordPress. You can change the site address to use HTTPS instead of HTTP:

Login to your WordPress admin panel (it may work with https:// URL).
Navigate to “Settings > General” section.
Check “WordPress Address (URL)” and “Site Address (URL)” fields.
If they are using http://, change to https://.
You will be logged out and login again with https:// URL. Henceforth, you can only use https:// for viewing all your site’s pages.

2. Force HTTPS in Hosting

It is also possible to force HTTPS in URL using different ways. The best option is to check whether your hosting company offers an option to do this. For example, you can force HTTPS in SiteGround Site Tools by navigating to “Security > HTTPS Enforce” section.

HTTPS Enforce in SiteGround Hosting Account

Alternatively, you can add the following directive in your .htaccess file to force HTTPS connection. Learn more about how to edit .htaccess file in WordPress.

# START FORCE HTTPS
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
# END FORCE HTTPS

Add Force HTTPS Directive in htaccess File SiteGround

3. Enable HTTPS Rewrites in Cloudflare

If you are using CDN services like Cloudflare, make sure to enable HTTPS option in your setup to fix mixed content warnings. In Cloudflare, navigate to “SSL/TLS > Edge Certificates” section and enable “Automatic HTTPS Rewrites” option. When you have HTTP URLs in your site, Cloudflare will try to fetch the equivalent HTTPS URLs thus avoiding mixed content warning. This is very useful for external resources like jQuery where your site is trying to load old http reference.

In addition to automatic rewrites, there are also few more options available on the same “Edge Certificates” section in Cloudflare.

Always Use HTTPS – this setting is like forcing HTTPS and uses 301 redirect for all http URLs to force https.
HTTP Strict Transport Security (HSTS) – this will add HTTP header in server response to replace all http references with https when the page loads through https://. However, this option will bring your site down when you disable Cloudflare till the time the cache headers are cleared. You should be aware of that fact and other than that it will help to fix mixed content warnings and improve your site’s security.

4. Manually Replace HTTP to HTTPS

Sometimes you may have lot of http:// instances in your site which uses SSL and HTTPS protocol. This could be due to migration from old site or you linked third-party URLs with HTTP. When you force HTTPS with this situation, all the HTTP linked sources will be blocked on your site. It means you will see broken images, scripts or layout (due to CSS) on the published site. Browsers will also show warning in the address bar.

If you have third-party URLs in header or footer section, confirm with the developer and replace HTTP to HTTPS wherever supported.
If you have large number of files (like images) linked with http://, then the solution is to search and replace all http:// instances with https:// in your WordPress database. You can do this using phyMyAdmin tool from your hosting panel or use a plugin for this purpose. Learn more on how to search replace text in WordPress database.

5. Use Plugin to Fix Mixed Content Warnings

There are multiple plugins available to check how WordPress detects https and force if any URLs are not using secured protocol. SG Optimizer plugin is one of the simplest plugins you can use to fix mixed content warnings. After installing and activating the plugin, go to “SG Optimizer > Environment” section and turn on “Fix Insecure Content” option. The plugin will dynamically replace https to https in the requests sent from your site and avoid loading of insecure content.

Remember, SG Optimizer plugin comes preinstalled on all SiteGround WordPress installations. However, this is a free plugin available for all users. If you are not using SiteGround, you can install the plugin from admin panel like any other plugin by navigating to “Plugins > Add New” menu.

Note: Under “SG Optimizer > Environment “ section, you can also enable “HTTPS Enforce” to force HTTPS. This will replace all insecure links in your database and add htaccess directive as explained in section 2 above to force secured connection.

Final Words

Remember, free localhost setup like MAMP does not use https:// and you will see warning in admin panel about that. For example, plugins like WooCommerce will warn you that the site is not using secured connection and deactivate transaction features. You can use premium MAMP version or try another setup like Local from Flywheel. For live websites, fixing site address, CDN and forcing HTTPS will solve the issue. If mixed content issue dynamically comes from third-party ad scripts, then you can’t fix the issue completely unless the source script is changed to https://. Forcing HTTPS on your site will block such scripts and show console error though you will see secured padlock icon in browser’s address bar.

How to Fix Mixed Content Warning in WordPress?