WordPress Mixed Content Warning: 4 Easy Ways to Fix

If you are seeing the mixed content warning on your WordPress website, do not be alarmed. It is a common warning that can occur on any website even though you have an SSL (Secure Socket Layer) certificate installed.

The mixed content warning does not prevent your website from displaying content on a page. However, you need to resolve it as soon as you start seeing the warning because it can negatively impact your sites’ SEO ranking.

Luckily, resolving the warning is fairly straightforward. In this guide, we will show you 4 ways you can easily fix mixed content issues on your WordPress site.

Content:

What is Mixed Content?
Common Causes of Mixed Content in WordPress
How to Find Mixed Content Warnings
How to Easily Fix WordPress Mixed Content Issue
Conclusion

What is Mixed Content?

Mixed content is a warning that occurs when resources or links on your website are running on both HTTP and HTTPS connections.

If your WordPress site has an SSL certificate, you will notice a padlock icon next to your websites’ address bar on the browser. When you click on the padlock, you will find a ‘Connection is secure’ notification on your browser.

The secure SSL padlock indicates that connections to the site are safe, which means attackers cannot access any information users provide on your website such as passwords or credit card information.

However, if some of your site URLs are loaded using an insecure HTTP link, it means there are mixed contents on your page. This will result in no padlock or a broken padlock icon on your browser, and a notification that connections to the site are not fully secure.

This can be an issue because search engines such as Google require that all sites use HTTPS to transport content. If Google detects that some content on your site uses HTTP connections, it can negatively impact your sites’ SEO.

In addition, if you are running an online store and a mixed content warning shows up, your users will find it difficult to provide their credit card details on your site.

Common Causes of Mixed Content in WordPress

Mixed content error in WordPress occurs when moving your website from HTTP to HTTPS. Some of the resources on your website may retain their HTTP links even after you successfully installed SSL on your site.

Secondly, mixed content warnings may be caused by the static files on your website such as media files or javascript files. If you are using an absolute URL to link to your website files, then you may also encounter mixed content warnings on your site.

In addition, the absolute path may also be caused by a plugin you installed on your WordPress site.

