How To Fix Mixed Content Issue For WordPress

What is Mixed Content?

Mixed content refers to a situation where a web page is served over HTTPS (Hypertext Transfer Protocol Secure), which is a secure protocol for transmitting data over the internet, but some of the resources on that page (such as images, scripts, stylesheets, etc.) are loaded over HTTP (Hypertext Transfer Protocol), which is not secure.

In simpler terms, mixed content occurs when a web page is accessed securely (via HTTPS), but some elements within the page are loaded using an insecure connection (HTTP). This can pose a security risk because, while the main page may be encrypted, the insecure resources can be intercepted or modified by attackers, potentially compromising the security and integrity of the entire page.

Browsers typically indicate the presence of mixed content to users by displaying warnings, such as a padlock icon with a warning triangle or an exclamation mark in the address bar. These warnings alert users that some parts of the page are not secure, which can erode trust and deter visitors from engaging with the website.

To ensure a secure browsing experience and maintain the integrity of your website, it's important to fix mixed content issues by ensuring that all resources are loaded securely via HTTPS.

How To Fix Mixed Content Issues for WordPress

Fixing mixed content issues in WordPress involves ensuring that all resources on your website (such as images, stylesheets, scripts, etc.) are loaded securely via HTTPS rather than HTTP. Here's a step-by-step guide to fix mixed content issues in WordPress:

Case #1

In case you are seeing the error “Loading Mixed (insecure) display content ” with a yellow colour in the browser’s console tab, please follow these steps

Step #1

The first step is to identify which resources are being loaded over HTTP instead of HTTPS. Press Ctrl+Shift+I (Or right-click at the blank space and select Inspect Element) to enter your browser’s Developer Mode. Click on the Network tab and then reload the page. Look for warnings or errors related to mixed content in the console or network tab.

Step #2

Browse to your WordPress website Admin Panel and enter your admin credentials to log in.

Go to your WordPress dashboard and navigate to Settings > General. Make sure that both the "WordPress Address (URL)" and "Site Address (URL)" fields start with "https://" rather than "http://". Save your changes.

Step #3

Go to the Plugins section and Theme section. Some themes and plugins may have hardcoded HTTP links. Check your theme settings and plugin settings for any references to HTTP URLs and update them to HTTPS.

Step #4

If you have hardcoded HTTP links in your content (such as in posts, pages, or widgets), you'll need to update them manually. Use a plugin like "Search Replace" to search for HTTP URLs in your database and replace them with HTTPS URLs.

Go to the Plugins section and search for the “Search and Replace” plugin. Install and activate this plugin.

Step #5

Go to your plugin settings and paste the URL in each of the two text boxes. Remember to replace HTTP with HTTPS in the second text box. Finally, tick the two Checkboxes and click on the Go button. And you are done!

You can verify the website by reloading the web page. If you are not seeing any error “Loading Mixed (insecure) display content ” in the browser's console tab, then your website is fully secured now.

After following the above steps, if you are still facing the issue then please follow the below steps

1. Update CSS and JavaScript Files:

If your theme or plugins load CSS or JavaScript files using HTTP, you'll need to update those references. Look for these files in your theme's directory or your plugins' directories and update the URLs to use HTTPS.

2. Update Images and Other Media:

Make sure that all images and other media files are being loaded via HTTPS. If you have hard-coded image URLs in your content, update them to use HTTPS. You can also use a plugin like "Velvet Blues Update URLs'' to update media URLs in your content.

3. Use Content Security Policy (CSP):

Implement a Content Security Policy on your website to mitigate mixed content issues and enhance security. CSP allows you to define which resources can be loaded on your website, helping to prevent mixed content vulnerabilities.

4. That's it! Now you should clear the following caches:

1. PageCache

2. ObjectCache

3. CDN Cache

4. Caching Plugin’s Cache

5. Test Your Site:

After making these changes, thoroughly test your website to ensure that all mixed content issues have been resolved.

Verify That The Issue Has Been Fixed

Now that the plugin has resolved the Mixed Content issue, it is easy to verify that your WordPress website no longer faces this issue.

For this, use an online tool: Why No Padlock. This tool will check your website and inform you about the success of the process.

Visit the website and enter the URL of your website. Click the Test Page button to start the process. You will see the following success message:

That’s it! We hope this article was helpful. If you need any help, then feel free to raise your query on WeWP Support Ticket.