Mixed Content Error Quick Answer Section
What is mixed content error in WordPress?
Mixed content error occurs sometimes after installing and activating SSL encryption on a site. This issue isn’t therefore WordPress-specific but rather related to the way the CMS and/or themes and plugins handle the https rewrite rules.
What is the cause of mix content error?
Mixed content error is caused by errors in the process of rewriting URLs, after a SSL was installed on the site, or in the process of loading resources. There might be different reasons, why some URLs didn’t get rewritten or loaded correctly, including plugin incompatibility and the way plugins and themes load assets and handle URLs.
Is there a way to avoid mixed content errors?
No. When working in WordPress, you are usually dependent on multiple plugins and a theme that aren’t developed or controlled by you. Thus, you cannot be certain how a theme or plugins function or how they affect each other’ processes. It is therefore impossible to make 100% sure that no mixed content errors will occur, as long as you don’t test the setup before going live.
You should though follow the steps, described in this post, to correctly rewrite URLs after installing SSL in order to avoid unnecessary mixed content errors.
How can I detect mixed content errors?
Classic signs of mixed content errors are missing images or video on your pages, as well as missing or corrupted design elements or functionality.
Even though it’s almost certain that issues, occurring right after installing SSL, are caused by it, there is no guarantee. You should therefore check, what the cause is. You can inspect your pages with Chrome Developers to diagnose errors (the process is described in depth in the post).
How can I fix mixed content errors?
You can fix mixed content errors by combining the following methods: rewriting affected URLs (recommended option for WordPress users is to use a plugin) and reloading assets, if the plugin fix isn’t enough. Read the relevant section in the post for details.
Is the mixed content error permanent?
No, once you have fixed the error, you won’t experience any new or persisting issues, connected to it. As the error is purely caused by wrong rewriting and handling of URLs, no resources will be affected in any way. As soon as the URL is rewritten or loaded correctly, the error will disappear.
I am not using SSL on my site. Can I get mixed content error anyway?
Yes. As long as you use CDN, you can still experience mixed content issues. The reason is that CDNs use HTTPS by default. As long as you don’t know how to work with their settings and don’t have SSL on your site, errors can occur in the CDN’s output due to the fact that resources from your site aren’t loaded correctly. The most common symptom of mixed content issues in this case are missing images from your pages.
Migrating from HTTP to HTTPS is certainly an item for your must-do SEO list for 2018, as Google has warned that starting July 2018 all HTTP pages will be marked as insecure, regardless of whether they are used to collect sensitive data or not. This is expected to hit hard web traffic to sites that aren’t using SSL. Therefore, making the switch from HTTP to HTTPS is no longer optional.
Installing SSL on a WordPress site is usually quick and easy and doesn’t cause any issues. However, every now and then, and particularly if your setup is more complicated, e.g. includes many plugins, integrations or a CDN, you can experience the so-called mixed content error.
What is Mixed Content Error?
When you install SSL on your site, you must rewrite all of the site’s permalinks to use HTTPS instead of HTTP. You can do that either by applying manual 301 redirects or by using a plugin, such as Really Simple SSL that handles the redirects for you. No matter which method you choose, it’s recommended that you implement the 301 redirects via the .htaccess file on the server. Really Simple SSL allows only for internal redirects within WordPress in its free version but offers the option to use .htaccess instead in the pro version. You can securely use the internal redirect and only consider to use an alternative solution, as long as you experience issues. That doesn’t happen often though.
The redirects are necessary, as, when installing SSL, the site content gets practically moved to the secure HTTPS. However, an insecure HTTP version of pages and resources is still available and could be served to site visitors and bots. By redirecting all HTTP pages, you achieve two important goals: you send all traffic to the new secure pages and you let link juice flow over to the secure version of the website.
Most of the time, this is end of the story: you install SSL, redirect site-wide, complete the maintenance tasks, such as registering with Google Search Console, and enjoy the results. Once in a while though, something goes wrong. This means that most of your pages and resources move successfully over to HTTPS but a small portion of primarily resources doesn’t migrate. Alternatively, the resources migrate successfully but get loaded via HTTP on the site’s pages. These are examples of mixed content errors.
A mixed content error results in various issues, primarily in the front end. An example could be a malfunction somewhere on the site or inability to load and display media files.
How to Diagnose Mixed Content Error?
Even though an error occurs right after switching to HTTPS, you can’t be sure that it is a mixed content error. In order to pinpoint the cause, you should perform simple health analysis of your site. To do that, you can use freely available tools as Chrome DevTools->Console.
Follow these steps to determine the cause of an error:
- Open a page with an error in Google Chrome browser
- Right-click anywhere on the page and choose Inspect (last option on the list)
- To the right of the screen, a tab opens displaying a lot of code that refers to the page’s elements and styles.
- Take a look at the top of the tab. There, you should be able to see the Console tab. Click on it.
- If there are any errors on the page, they’ll be listed under Console. As long as your site is hit by a mixed content error, you’ll see a message, similar to the screenshot below, borrowed from Google Developers.
As long as there are more than one errors on the page, caused by mixed content and/or other configuration or code issues, you’ll see a list of all such errors under Console. You cannot resolve any errors from within the Console but you can get a pretty good idea about, what kind of bugs you are dealing with. You do not need to note down the URLs with errors, as they are most likely many and on most of your pages. Therefore, here we’ll discuss a bulk fix that will remove all mixed content errors at once.
Resolving Mixed Content Errors in WordPress
Whenever possible, I’d recommend to avoid using plugins to solve issues in WordPress, as plugins aren’t problem-free and can cause plugin incompatibility, as well as present a security risk.
In the case of mixed content errors, you can always try to manually resolve the issue by reloading resources, such as images and media. In practice, this means that you should remove them from your pages to only insert them again. This simple action solves most media-related issues.
However, if your site consists of hundreds of pages and you don’t have the time to check them all, or if the mixed content issue has affected core, theme or plugin files, it might not be that easy to reload all affected resources or be sure to discover them all. Therefore, the best way to deal with mixed content is to fix it with a plugin.
There are many different plugins that can do the job. In some cases, it might even make sense to use a combination of plugins. Here, I’ll present you with two plugins that I have tested and found to work perfectly well (free versions used).
Better Search Replace
If you experience troubles with media files that get loaded over HTTP, you can fix the mixed content issue by using a search and replace plugin, such as Better Search Replace. All you need to do, is to follow these steps:
- Back up your database! You do that by logging onto the server, navigating to phpMyAdmin, selecting the database and clicking on Export. You can use the exported file to restore the database, if something goes wrong.
- Navigate to Plugins->Add New in WordPress
- Search for Better Search Replace
- Install the plugin
- Activate it
- Go to the plugin screen (Tools->Better Search Replace) and enter your site’s URL with HTTP in the search field and the site’s URL with HTTPS in the replace filed, all else equal. Enter only the domain, that is, http://www.mydomain.com, without a slash at the end and without including specific directory or page names.
- Select all lines in the grey box. These are your database’s tables.
- Check Case-insensitive and uncheck the rest of the options, as shown in the screenshot.
- Run Search/Replace
- Do not close the tab or navigate away from the page, before the operation is completed!
When rewriting your URLs this way, you’ll rewrite all of your site’s URLs, meaning that everything on your site should go over to HTTPS. If you want only a part of the site to support SSL, you must only run search/replace for specific URLs.
If this doesn’t solve the issue, this means that you are probably dealing with a deeper error, connected to the way your theme or plugins handle own or added resources. In such cases, you should use another plugin, SSL Insecure Content Fixer.
SSL Insecure Content Fixer
When mixed content error is caused by the way your theme or plugins handle resources, a plugin that surely will help you is SSL Insecure Content Fixer. This free plugin is great, as it fixes most mixed content errors automatically. All you need to do, is find the plugin from within your WordPress dashboard, as described above, install it, and activate it.
Clear your browser cache and reload the page to see, whether the insecure content issue is resolved. If not, the plugin offers 5 higher-tier fixes, allowing you to fine-tune the fix, as well as extensive learning resources to help you on the way.
In addition, the plugin helps you deal with one of the most common HTTPS challenges that reverse proxies and load balancers can be. Using reverse proxy or a load balancer makes it difficult or impossible for WordPress to detect HTTPS, resulting in mixed content errors. The plugin helps you detect the recommended settings for your site and deal with the way WordPress detects and handles HTTPS.
That’s it – the mixed content issue should be gone now!
If you’re still experiencing troubles and can’t figure it out, don’t hesitate to contact us at firstname.lastname@example.org – we’ll be happy to help!