Are you getting mixed content warnings after migrating your WordPress website from HTTP to HTTPS? In this post, I'll share with you three things that I did to fix 95% of the mixed content warnings I received for Magnet4Blogging.
A few months ago, I made the decision to migrate Magnet4Blogging.net from HTTP, to the more secure SSL protocol, HTTPS.
As most of you will probably know, Google has been pushing for HTTP serving websites to migrate over to HTTPS for some time.
And, with the latest Chrome updates and its enhanced features to alert users about unsecured content, it's now more important than ever to make sure your visitors aren't put off by potentially seeing your website as 'unsafe'.
Also, Back in 2014, you may remember that Google released something called the HTTPS Ranking Boost.
If you made your website HTTPS then, you would have probably gotten a small boost in search engine rankings.
For me, the process of switching my website over to HTTPS was simple enough to do. The web host provider that I use and recommend, SiteGround, now offers the Lets Encrypt option to all its customers.
Let's Encrypt is a free, automated service designed to help website owners easily transition from HTTP to HTTPS. It's now just a matter of flipping a switch via your web host.
Wow, is it really that simple to do?
Err, no - it's actually just the start because after you've made the switch using Let's Encrypt, you'll need to do a few other essential things to have HTTPS working properly on all the pages of your WordPress site.
Sadly, it isn't just a case of flipping a switch and 'Hey Presto!' everything will work seamlessly for your site.
One of the problems I faced after migrating over to HTTPS was dealing with Mixed Content Warning Signals.
A mixed content warning comes when your website is being served over the secure HTTPS protocol, as it should be, but your images, videos, scripts, and various other resources, however, are still being served over the insecure HTTP protocol.
If you are viewing your website, or a page on your website, using Google Chrome after migrating to HTTPS, for instance, you may sometimes see a warning appear in the URL nav bar.
The bar will go from Green to Grey with the letter 'i' inside a small circle.
Or, the page may simply just go straight to grey upon loading. See image below.
As I mentioned earlier, this could potentially put off some of your visitors. What you actually want to see is a nice Green secure bar consistently for all the pages in your WordPress site, like the one below.
Various types of content/media can signal a mixed content warning. Here are some examples -
Whilst I've worked hard to successfully fix most of the content on my own website to avoid seeing these warnings, however, I'm still seeing them very occasionally, even now.
This is frustrating, because sometimes it's something that I'm able to fix quite easily, whilst other times it's not a simple fix.
For instance, the problem could be web browser related, or, an extension installed in my web browser or something else entirely.
I've also seen warnings with regards to requests being made from my website to load hidden images hosted externally over HTTP.
If you are you seeing mixed content warnings for your site after migrating to HTTPs, keep reading.
OK, so here are three essential things that I did that helped me fix and resolve 95% of the mixed content warnings I received for Magnet4Blogging.
The first thing that I did was install an amazing plugin called SSL Insecure Content Fixer. You can find this plugin here.
When it comes to using the right fix level settings with this plugin, you have several options for your site. I used the Simple Fix Level for Magnet4Blogging.
In addition, I also used the built-in SSL testing tool that comes with the plugin.
Using it will help you check to see if WordPress can detect HTTPS on your site. It never hurts to check, right?
You can learn more about the various settings options in this plugin, here.
The next thing that I did, was to check each and every blog post and static page, one by one, to see if any of them were generating mixed content warning signals.
I use the Chrome web browser 90% of the time because I love using the Developer Tools Console in Chrome.
If you are new to all of this, to inspect a web page using the Developer Console in Google Chrome, all you do is simply go to View > Developer > Developer Tools.
The warnings usually appear on the top right-hand side of the screen in the Console. See image below.
So for me, if I clicked on the warning symbol in the console, I could scroll down to read more about the mixed content warning and maybe see what could be causing it even.
If it was a URL to an image, or a video, or script, or maybe a resource hosted on the page itself, I could simply log into my WordPress site, find the post or page and begin fixing things manually.
To save a whole lot of time, I would copy the entire text version of the post, paste it into a code/text editor app, then find all HTTP and replace with HTTPS.
I used my favorite coding app 'Atom' for this.
Warning: If you're going to manually find and replace all your HTTP's to HTTPS's for 'external links and resources', please first check to ensure that the page or resource is available over HTTPS. You can do this by copying and pasting the URL into a new browser tab and adding 's' at the end of HTTP. If the page or resource is NOT available over HTTPS, consider removing it entirely if possible.
So for my website, if I was still seeing warnings in my Developer Console after making all the necessary fixes, I would next check the page source itself.
You can View Page Source for any web page simply by going to View > Developer > View Source in the menu. A new tab will load showing the entire HTML structure for the page.
On the page source itself, I would simply look for all the HTTP's to ensure nothing has been hard-coded into my site with HTTP protocol. You can, of course, do the same for yours.
If you can't find anything, and yet you're still receiving warnings in your Chrome Console, it could be something else entirely.
Perhaps a script in your web browser is misbehaving.
Or maybe an extension you're using is causing it - if you have any installed that is.
Or, it could be something in your site's theme that's causing you problems, or any of the plugins you have installed on your site.
Lastly, to ensure absolutely everything on my site served over HTTPS, I went through every single file and document in my custom Genesis child theme and changed every asset and resource URL from HTTP to HTTPS.
Once again, I did this by first making sure the resource was available over HTTPS before changing.
For instance, resources things like GitHub pages, or, Google Fonts using HTTP in the URL path, or, an external CSS file, etc.
Of course, modifying your WP theme files isn't something I would expect you to go and do yourself if you're not comfortable with doing so. In which case, you may want to hire a developer to help you out with this.
Sod's law, isn't it?
As I stated at the start of this post, I've pretty much gone through 95% of the content, including posts, pages, files, and documents on my website to identify and fix most of the mixed content warning signals.
However, very occasionally I'll still see warnings appear for certain pages.
Now interestingly, I've tested my site using various other computers as well, including friends and families who also Google Chrome browser.
What I discovered was that the content warnings didn't appear at all.
So again, this tells me that I could be using an extension, setting, or script in the Chrome Browser on my computer that's causing some of the warnings I'm seeing.
Bottom line is this peeps, I'm still fixing things.
Each time I occasionally land on a post or page on my website that doesn't display the green secure bar in the browser nav, I find myself fixing things.
I'll eventually start checking plugin files to see whether any assets or resources are being served over HTTP instead of HTTPS and fix those as well.
By the way, there's a great online tool that I've been using called Why No Padlock.
You simply enter your website address, or a webpage address to find what could possibly be causing insecure content warnings for your site. Check it out here.
If you are getting frustrated with the mixed content warning signals with your own WordPress website, even after your efforts to fix things, don't beat yourself up too much about it, really don't.
All you can do is keep doing what you're doing to fix and resolve things slowly.
Of course, there's plenty of other things I've not mentioned in this post that you can do to help you clean up your content. But, if you haven't even started yet, start by following my three steps above first.
Keep testing too, and hopefully, you'll have a fully secured website soon.
The best of luck.
Leave me a comment below as always.
