Is your WordPress website displaying the ‘mixed content’ warning? Don’t panic. This warning can strike on any site even if you have installed a Secure Socket Layer (SSL) certificate.
The mixed content warning does not stop your site from showing content on a page, but it can have a negative effect on your site’s SEO ranking. That’s why you should resolve it as soon as possible.
Luckily, that’s pretty easy. In this post, we’ll show you four techniques you can adopt to fix mixed content issues on your WordPress website.
Mixed Content Warning Explained
The mixed content warning appears when certain links or resources on your site run on HTTP and HTTPS connections. You will see a padlock icon beside the URL in your browser’s address bar if your WordPress website has an SSL certificate. You will see a ‘connection is secure’ message on your web browser after you press that padlock.
The SSL padlock signifies that connections to your website will be safe, so attackers are unable to access any data that users enter on your site (e.g. credit card details or passwords). But if any of your website URLs have been loaded with an insecure HTTP link, this means your page will have mixed content. That will cause the padlock icon to disappear or appear broken, while a notification will warn you that connections to the site will not be completely secured.
As Google requires that all websites implement HTTPS to transport content, this can be a problem. Your site’s SEO could be negatively affected if Google discovers that some of your site’s content uses HTTP connections only. Also, if you’re running an online store and you see a mixed content warning, your customers will struggle to enter their payment information on your site.
Typical Reasons for Mixed Content on WordPress Sites
A mixed content issue in WordPress occurs when you move your website from HTTP to HTTPS. Some of your site’s resources may keep their HTTP links even if you install SSL on your site correctly. SSL mixed content warnings can seem daunting at first, but they’re fairly easy to handle.
Additionally, your mixed content warning could be the result of static files such as javascript or media files. If you use an absolute URL to link to your site’s files, you could also run into mixed content warnings.
The absolute path could be due to a plugin installed on your site, or if you hardcode the URLs to pictures on your widgets or pages via HTTP connections in the URL. For example, http://thisisyourwebsite.com/photo.png.
How Can You Find Mixed Content Warnings?
We have already established that if you see no padlock, or a padlock icon that appears broken, next to your website’s URL, that leads to mixed content error notifications. But finding the resources or links responsible may be difficult.
Still, you can use various techniques to locate links or files with mixed content on your browser, and we’ll look at two below.
First, use your browser’s developer menu. If you’re on Chrome, you can use developer tools to identify the mixed content errors in your website. Here’s how.
Right-click on the page with the broken padlock icon, then choose ‘Inspect’ to access the developer tools. Next, tap the console tab to find all the warnings and errors affecting the site when you load the page. Find the errors with mixed content title, and look for the link to the resources via a HTTP connection.
How Can You Fix WordPress Mixed Content Warnings?
The crucial step in troubleshooting the mixed content error warning is understanding which files or links are to blame. You should also have a valid SSL certificate installed on your site.
Please note: Does your WordPress hosting include a free SSL certificate? If so, you can leverage the ‘Really Simple SSL’ plugin to force WordPress to utilize SSL on your site.
But if your hosting does NOT include an SSL certificate, you can pick a free one up at Let’s Encrypt. Cloudflare and other CDNs offer their users free SSL, too.
Next, we’ll explore the essential steps for fixing the mixed content warning error.
Use the SSL Insecure Content Fixer
Let’s talk SSL, mixed content warnings, and solutions.
A simple way to address mixed content warnings is to use the SSL Insecure Content Fixed Plugin, which helps resolve insecure files or links on WordPress websites. This includes multiple levels of action that you can choose from, with Simple set as the default level. The Simple level causes the plugin to browse your site in search of mixed content errors in your scripts, CSS files, and images.
The plugin will resolve any mixed content issues it finds, though it may be unable to do so at the Simple level if you have hardcoded the URL to images on your pages or posts. Instead, you would have to try a solution at a higher level available in the SSL Insecure Content Fixer. You can choose from:
- Content: At this level, you will get all the features included in the simple level, and it will search your posts and pages to locate insecure content. It will also browse the resources available within your text widgets.
- Widgets: The Widgets level incorporates all the functionalities in the Simple and Content levels covered above. Furthermore, it will scour all of your WordPress site’s widgets: if the plugin finds insecure content on any of them, it will resolve them.
- Capture: When you use the plugin at this level, it will go through all of the content on your page, from the header to the footer. This undertakes a comprehensive check and resolves any insecure content entries on your WordPress site.
- Capture All: This level incorporates all the functionalities contained in the previous three levels, and it will search through Asynchronous JavaScript and XML (AJAX) calls on your site. But this can have an impact on the performance of your site.
How Can You Use Your SSL Insecure Content Fixer?
Install the plugin on your WordPress admin dashboard, then activate it. Next, navigate to Settings > SSL Insecure Content, then choose the level you want to apply on your WordPress site. After that, scroll down to find the ‘save changes’ button, then click on it.
Please note: When you choose a fix of a higher level, the effect on your site will also grow. So, when you pick the Capture All level, the speed of your site could be affected too.
With that in mind, it’s recommended that you start at the Simple level before graduating to the more advanced levels if you find that your lower levels fail to fix the mixed content error warning on your site.
How Can You Handle HTTP File Testing and Replacement?
If a hard-coded image or script is responsible for the mixed content warning on your WordPress website, one simple solution is to switch your URLs from HTTP to secure HTTPS versions instead.
You can either replace those files manually by directly editing your theme files. But certain plugins, such as ‘Better Search Replace’ or ‘Elementor Page Builder’, may make the process much easier. Make sure that you back up your database and site before you continue.
How Does Better Search Replace Work?
The Better Search Replace plugin lets you update database tables via the search and replace function. That means you can run a direct search for every entry with the non-secure HTTP protocol, then swap them with the HTTPS protocol (which is secure) instead.
To get started, install the Better Search Replace plugin on your WordPress website, then activate it. Then navigate to Tools and click on Better Search Replace. Next, click on the Search/Replace tab.
After you complete these steps, type your site address into the ‘search’ box, using HTTP format (for instance, http://thisismysuperwebsite.com). Then, type your site address into the box with the HTTPS format (https://thisismysuperwebsite.com).
The next step is to pick the database table(s) you intend to run the search/replace feature on — these would be wp_options, wp_posts, wp_terms, wp_term_relationships, and wp_term_taxonomy table.
To pick several tables, click on the relevant table name while holding the ‘ctrl’ key. You can activate the ‘dry run’ option which will present information on how your adjustments will affect the database, so you can be sure you’re happy to proceed before you commit. Next, press the Run Search/Replace button to finish.
How Do You Use the Elementor Page Builder?
With the Elementor plugin, you can create a WordPress website with simple drag-and-drop functionality. But Elementor also incorporates a feature that enables you to search for and replace insecure links.
It’s best to choose this option if you have already installed the plugin. Otherwise, use the Search and Replace one discussed above.
Open your dashboard and click Elementor > Tools, followed by the Replace URL tab. Next, type your website address in the HTTP format into the old URL box, then put your site’s secure HTTPS address into the new box. Finally, tap the ‘Replace URL’ button.
If you fix the mixed content warnings on your site with any of these plugins, that’s fantastic. But if you still receive the warnings, a hardcoded script or image likely is to blame. That means you would have to replace links within your theme files manually.
How to Replace HTTP Files Manually
When loading a script via an external link, you may sometimes find that using the search-and-replace feature won’t switch the script URL. But you can replace insecure links in your theme files manually instead.
How? Navigate to Appearance > Theme Editor then click on the header template. Then, open the search box with ‘CTRL F’, and paste the link triggering the mixed content warnings. When you find the code, replace it with the link’s secure version (so, changing http:// to https://).
Furthermore, if you link to a stylesheet or image on your site via an absolute path, you can change the link to use a relative path instead. For instance, when you have an image with a path like ‘http://thisismywebsite/images/logo.png’, you could switch it for ‘/images/logo/png.’. When you’ve done this, press Update File to finish.
How to Adjust .htaccess File
Insecure URLs may still be contained in files and links after you transfer your website to a different server or install an SSL certificate on your current server. But you can fix this straightforwardly: redirect every request from the insecure port to a secure HTTPS port. You can configure this in your server’s htaccess file.
Connect to your website to FileZilla FTP to begin, then click on whichever directory holds your site’s files. Once in the directory, double-click on the .htaccess file to start downloading a backup. Next, right-click on the file and press the ‘view/edit’ button. Use a text editor to open the file then take all of the content from the file.
This is when you will rewrite the whole file with a new rule designed to redirect traffic NOT from a secure port (port 443, in this instance). Just paste the following code into the file:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteBase /
RewriteRule ^indexphp$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Then, save the file before re-uploading it to your chosen server. This code will redirect every request from an insecure URL on your webserver to force SSL on your site.
How Do You Use CDN to Resolve Issues with Mixed Content?
A Content Delivery Network (CDN) like Cloudflare is a valuable tool for enhancing your website speed and defending it from SQL injections. Also, the majority of CDNs provide users with a free SSL certificate. On Cloudflare, you can set this up by clicking on the SSL/TLS tab in your dashboard.
Another useful Cloudflare setting enables you to rewrite mixed content on your site automatically, so if an image or file uses insecure HTTP connections, it will be changed to HTTPS connections before the user sees the page.
Press the “Edge Certificates” tab below the SSL/TLS section to turn on this feature in your account. Then, scroll down the page to find the ‘Automatic HTTPS Rewrites’ area. Once there, tap the switch to activate this feature. After you’ve done this, your WordPress mixed content warnings should be resolved!
Conclusion
Using HTTPS on your WordPress website protects your site and your user data, but you could still occasionally run into mixed content warnings. These are, by and large, negative for your site, as users are likely to stop trusting websites that have not been secured fully. Fortunately, after reading this guide, you know how easy it can be to resolve WordPress mixed content warnings!
