The Mixed Content Error occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection.
What is Mixed Content Error in WordPress?
WordPress is a free and open-source content management system (CMS) written in PHP and paired with a MySQL or MariaDB database. A mixed content warning appears in a user’s browser when the WordPress site they’re trying to visit is loading HTTPS and HTTP scripts or content at the same time. This can cause problems since HTTP and HTTPS are completely separate protocols. A common example of mixed content would be when an image is loaded as insecure(http://mydomain.com/image.jpg), but the page was requested with SSL (https://mydomain.com). This can have one of two effects on your site:
- The secured padlock symbol does not appear or is broken
- The secured padlock symbol does appear, but an image or resource does not
You can confirm if your site is being affected by mixed content errors by checking the Inspect Element console. You will see yellow warnings if the insecure content is causing the padlock to not show, and red warnings if the content has been blocked from displaying because it is insecure.
- In most browsers right-click anywhere on your page and choose Inspect
- Click on the Console tab. If your browser has flagged anything as insecure it will show here (an example is shown in the image)
What Causes Mixed Content Warnings?
Most commonly, mixed content warnings appear right after someone migrates their WordPress site from HTTP to HTTPS. Some HTTP links simply get carried over, and this causes mixed content warnings. The other causes of this warning can be:
- Developers sometimes use absolute paths (http://yourdomain.com/style.css) in their plugins or themes to link to CSS and JavaScript, instead of using relative paths(/style.css)
- Images have hardcoded URLs (such as http://yourdomain.com/image.png) that run over HTTP. These could be within posts, pages, or even a widget
- Linking to HTTP versions of external scripts such as Hosted jQuery, Font Awesome, etc.
- Having embedded video scripts that use HTTP instead of HTTPS
Now let us see how to fix Mixed Content Error in WordPress.
- Make sure that you have activated SSL for your domain
- You can use the WordPress plugin “SSL Insecure Content Fixer” which is recommended by WordPress to fix the Mixed content error
- Upon activation, you need to visit the “Settings » SSL Insecure Content” page to configure the plugin settings
4. This plugin provides different levels of fixes to the mixed content error. They are: Simple, Content, Widgets, Capture, and Capture all.
5. After selecting a content fix level, you need to scroll down to the HTTPS detection section. This is where you can choose how to detect the HTTPs content on your website.
6. Click on the save changes button to store your settings
7. Make sure to clear your WordPress cache before checking your website. If the mixed content error in WordPress is not fixed, then revisit the plugin’s settings page and modify the fix levels to the next level.
The Mixed Content Error should now be fixed!
