Fix SSL Insecure Content Issues of a WordPress Website

You may have suffer from SSL insecure content / mixed content issues after installing a SSL certificate for your WordPress website.

Symptoms:

The PadLock becomes yellow
Browser gives warning in the console and address bar

If this is the case, then you are at the right place to fix the issue permanently. In this post, we are going to try 3 WordPress Plugins to fix the issue.

Note: This tutorial assumes that you know basics of WordPress like installing and activating a plugin, remove a plugin, managing your web-files with CPanel file-manager or FTP.

Initial Step:

Check whether your WordPress website uses HTTPS protocol for both front-end and back-end (admin panel).

add WordPress address and Site address — Give HTTPS for both WordPress address (URL) and Site address (URL)

Then let’s move to plugins.

Plugin 1: Really Simple SSL

First, Install and activate the plugin.
Then you’ll be prompted to activate the SSL. “Go ahead, activate SSL!”

Now it’s time to take a backup of your .htaccess file. Download the .htacess file of your WordPress web site with the help of CPanel file-manager or a FTP client like FileZilla.

After taking the backup of the .htaccess file, go to “Settings > SSL” to manage the plugin.

Then go to “Settings” tab of the plugin and enable 301 .htaccess redirect and Javascript redirection to SSL. Save the settings.

Note: All 4 options as in above image has to be enabled.

Now, visit your web site and see whether the SSL insecure content issue is fixed.

Note: If you can’t access the web-site after doing above changes or the issue is still not fixed, replace the downloaded .htaccess file with the existing .htacess file in the website. After that de-activate and remove the plugin from WordPress admin panel.

Try Plugin 2, if the SSL insecure content issue is not fixed with Plugin 1.

Plugin 2: SSL Insecure Content Fixer

Install and activate the plugin SSL Insecure Content Fixer.

Go to plugin management page at “Settings > SSL Insecure Content”.

Remember to select the option “Capture All” and then Save the Settings.

Now, visit your web site and see whether the SSL insecure content issue is fixed.

If the issue is still there, then don’t deactivate / remove this plugin since the 3^rd plugin has to be run parallel with this plugin.

Plugin 3: Insert Headers and Footer

Actually we are going to use a combination of Plugin 2 (SSL Insecure Content Fixer) and “Insert Headers and Footer” plugin.

Go to plugin management page at “Settings > Insert Headers and Footers”. Insert following code to the Scripts in Header section and Save Changes.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Insert code to the Scripts in Header section

Note: Sometimes you won’t be able to save the changes due to ModSecurity enabled in Web Server.

If you are managing your own server, please disable ModSecurity for the considered site temporarily and retry to add code to the Header Section.
If you use a shared hosting plan, please contact your hosting customer support to disable ModSecurity temporarily.
Remember to re-enable ModSecurity after you have successfully added above code to the Header Section.

One of above 3 plugins should fix the SSL Insecure Content Issues associates with your WordPress website.
Let me know which method works on you in the comment section. Drop a comment, if you face any problem while following the above instructions.

I am available @Fiverr: Click Here

Thank You.