This mixed content was my issue for several hours. I am going to keep this short and straight to the point. If your WordPress site is behind a reverse proxy server, chances are you probably have other services behind the same reverse proxy server. Otherwise, the website should have its own certificate like Letsencrypt.
Assuming that you got your reverse proxy and certificate (Letsencrypt) configured, but when you navigate to your site publicly, you’re getting the exclamation point symbol instead of the green padlock . You checked your certificate and the site is showing https.
In my case, I have three issues.
- The site logo
- The background images
- Blog comments giving out Your connection to this site is not fully secure
How did I find out the root cause of the issue?
There are two tools I used. The first one was the website Why No Padlock? and the other tool is built-in in Chrome browser called developer tool. You can also use the SSL plug-ins such as Really Simple SSL or something similar. I did not take this route because if I use this plug-in, I really didn’t fix the issue. What I did was putting a bandaid to the problem. I wanted a permanent fix.
To use the Why No Padlock website, you just simply enter your website URL and that is pretty much it. With Chrome browser developer tool, make sure you are viewing the webpage that is having an issue, the got to Chrome Setting > More Tools > Developer tools or you press CTRL + Shift + I on your keyboard. Navigate to the console tab and from here it will tell you what caused your problem.
My fix was, I had to modify the file wp-config.php
. The wp-config.php
file is located in /var/www/html/
. Before modifiying the file, make a backup of this file.
Backing up the original wp-config.php:
cp wp-config.php wp-config.php.bak
Original:
define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST']); define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST']);
Modified:
define('WP_SITEURL', 'https://'.$_SERVER['HTTP_HOST']); define('WP_HOME', 'https://'.$_SERVER['HTTP_HOST']);
Now, that forces my site to use https. However, that didn’t fix the images that I used. Since I uploaded the images that I used before my site was using HTTPS, the link of each image uses HTTP. Luckily for me, I didn’t have enough images or content yet to make the whole process a pain. I have to delete each image and re-upload each one of them. This what fixed my Mixed Content problem.
Hope you will find this useful. Cheers!