Table of Contents
In this article, you will learn what Mixed Content is and how you can fix Mixed Content Issue for WordPress.
What is Mixed Content
If you have recently uploaded new images to your wordpress website or installed Cloudways CDN with Breeze to load your website faster by caching your static content (CSS, images etc), you may run into a conflict called “Mixed Content”. This type of error arises when your secure HTTPS website is loaded with insecure resources (CSS, JavaScript, images etc). There can be two types of mixed content that we will go through one by one in this KB.
When your website is showing a yellow padlock but resources are loading fine (Case 1).
When your resources are not loading properly but a green padlock appears at the URL (Case 2)..
How To Fix Mixed Content Issue For WordPress
Follow the steps given below to fix mixed content issue in your WordPress application.
Important
Before following the process to fix the Mixed Content issue, it is highly recommended to take a backup of the application’s data. Follow this KB for backing up the server and the application.
Prerequisites
This tutorial is designed for WordPress users only, including WooCommerce and WordPress Multisites.
This tutorial assumes that there are no hard-coded links in the application's code using plain HTTP. All links should be dynamically generated or use HTTPS.
To successfully follow the steps outlined in this tutorial, you need administrator access to your WordPress admin dashboard. Make sure you have the necessary credentials and permissions.
A basic understanding of installing and managing plugins on the WordPress dashboard is required. Familiarize yourself with the process of adding plugins to your WordPress website.
Case #1
In case you are facing a yellow padlock in your URL bar, please follow these steps:
Step #1
Browse your website by entering URL in the URL bar. Press Ctrl+Shift+I (Or Right Click at the blank space and select Inspect Element) to enter into your browser’s Developer Mode. Click on the Network tab and then reload the page. You’ll find those images (or HTTP URLs) which are insecure. Copy all the URL of these insecure images by clicking on it and save it. We will be modifying these URL’s one by one in later steps.
Tip
The shortcut keys may vary in different browsers.
Step #2
Browse to your WordPress website Admin Panel and enter your admin credentials to log in.
Step #3
Go to the Plugins section and search for “Search and Replace” plugin. Install and activate this plugin.
Step #4
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. The yellow padlock will now be replaced with the secured green padlock indicating that your website is fully secured.
Case #2
If you are facing the following problem after configuring Cloudways CDN, follow these steps:
Step #1
Login to the Cloudways Platform with your credentials. Click on Applications in the top menu bar, and select your target application from the list.
Step #2
Under the Application Management area, click on the CloudwaysCDN.
Copy CDN URL
Step #3
Browse to your WordPress website Admin Panel and enter your admin credentials to log in.
Step #4
Go to the Plugins section and click on settings under Breeze Plugin.
2. Add // at the start of your CDN URL. Click Save Changes to see the effect.
That's it! Now you should clear the following caches:
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 search your query on Cloudways Support Center or contact us via chat (Need a Hand > Send us a Message). Alternatively, you can also create a support ticket.