Switching WordPress to HTTPS? This can lead to so-called mixed content errors. Browsers like Google Chrome will label your website as not secure or block it completely. We show you several ways to fix mixed content errors with WordPress.
A mixed content error always occurs when HTTP resources are loaded on your site or a subpage, even though the website should actually only be accessible under HTTPS.
Recognizing mixed content errors
Your visitors' browsers will then display the site as "not secure". You can also quickly check when you possibly you have a problem with mixed content by calling up your site:
I say "possibly" because other errors can also be the cause of the "not secure" message. I'll get to a more detailed analysis in a moment.
A mixed content error is unsettling and many visitors will leave your site as a result of seeing it. Google is increasingly blocking the delivery of mixed content websites via its Chrome browser. Users do have the option to manually reload the blocked content. But the trust has already been damaged by that point.
Causes for mixed content in WordPress
Have you already converted your website to SSL or HTTPS but individual elements are still loaded from HTTP sources? There could be a number of reasons behind this:
- Embedded fonts, for example Google Fonts
- Other external services and snippets
- Images and videos on your WordPress site that still point to the HTTP address instead of HTTPS
The sources are also correspondingly diverse:
- Plugins for WordPress and WooCommerce
- WordPress themes
- Included in the source code on your pages and posts or in Gutenberg
- Old or incorrect links
- Social media connections
- Tracking tools
Plugins and themes can lead to mixed content errors, especially if they're outdated or no longer being developed. Generally speaking, you should check after converting your site, blog or online shop to HTTPS whether and which subpages are affected by mixed content.
Find mixed content
With a browser, you can quickly identify what's causing the mixed content. This is how you proceed in Google Chrome and it's also pretty similar in other browsers:
- Right-click on any area of your site that you want to examine. Then select the "Inspect" option.
- Switch to the "Security" tab in the tools. Under "Resources", you can see at a glance whether there are mixed content errors.
- The console lists the exact sources of the incorrect insertion.
Here's a quick example of what the analysis looks like in Chrome's console:
You can now fix the error messages step by step by replacing the HTTP elements with the respective HTTPS variants. Or by removing the cause entirely, e.g. a certain widget or plugin.
Have mixed content errors corrected
You may need to adapt your WordPress theme and the CSS files to some extent. And what if you have no technical WordPress knowledge? In that case, you have the following options:
- Hire your agency or a web designer
- Contact the theme developer and ask them to fix the errors – or to provide you with the corresponding instructions.
- You use the WordPress plugin Realtime-Find-Replace
One important point to remember with the plugin option is that it only masks the problem. For the future security of your site, and also to not create unnecessary ballast in WordPress, you should replace the HTTP links completely with HTTPS links.
Tip: Do you want to edit your theme yourself? Make sure to use a child theme. Check out our tutorial Child theme for WordPress for more tips and insights.
Using search and replace
Does your WordPress database still contain many internal links that point to an HTTP address? Then you can change them en masse or automatically to HTTPS via search and replace. We recommend the plugin Better Search Replace for this because of the following advantages:
- The tables in which you want to search and replace can be selected individually if required
- It has a test run function that's very useful to check in advance how many fields will be changed and whether you've perhaps designed the search query incorrectly or too comprehensively.
- Support for serialized arrays and objects for all tables
- Supports WordPress Multisites
An even more detailed evaluation of the effects of search and replace is only available in the paid Pro version. But even so, the tool provides practical help.
Mixed content WordPress plugin
You want to fix the errors quickly, but can't do it yourself? And you don't have an agency or freelancer at hand? There are also WordPress plugins that'll do at least some of the work for you. For example, the SSL Insecure Content Fixer.
Even in the default settings, the tool fixes central mixed content errors:
- Scripts that are based on
- Stylesheets based on
- Images and similar files, including
- Data returned by
wp_upload_dir()e.g. for captchas
Other errors in the content - for example from themes, plugins or from widgets - can also be fixed. The adjustments are made in a step-by-step model:
However, the developers point out that the cleanup via plugin can have a negative impact on the performance of your WordPress installation. You can read more about how the Insecure Content Fixer works here.
Mixed content and caching
As mentioned already, a permanent manual cleanup of mixed content errors makes more sense than using a plugin. Because additional plugins and calls generate additional calls. Not to mention that plugins can be an additional gateway for hacker attacks.
René Dasbeck explains how you can clean up mixed content in the context of a database migration in his tutorial WordPress Solving Mixed Content Problems. Do you use a plugin for caching? René points out that you should empty an existing cache before cleaning it up. Because old entries with unsafe requests can also be hiding in the cache.
Do you have questions about mixed content? Feel free to use the comment function. Do you want to hear about the latest articles on WordPress? Follow us on Twitter, Facebook or sign up to our newsletter.
Contributing photo: Markus Winkler