You just created a new WordPress website. Added some articles and images. Included all the right SEO keywords and tags. Made your site as fast as possible. Installed SSL certificate. Done all the right things to make your site great for visitors and Google. But just noticed something worrying in the browser window – connection is not secure.
Yes, that’s annoying. It still needs to be figured out. But actually it’s not that bad if the warning tells you there is some mixed content in your WordPress site. Here’s what you need to know so you could fix it yourself:
- What causes mixed content error in WordPress
- How to identify what exactly causes WordPress mixed content error
- How to fix mixed content error using free WordPress plugin
- How to fix mixed content issue manually if WordPress plugins don’t solve the issue for you
Let’s start from the first step – the theory.
What causes mixed content error in WordPress
Mixed content error is not related directly with WordPress. This error may show up in every website when you try to load it via HTTPS. And it does not need to occur in every single page of the website. In some situations this error might be shown just in a single page of a site.
This warning shows up when server is trying to load all website elements via HTTPS, but some sources still show up in the source code with http. If your website has a valid SSL certificate, and server loads it using HTTPS, then all of the images, iframe sources and other elements in your website must be using HTTPS too.
The most common reason of mixed content is background images. If your WordPress theme’s style.css file (or custom css plugin) has an element with url that starts like http://your.site/file.jpg, that http will cause Mixed content error in any browser.
How to identify what exactly causes WordPress mixed content error
Almost any modern desktop browser can help you identify exact causes of mixed content in your website.
If you’re in Google Chrome, hit right click anywhere in the site that shows the error, and select Inspect. Console window will show up on the right side of the screen. Look for yellow exclamation mark in it.
Click the yellow triangle, and browser will list all the things that are not right in the current page:
As you see in the example, image is loaded using http:// instead of https:// . And that’s quite common reason why you see this kind of error in a site.
How to fix mixed content error using free WordPress plugin
The easiest way to fix mixed content warning in WordPress is to use a clever plugin that runs through almost all of the website and automatically replaces http to https in it’s content.
In order to do that go to WordPress admin panel and select Plugins >> Add new in it’s menu. Enter really simple ssl to search field at the top right of the page.
Install and activate Really Simple SSL plugin.
If the plugin will detect a valid SSL certificate for your site, click Go ahead, activate SSL! button.
Most of the time that’s enough to get rid of Mixed content warning – the plugin rewrites all the relevant http urls to https, and the warning disappears automatically.
If you still see the error in the browser, try to click CTRL + F5 a few times to clear web browser cache. If that does not help either, you need to check for http sources manually.
How to fix mixed content warning in WordPress manually
Really Simple SSL plugin is smart but even it may not be able to convert all the needed links to https automatically.
What you need to do in this situation is to go to Appearance >> Theme Editor in admin menu, and open style.css file. Look for URLs with http://… , and replace them with https://… Ideally all the images in the style.css file should be loaded from your WordPress directory, so there should not be any problems loading this content via https.
You may also check any plugin settings which may have http (without s) urls – sliders, custom CSS, custom javascript modules etc.
Once you’ll get rid of all the http content in your site, you’ll also get rid of mixed content warning too.
