How to Fix Mixed Content in WordPress
What's in this guide?
What is Mixed Content?
Mixed content is simply when a site is loaded over a secure HTTPS connection, but requests resources such as images, videos, stylesheets or scripts that are loaded over an insecure HTTP connection.
If you've already added an SSL certificate and ensured the site is loading over HTTPS but your site is still not secure you most likely have mixed content on the site. Modern browsers will usually either:
1) Block the content from loading, this often occurs with scripts. This prevents the site loading securely, you may even see a red padlock.
2) Show insecure warnings and indicate to the user that the page they're requesting has insecure content.
When visiting a webpage over HTTPS in Google Chrome, the browser alerts you to mixed content as errors and warnings in the JavaScript console. You can view mixed content in Chrome by selecting F12 on your keyboard or right-clicking and selecting 'Inspect'.
A good tool to help identify mixed content is the Why No Padlock? tool.
How to Fix Mixed Content on Your WordPress Site
To fix mixed content on a WordPress website, a plugin can be used that automatically replaces the insecure URLs with the secure ones.
- Log in to the WordPress Dashboard
- Select Plugins and select Add New
- Search for SSL Insecure Content Fixer, and select 'Install Now'
- Once the plugin has been activated you can change the settings from Settings. From there, you can alter the extent to which the URLs are replaced. We’d recommend selecting either Simple/Capture/Capture All.
- If you’re on the WordPress platform you’ll need to purge cache within StackCache, then try an incognito window to ensure your browser hasn’t cached the previous content.
Your site should now load securely. If not, you can follow the steps below to make sure you've covered all bases to ensure your site is secure.
Ensuring Your WordPress Site Loads Securely
Ensuring there's no mixed content on your WordPress site is fundamental to ensuring it loads securely, however you can't miss out on the other key factors to ensure the site loads securely for its users.
Ensure HTTPS is used
Make sure the WordPress site and home URLs are prefixed with HTTPS i.e. https://example.com. You can do this within the /wp-admin area of your site.
- Log in to the WordPress Dashboard.
- Click on Settings on the left-hand side.
- Make sure the WordPress Address (URL) is prefixed with HTTPS.
- Make sure the Site Address (URL) is prefixed with HTTPS.
:bulb: If you're running an e-commerce store you may consider buying a Simple SSL Certificate. Whilst the level of encryption is the same as the free Let's Encrypt SSLs, the Simple SSL comes with a $10,000 warranty as insurance against loss of money when submitting a payment on an SSL-secured site.
Add an SSL Certificate
Make sure you've added an SSL Certificate to the hosting package through My20i.
- Go to Manage Hosting.
- Select Options > Manage on the hosting package which you wish to activate the SSL.
- Under Security, click on the SSL/TLS icon.
- You will then see your domain name and an option to Activate Free SSL next to it - select this and the SSL will be applied to your domain.
- If you’d like all your visitors to use SSL connections (i.e. for HTTPS to always be used), simply select the Enable option at the bottom of the page.