Today’s internet users are security-conscious. By installing a Secure Sockets Layer (SSL) certificate and migrating from HTTP to HTTPS, you can prevent data theft and encourage even the most cautious of visitors to trust your website. However, you may encounter a number of errors when doing so, including a mixed content warning.
Fortunately, there are several ways to resolve this error without rolling back those all-important SSL and HTTPS changes. By following a few simple techniques, you can continue providing your visitors with the highest level of security, with zero errors.
In this article, we’ll cover everything you need to know about the mixed content warning. We’ll look at what it is and how to check whether it’s currently affecting your WordPress website. We’ll then share five ways to resolve it. Let’s get started!
An Introduction to the Mixed Content Warning in WordPress
You may encounter a mixed content error after installing a Secure Socket Layer (SSL) certificate on your website. An SSL certificate can help protect your site and your visitors from malicious third parties by encrypting sensitive data and user activity.
SSL certificates are important from a legal perspective, especially if your site processes payments. They can also make your site appear more trustworthy, as many modern browsers use a padlock icon to indicate that a website has this important security measure in place:
After installing an SSL certificate, your site will be requested over Hyper Text Transfer Protocol Secure (HTTPS) instead of Hyper Text Transfer Protocol (HTTP). However, if your SSL certificate is configured incorrectly, some of your content may still be served over HTTP.
For example, your https://www.example.com page may include an image that is still being loaded via http://www.example.com/image.png. In this scenario, you’ll encounter a mixed content warning.
A mixed content error can manifest in several ways. It’s possible that the padlock icon may fail to appear in the visitor’s web browser. Alternatively, the address bar may display a warning i icon, or a broken padlock. It’s also possible that the insecure content will be blocked, potentially resulting in strange gaps in your website’s pages.
All of these outcomes will have a negative impact on your site’s User Experience (UX). If you suspect your site is experiencing a mixed content error, it’s vital that you resolve it as quickly as possible.
How to Check Your WordPress Website for a Mixed Content Warning
You can check whether your site is suffering from a mixed content error using your browser’s Inspect Element console. In most modern web browsers, you can launch the Inspect Element console by navigating to the webpage that you want to test, then right-clicking or Control-clicking anywhere on the page, and selecting Inspect:
In the Inspect Element console, select the Console tab. The console will now display information about any issues it’s identified within this particular webpage:
Alternatively, you can test your website using Why No Padlock. This online tool scans your site and then creates a report containing information about your SSL certificate and resources:
Why No Padlock will also list any mixed content errors it identifies.
How to Fix the WordPress Mixed Content Warning (5 Key Tips)
Mixed content warnings can make your site appear less trustworthy. They can also damage its UX by blocking important content. If you’ve verified that your site is experiencing mixed content errors, here are five ways to fix your SSL and HTTP settings.
1. Verify That You’re Using a Valid SSL Certificate
First, it’s a good idea to check that your SSL certificate is installed correctly and hasn’t expired. You can view information about your SSL certificate by navigating to your website and then clicking on the little padlock icon in your browser’s address bar. Hopefully, you’ll see a message reading Certificate (valid):
Even if your certificate is valid, it’s still worth digging a little deeper. Click on Certificate in this information window you opened in your browser. The subsequent popup will display your certificate’s expiration date. If your certificate is out-of-date, this is likely the cause of your mixed content warning:
We also recommend checking that the domain in this popup matches the URL displayed in your browser’s address bar. If there are any inconsistencies, you should be able to resolve the problem by reconfiguring your SSL certificate to use the correct URL.
If your web host installed your certificate for you, you can contact support for help with this.
2. Check Your WordPress Internal URLs
If you’re using a valid SSL certificate, it’s possible the integration isn’t properly configured for HTTPS encryption. You can switch your internal URLs from HTTP to HTTPS via your WordPress dashboard.
To make sure you don’t lose any important data, we recommend backing up your WordPress database before changing any of your URLs. After creating your backup, navigate to Settings > General. Here, you’ll find the WordPress Address and Site Address settings:
Change both of these URLs from HTTP to HTTPS, then click on Save Changes. Now, every URL across your WordPress website should be served over HTTPS. If you’re using the popular Elementor page builder, you may also need to update your site’s URL in your Elementor settings.
3. Implement HTTPS Redirects
Even after updating your site to HTTPS, it’s possible that some people may still encounter HTTP content. In particular, someone who accesses your site via an HTTP link on a third-party site may be served your content over HTTP.
To resolve this issue, you can implement a redirect that automatically sends visitors to the secured, HTTPS version of your content. The WP Encryption plugin is a popular way to accomplish this.
Once it’s installed and activated on your site, you can implement a redirect by navigating to WP Encryption > Force HTTPS:
You can then choose to either Force SSL via HTACCESS or Force SSL via WordPress. Force SSL via HTACCESS is recommended, as it’s faster. However, if you encounter any errors with this solution, you can switch to Force SSL via WordPress.
4. Perform a Search and Replace
If you’re still encountering mixed content errors, you may want to perform a search and replace. This is where you scan your WordPress database for any instances of HTTP, and replace them with their HTTPS counterparts. To make sure you don’t lose any important data, we recommend creating a backup of your database before proceeding.
There are several ways to perform a search and replace in WordPress. The easiest is to use the popular Better Search Replace plugin. Once it’s installed and activated on your WordPress site, navigate to Tools > Better Search Replace.
In the Search field, enter the HTTP version of your domain. In Replace, enter the HTTPS version:
Select all the tables of your WordPress database. You can then choose whether to perform a test run by selecting Run as dry. Alternatively, you can automatically replace all detected HTTP URLs.
When you’re ready to proceed, click on Run search/replace. Better Search Replace will then scan your site and identify any insecure URLs. If you’re performing a dry run, you’ll have the option to review the results before replacing them with HTTPS.
5. Clear the Cache
If you’ve made the above changes and are still encountering mixed content errors, your browser cache may be to blame. You may get positive results by clearing your browsing data. This process will vary depending on your preferred web browser.
For example, Chrome users can clear their cache by clicking on the three-dotted icon in the upper-right corner of the window:
You can then select More Tools > Clear Browsing Data… In the subsequent popup, choose the cached content that you want to delete, and specify the timescale.
If you’re using a WordPress caching plugin, you may also benefit from clearing the plugin cache. This process may vary depending on your chosen caching plugin. However, it typically involves accessing its settings in your WordPress dashboard. You should be able to find a Clear Cache or Delete Cache button.
Conclusion
When it comes to running a secure website, HTTPS and an SSL certificate are must-haves. However, if implemented incorrectly, these security measures can result in mixed content warnings across your WordPress website.
If you suspect your SSL certificate is causing issues with your site, we recommend the following fixes:
- Verify that you’re using a valid SSL certificate.
- Check your internal URLs.
- Implement HTTPS redirects.
- Perform a search and replace.
- Clear the cache.
Do you have any questions about identifying and fixing WordPress’ mixed content warning? Let us know in the comments section below!
