QUICK FIX TUTORIAL – How to Fix the Mixed Content Error in WordPress
This video gives you a short step-by-step guide to fixing the mixed content error in WordPress. We’re using Google Chrome to fix an issue on a site I built for a client with the X theme and had just installed an SSL certificate on. It’s quite common to receive this insecure mixed content error after you have installed an SSL certificate on your site. The error won’t affect the functionality of your website but it might make the user think twice about staying on your website.
As you know, SSL adds an extra layer of security to data transferred from your website to your users’ browsers and Google now marks any website without an SSL certificate as ‘Not Secure’ so it is important that you install one on your site, for SEO and user experience.
A lot of hosting providers now offer free SSL certificates but if your hosting provider does not, you can get a free SSL certificate for your WordPress website from Let’s Encrypt.
When you have a correctly installed SSL certificate on your WordPress website, this is what you should see…
The green padlock indicates that your site is fully secure. If you don’t see that and instead see this, you know there is a problem…
The error is generally caused by an element, usually an image, still being loaded over an http connection. To fix the mixed content error, you need to find the element and amend it. If you can see the grey padlock on all your pages, you can tell that the rogue element is something that is common to all pages, like the logo or something in the footer.
To find the problem file or element, using Google Chrome, go to the toolbar at the top of your screen. Select View ==> Developer ==> JavaScript Console
You’ll then see a panel on your screen that lists any errors, and from here we can see that the problem in this instance is in fact the logo image…
The easiest way to fix the error is to go into the theme settings, delete the logo image that is there and re-upload it from the media library. Check that the image in the library is https, otherwise delete it from the library and upload it again.
There is also a plugin that might help – SSL Insecure Content Fixer. It essentially does the work for you by automatically fixing the mixed content error in scripts, stylesheets and in your WordPress media library.
If you have any questions about this, you can always drop us a line in the comments box. If you found this video useful and would like to see others like it, head over to our YouTube channel.
Comments
Hi,
I spotted the file that was displaying a mixed content error.
Mixed Content: The page at ‘https://xxxxxxxxxxxxxxxxxxx.in/’ was loaded over HTTPS, but requested an insecure image ‘http://xxxxxxxxxxxxxxxxxx.in/wp-content/uploads/2018/11/Background-Digital.jpg’. This content should also be served over HTTPS.
This image is not there in the media library.
It must be…