Website owners may find many challenges when switching from HTTP to HTTPS, and a common issue is mixed content warnings. Running a website needs a secure connection, which is achieved through the use of an SSL certificate.
Devrims provides an unlimited number of free Let’s Encrypt SSL certificates for each of your domains, which can be installed with a single click.
Note: We have a knowledge base on How to install free SSL certificate on your application.
Mixed content is a typical issue when installing SSL, and in this knowledge base, we will show you how to effortlessly fix the mixed content error in WordPress and protect your site.
1) What is a Mixed Content Error?
The mixed content problem occurs when your WordPress site offers some resources securely over HTTPS and others insecurely via HTTP. An example is when an image is loaded as unsecured (http://mydomain.com/image.jpg), although the page was requested with SSL (https://mydomain.com), an example of mixed content.
If you have correctly deployed SSL on your website, you will see a green padlock icon in the browser address bar next to your website’s URL.
If your SSL settings are not properly configured, you will see an info sign or a broken padlock icon in the URL bar.
This implies that, even though your website utilizes an SSL certificate, some content is still served through HTTP URLs.
2) Common Causes of Mixed Content Error
Mixed content warnings are more likely to appear immediately after installing the SSL and moving from HTTP to HTTPS. A mixed content warning on your WordPress site could be caused by several factors, including:
- HTTP links can be found in your CSS and JS files. Some developers hardcode full HTTP links instead of calling the main domain from the database and only mention the path of URL in the code.
- Hotlinks are used to link to images on the website. The technique of calling pictures from other sources is known as hotlinking. Hardcoded HTTP URL routes may exist in images.
- Your CSS and JS files include links to external scripts. If you call files from external resources that aren’t HTTPS enabled, you could get a mixed content warning in WordPress, much like hotlinking.
Active and passive mixed content are the two main categories. Active mixed content refers to web pages that are loaded via a secure HTTPS connection but also contain HTTP code. Image, video, and audio files loaded through HTTP are referred to as passive mixed content.
3) How to verify the Mixed Content Error?
Using the Inspect tool, you can see which content is delivered over an insecure protocol. The mixed content problem will appear in the console as a warning with information for each mixed content item.
To do so, open Google Chrome and press F12 or Ctrl + Shift + I while on your website.
Anything your browser has detected and labeled as not secure will be shown under the Console tab, along with mixed content warnings.
We can see that the mixed content warnings are caused by a variety of insecure elements, including a stylesheet, script, and images.
You can also use a free tool like Why No Padlock if you aren’t using Chrome or want a brief overview of the errors. It examines a single web page and displays all insecure links.
4) How to fix Mixed Content Error?
The ability to directly install and configure a plugin is the best choice for most sites. There are too many options available but here we will share the best ways to resolve mixed content warning.
a) Update domain from wp-admin
b) SSL Insecure Content Fixer Plugin
c) Better Search & Replace Plugin
d) Add HTTP to HTTP Rule
e) Change Image URL
a) Update domain from wp-admin
The very first thing and a basic step is to update the URL from HTTP to HTTPS in wp-admin.
- Login to your wp-admin using your admin credentials.
- Go to General > Settings.
- WordPress Address (URL): Type the domain with HTTPS (https://mydomain.com)
- Site Address (URL): Type the domain with HTTPS (https://mydomain.com)
Once you update the URL in wp-admin then you may move to other fixes of mixed content warning.
b) SSL Insecure Content Fixer Plugin
The SSL Insecure Content Fixer plugin is simple and easy to use. The plugin can resolve any mixed content errors that appear on your WordPress website. If you require more, the plugin’s advanced options page allows you to fine-tune what needs to be secured.
- Login to your wp-admin using your admin credentials.
- Go to Plugin > Add New
- Search for SSL Insecure Content Fixer
- Click on Install Now
IMPORTANT NOTE:
When you click on the install button, you might get a popup window asking for FTP credentials to install the plugin. Kindly follow our knowledge base article on Fix FTP Credentials issue in WordPress to resolve the issue.
After following the above-mentioned KB, refresh the same plugin page and you will see Activate button. Click on it to activate the plugin.
- Go to Settings > SSL Insecure Content
- By default, Simple option is selected. (You may select other options too as needed).
- Click on Save Changes.
To ensure the plugin works well, browse your website once again in incognito mode and open inspect element by pressing F12 or Ctrl + Shift + I.
If everything goes well as expected you will get a green padlock in your browser and no error in inspect element, as shown in the below-mentioned screenshot.
c) Better Search & Replace Plugin
Using the search and replace feature, this plugin allows you to directly edit your database tables.
- Login to your wp-admin using your admin credentials.
- Go to Plugin > Add New
- Search for Better Search & Replace
- Click on Install Now and Activate the plugin.
- Go to Tools > Better Search Replace > Search Replace tab.
- Search for: Enter the URL with HTTP (http://yourdomain.com)
- Replace with: Enter the URL with HTTPS (https://yourdomain.com)
- Select tables: Select all the database tables
- Run as dry run: Check this option.
- Click Run Search/Replace.
The plugin will check all the database tables and show the results where exactly the search & replace need to be done without making any changes in the database.
If you are okay to go, uncheck the Run as dry run and click again on Run Search/Replace.
IMPORTANT NOTE:
Before proceeding to the above steps, we recommend taking the database backup. In case, anything goes wrong you can restore the database anytime. Follow our KB on how to import and export the database.
After finishing search & replace, browse your website once again and ensure you have a green padlock in the browser and no mixed content warnings in inspect element.
d) Add HTTP to HTTPS Rule
Another issue that could be creating WordPress mixed content warnings on your site is if you haven’t set up any redirects to redirect users to the secure version of your pages. You’ll need to add a rule to one of the core files to force WordPress to use HTTPS for this.
Note: Kindly follow our knowledge base article on how to redirect HTTP to HTTPS.
e) Change Image URL
WordPress mixed content warnings can be caused by image URLs and other media assets with absolute HTTP links. If a plugin like Better Search Replace didn’t work for upgrading your image URLs, you can use a database search and replace query instead.
The easiest way is to do by running a simple query in the database using phpMyAdmin.
Note: Kindly follow our knowledge base article on how to install and connect phpmyadmin.
- Login to phpMyAdmin (as instructed in the above KB) using your database credentials.
- Select your WordPress database from the left column.
- Click on SQL tab and run the below command:
Query:
UPDATE wp_posts SET post_content=(REPLACE (post_content, ‘<old url>’,'<new url>’));
Example:
UPDATE wp_posts SET post_content=(REPLACE (post_content, ‘http://yourdomain.com’,'https://yourdomain.com’));
- Click on Go button.
All of your image URL should be changed with the new HTTPS URL once the query is completed. Clear your browser cache and visit your site again to make sure the WordPress mixed content warnings are gone from inspect element and a green padlock appears in the browser.
Conclusion:
Making your WordPress site secured and winning trust of your visitors is the most crucial aspect for anyone. Visitors will avoid you if they have even the slightest uncertainty about the security of your website.
That’s only one reason why mixed content errors should never be overlooked.
In this KB, we have tried to guide you the best recommended steps you need to know and we hope you have understood the importance to resolve the mixed content warnings from WordPress.