Lastly, a mixed content warning might occur if you are hardcoding the URLs to images on your pages or widgets using HTTP connections in the URL (eg http://yoursite.com/photo.jpg).

How to Find Mixed Content Warnings

Earlier we mentioned that seeing an open padlock or no padlock icon beside your site address indicates mixed content error warnings. However, locating the links or resources that are causing the error can be a bit tricky.

Luckily, there are different ways you can find them on your browser. Here, we will share two easy ways to locate the files or links with mixed content on WordPress sites.

The first method is utilizing the developer menu in your browser. If you are using Google Chrome browser, you can use chrome devtools to see all the mixed content errors in your site. Here is how to do it.

On the page with the broken padlock icon, simply right-click and select ‘Inspect’ to open the developer tools.

Now, click on the console tab. You will find all the errors and warnings occurring when you load the web page.
After that, locate the errors with mixed content title and then check for the link to the resources that are using HTTP connection.

Alternatively, you can use an online tool such as Why no Padlock? to check for mixed content warnings on your website.

To do this, go to their website using the link above.

When there, enter your site address in the box and then click on Test Page.

If there are no mixed content warnings on your site, you will see a result similar to the one in the image below.

However, if some content on your website is using HTTP connections, then you will see a mixed content warning with the links to the resources causing the error as seen below.

How to Easily Fix WordPress Mixed Content Issue

Knowing the files/links that are causing the mixed content error on your site is the most important step in troubleshooting the warning. Also, we are assuming you already have a valid SSL certificate installed on your website.

Side Note: If your WordPress hosting comes with a free SSL certificate, then you can use the ‘Really Simple SSL’ plugin to force WordPress to use SSL on your website.

However if your hosting does not provide an SSL certificate, you can get it for free from Let’s Encrypt. Also, CDNs such as Cloudflare provide free SSL for their users.

With that out of the way, here are the steps to fix the error.

Using SSL Insecure Content Fixer

One easy way you can fix mixed content warnings on your site is using the SSL Insecure Content Fixer Plugin. The plugin helps in resolving insecure links or files on WordPress sites.

It has different levels of action from which you can choose. The default is the Simple level.

With the simple level, the plugin will go through your site and check for mixed content errors in your stylesheets, scripts, and images.

If there are mixed contents, it will resolve the issue. However, if you hardcoded the URL to an image on your posts or pages, the simple level may not resolve it on your site.

For this, you will need to try out a higher level of fixing. Below are other levels that come with the SSL Insecure Content Fixer.

Content: This level, in addition to all the features you get with the simple level, will further scan through your posts and pages to find insecure content. Also, it will go through the resources available in your text widgets.

Widgets: With this level, you get all the functionalities in the simple and content levels mentioned above. In addition, it will scan through all the widgets available on your WordPress site. If there are insecure contents on any of your widgets, the plugin will resolve it.

Capture: This level goes through all the content on your page. From the header, to the page content, and then the footer. It performs a thorough check and fixes any entry of insecure content on your site.

Capture All: Includes all the functionalities in all the levels mentioned above. In addition, it will go through AJAX (Asynchronous JavaScript and XML) calls on your website. However, this can affect your site performance.

How to Use SSL Insecure Content Fixer

To get started, install and activate the plugin on your WordPress admin dashboard. After that, Go to Settings > SSL Insecure Content.

Now, select the level you wish to apply on your site.

Then scroll down and click on the Save Changes button.

Side Note: As you go higher with the level of the fix, the impact on your site grows as well. This means, when you select the Capture All level, it may affect your site speed.

Therefore, it is best to begin with the Simple level, then walk your way up to the advanced levels if the previous level does not completely fix the warning on your website.

Test and Replace HTTP files

Is a hard coded image or script is the cause of mixed content warning on your WordPress site? Then an easy way to fix it is to change your URLs from HTTP to the secure HTTPS version.

You can manually replace the files by editing your theme files directly. However, some plugins like ‘Better Search Replace’ or ‘Elementor Page Builder’ can make this process really easy.

It is recommended to backup your site and database before proceeding.

Using Better Search Replace

This plugin lets you update your database tables directly using the search and replace feature.

Thus, you can search for all entries with the non secure http protocol, and replace them with the secure https protocol.

To start, you need to install and activate the Better Search Replace plugin on your WordPress site. Please read this guide, to learn how to install WordPress plugins.

After activating the plugin, go to Tools > Better Search Replace and then click on the Search/Replace tab.

Now, enter your website address in the ‘Search for’ textbox using the HTTP format (eg http://yoursite.com).

In the ‘Replace with’ textbox, type your site address using the secure HTTPs format (https://yoursite.com).

Next, select the database table(s) on which you want to run the search/replace. This should be the wp_options, wp_posts, wp_terms, wp_term_relationships and wp_term_taxonomy tables.

To select multiple tables, hold the ‘ctrl’ key and then click on the table name.

You can enable the Dry run option. When enabled, it will show you how the changes you make will affect your database before committing the changes.

Finally, click on the Run Search/Replace button.

Using Elementor Page Builder

The Elementor plugin enables you to build a WordPress site using its drag and drop features. However, it also has a feature that lets you find and replace insecure links on your website.

You should ideally use this option if you already have Elementor installed. If not, use the Search and Replace plugin above.

In your dashboard, go to Elementor > Tools and then click on the Replace URL tab.

Now, enter your website with the HTTP format in the old URL textbox. Then enter the secure HTTPS version of your site in the new URL textbox.

Afterward, click on Replace URL.

If using any of the plugins above fixes mixed content warnings on your WordPress site, great. However, if you are still seeing them, it is likely a hardcoded script/image is the cause. For this, you will need to manually replace the links on your theme files.

Manually Replacing HTTP Files

Sometimes, when you load a script from an external link, using the find and replace feature in the plugins above does not replace the script URL. In such cases, you can manually replace the insecure link in your theme files.

Firstly, go to Appearance > Theme Editor and select the header template.

Now, type CTRL+F to open the search box and paste the link that is causing the mixed content warning on your website.

Once you locate the line of code, replace it with the secure version of the link (i.e. change http:// to https://).

Also, if you are using an absolute path to link to an image or stylesheet on your website, you can modify the link to use a relative path.

For example, if you have an image with the following path ‘http://yoursite.com/images/logo.png’, you can replace it with ‘/images/logo.png’ as seen in the image below.

When done, click on the Update File.

Modifying .htaccess File

Sometimes when you move your site to a new server, or you just installed an SSL certificate on your server, some of the links and files would still retain the old insecure URL.

This can easily be resolved by redirecting all requests from an insecure port to a secure HTTPS port. This can be set up in the .htaccess file on your server.

To start, connect to your site with an FTP client. Check this guide to learn how to use FTP.

After connecting your site to FileZilla FTP, double click on the directory containing your site files.

On the directory, double click on the .htaccess file to download a backup of the file.

Now, right-click on the file and then select view/edit.

Open the file with a text editor and then remove all the content on the file.

We will rewrite the entire file using a new rule that will redirect any traffic that is not from a secure port (in this case, port 443).

Paste the code below on the file.
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{SERVER_PORT} !^443$ RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>

# END WordPress

Save the file and then re-upload it to your server.

The code above forces SSL on your site by redirecting all requests from an insecure URL on your webserver.

Using CDN to Fix Mixed Content

Content Delivery Networks such as Cloudflare are useful in terms of speeding up your site and protecting against SQL injections.

In addition, like we mentioned above, most CDNs offer free SSL certificates to their users. For Cloudflare users, these settings can be configured under the SSL/TLS tab on your Cloudflare dashboard.

Cloudflare also has a setting that can automatically rewrite mixed content on your website. This means, if a file or image is using Insecure HTTP connections, it will be converted to secure HTTPS connections before the page is displayed to the user.

To activate this feature on your Cloudflare account, under the SSL/TLS section, click on the Edge Certificates tab.

Now, scroll down and locate the ‘Automatic HTTPs Rewrites’ section and then toggle the switch to turn on this feature.

And that’s it. Your mixed content issue should be fixed.

Conclusion – WordPress Mixed Content

Running your website via HTTPS helps protect your WordPress site and user data. However, your site may sometimes encounter mixed content warnings.

These warnings are generally bad for your site because users tend to lose trust in sites that are not fully secured. Luckily, in this guide, we have shown you how to easily fix mixed content warnings in WordPress.

However, if you are still having this issue after following the steps in this guide, then you may reach out to us, so our WordPress Experts can fix it for you.