Are you seeing a mixed content warning on your WordPress site? Has your browser blocked access to your site due to a mixed content error?

The mixed content warning is a common issue that affects a lot of websites. It is caused by your site loading some content over unsecured HTTP connections while the site itself is loaded over secure HTTPS. It has the potential to affect your site’s search rankings, so taking action as soon as you see this warning is crucial. Luckily, resolving this is a fairly straightforward process.

TL;DR: A mixed content error in a WordPress site makes it potentially unsecured, erodes users’ trust in it, and hurts its search rankings. Resolve this either by using plugins or by manually making changes to your site. However, to really secure your site, you need a comprehensive WordPress security plugin like MalCare.

What is the mixed content error in WordPress

The mixed content error in WordPress appears when your website serves some or all the content on its pages over HTTP links instead of secure HTTPS links. It usually appears in your browser’s address bar in the form of either a ‘Not Secure’ warning or a padlock with a yellow exclamation on it.

Google Chrome is the browser of choice for most users, and this is how a mixed content warning looks on it.

If you prefer using browsers other than Chrome, here’s what this warning would look like on them.

Microsoft Edge:

Mozilla Firefox:

While a mixed content warning does not usually hamper the way your site is displayed, the ‘Not Secure’ warning that comes with it affects your site extensively. This warning negatively impacts users’ trust in your site and also harms its search engine rankings. So addressing this warning is of paramount importance.

How to fix the mixed content error in WordPress

The mixed content warning is usually seen upon migrating your WordPress website from HTTP to HTTPS by installing an SSL certificate. The reasons that cause mixed content issues are:

• Your site’s SSL certificate is either expired or misconfigured.
• Your site uses plugins or themes that load their content over HTTP links.
• Your site uses static Javascript or media files loaded over HTTP.
• Your site links to its files using absolute paths (i.e. using full domain name) or hardcoded URLs, like http://www.yoursite.com/image.jpg

Fix mixed content in WordPress by following these three methods. which requires a couple of plugins and a little dabbling in code.

Step 1: Find out what is causing the mixed content warning on your site

There are three ways to check what is causing the mixed content on the WordPress site.

1. Check your WordPress site’s SSL certificate

An expired or misconfigured SSL certificate could also cause mixed content warnings on your WordPress site.

To check your site’s SSL certificate expiry dates, copy the site URL and run it through the Qualys SSL Labs test site. This will show complete details of your certificate, including expiry dates and overall rating. Your certificate should possess an overall rating of A or A+ along with a valid expiry date.

To check if the SSL certificate on your site is configured properly, copy the site URL and run it through the IONOS SSL Checker site. The results will show whether your certificate is installed and configured correctly.

If your site’s SSL certificate has expired or is misconfigured, you will also see ‘Not Secure’ warnings on your browser address bar. You will then need to fix the ‘Not Secure’ warning across your site.

2. Use WhyNoPadlock?

If an expired or misconfigured SSL certificate is not the reason behind the mixed content warnings, check your WordPress site’s URL on the WhyNoPadlock? website to find out the root causes. This is the easier method as it checks your entire site while requiring no technical knowledge to do so.

Just copy your site’s full URL, paste it into the WhyNoPadlock? search box, and click on the Test Page button. You may be required to pass a captcha test before you can test your site. The results will show you all the culprits behind your mixed content warnings.

3. Use the Inspect tool

If you prefer going technical to determine the reasons behind your WordPress site’s mixed content warnings, right-click anywhere on your WordPress site and click on Inspect to open your browser’s developer menu. Click on the Console tab at the bottom to see all the mixed content warnings.

You can then address each of these warnings one by one. This is doable if there are only a few warnings. However, this becomes a cumbersome process if you have multiple warnings, which is where the next section comes in handy.

Step 2: Use a plugin to find and replace HTTP links with HTTPS ones

Using a plugin to resolve the mixed content error in the WordPress site is the simplest option. We used the SSL Insecure Content Fixer plugin to convert all assets served over HTTP to HTTPS standards. The steps to use it are:

Step 1: Install and activate the SSL Insecure Content Fixer plugin

• On your WordPress admin dashboard, hover over the Plugins option on the left pane and click on Add new.

• In the Search plugins… text box, enter SSL Insecure Content Fixer to find the plugin.

• Click on Install and then on Activate to get the plugin up and running.

Step 2: Access the plugin dashboard

• Navigate to Settings.
• Click on SSL Insecure Content

Step 3: Select your level of customization in the Fix insecure content section

• The default option is Simple, which should suffice for most users. However, you can use the other options too if you need more control. The options are explained well on the dashboard. However, for better clarity, here is an explanation of the other options:
  • Content: It searches and fixes all the posts and pages on your site, over and above the actions included in the Simple option.
  • Widgets: It searches and fixes all the widgets on your site, over and above the actions included in the Content option.
  • Capture: It performs a comprehensive check of all the content on your site, including headers and footers, scripts, stylesheets, etc., over and above the actions included in the Widgets option.
  • Capture All: It searches and fixes AJAX calls on your site, over and above the actions included in the Capture option. However, it may cause significant performance issues on your site, so use it carefully.

Step 4: Select your HTTPS detection options

• This section decides how WordPress should detect your site’s pages in the HTTPS detection section.
• Use the default option or choose another if your site uses load balancers, reverse proxies, CDNs, etc.

Step 5: Click on Save Changes.

Step 3: Fix plugins and themes with HTTP links

You might need to fix the mixed content warning in WordPress site manually if you find that the issue is caused by plugins or themes that load their content over HTTP links, by static Javascript or media file links, or by hardcoded URLs.

Step 1: Check if plugins/themes can load their content over HTTPS links

Using the Why No Padlock? or the Inspect method will show you the links that your plugins/themes are loading over HTTP links. Update the plugin/theme to see if it solves the problem. If not, replace the plugin.

Step 2: In the case of themes, convert absolute/hardcoded paths to relative URLs using Theme Editor.

• Absolute/hardcoded paths are URLs that use the full address of the site, eg. https://www.yoursite.com/blog/blog123/image1.jpg. On the other hand, relative paths skip the ‘https’ and ‘www’ sections and instead start with the path, eg. //yoursite.com/blog/blog123/image1.jpg.
• Go to Theme File Editor on the Tools menu of your WordPress admin dashboard and find the links causing issues.

• Make modifications as shown above and see if it resolves the issue.

If these methods do not work, you must replace the theme.

Step 4: Replace JavaScript and media file HTTP links

Step 1: Check if static JavaScript or media file links can be loaded over HTTPS links

• This can also be found by using the Why No Padlock? or the Inspect method.
• Replace the HTTP links of the files with HTTPS ones and see if this resolves the problem on reloading the page. Here’s how to do it:
  • Using the Inspect method brings up the Elements tab on your browser. Click on any of the warnings shown in the Console window at the bottom to highlight the specific code snippet that is causing the issue.
  • Find the link mentioned in the Console window by checking the HTML code.
  • Upon finding the link in question, right-click on it and select Edit as HTML.

• Replace the HTTP in the URLs with HTTPS and click anywhere else to save it. Your page will automatically try to load the content over the updated link.

Note: You can also try copying the HTTP URLs and entering them into another browser tab while replacing HTTP with HTTPS to see if it loads the files. This will tell you if the change would work or not.

• Use relative paths where possible to prevent this issue from recurring.

Step 2: Search and replace any HTTP links with HTTPS ones

• Install and activate a plugin like BetterSearchReplace to perform this action.
• Navigate to the Tools menu of your WordPress admin dashboard and click on Better Search Replace to bring up its dashboard.

• Enter your HTTP site URL in the Search for box and the HTTPS site URL in the Replace with box.
• Select all the tables from the Select tables option using Ctrl+Click for Windows or Cmd+Click for Mac.
• Uncheck the Run as dry run option and click on Run Search/Replace→.

Step 5: Force HTTPS

For this step, you will need to edit the server configuration file on your site. Depending on whether your site is on an Apache or nginx server, the server configuration file will be either .htaccess or nginx.conf respectively.

The server configuration file has to be edited to insert code that enforces WordPress to redirect visitors from HTTP to HTTPS links. This can be done in one of two ways: using SSH or using FTP.

Please note: Before you get started, remember that this is a core file. Editing a core file is usually not recommended, but if you must do it, follow instructions carefully as these files affect the functionality of your site.

Furthermore, ensure that you have a backup of your site, its files, and its database before you begin editing the .htaccess or the nginx.conf file. Once you are done, follow the next steps.

• Using SSH to edit the .htaccess or nginx.conf file
  • Obtain your WordPress site’s SSH credentials from your site host and use Command Prompt, if you are a Windows user, or Terminal, if you are a Mac user, for the following steps.
  • Log in to your site’s server by entering the following command:

ssh user_name@ip_address

Replace user_name and ip_address with the credentials obtained from the web host. Enter the password when prompted.

• List all files by entering the following command:

ls -a

• Locate the file and open it in an editor by entering the following command:

vi .htaccess

Or

vi nginx.conf

• Edit the file by pressing i.

If you are editing the .htaccess file, enter the following lines of code before the file ending:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
Header always set Content-Security-Policy "upgrade-insecure-requests;"

If you are editing the nginx.conf file, enter the following lines of code before the file ending:

server {
listen 80;
server_name yoursite.com www.yoursite.com;
return 301 https://yoursite.com$request_uri;
}

• Hit Esc to exit the editing mode and enter :wq to save the file and exit the editor.
• Using FTP to edit the file
  • Use the same credentials obtained for the previous method and use an FTP client like Filezilla or Cyberduck for the following steps. In our case, we have used Filezilla.
  • Download and install Filezilla on your system.
  • Open Filezilla, enter your credentials in the text boxes on the top bar and click Quickconnect.

• Double-click on the root directory, where WordPress is installed, in the Remote site section to open it.

• Find the .htaccess file or the nginx.conf file, right-click on it to open a context menu and click on View/Edit to edit the file.

• Add the same lines of code as the previous method to the .htaccess file or the nginx.conf file and save it by pressing Ctrl + S for Windows or Cmd + S for Macs.
• Close the file editor to see a dialog box asking if you want to upload the edited file back to your WordPress site’s server. Click on Yes to do so and save it on the server.

Step 6: Test your site thoroughly

Confirm that the mixed content errors has gone from your WordPress site. Check every page, form, media (images, videos, etc.), and link to confirm that they are all loading properly and over HTTPS links. If any mixed content warning remains, try reworking the steps mentioned above to resolve it.

Here is a post-fix checklist to ensure that your site is performing efficiently:

• Clear all WordPress, plugin, and browser caches to remove any remnants of mixed content.
• Test your site across multiple browsers to ensure that it does not throw any errors anywhere else.
• Backup your site using BlogVault to ensure you have a restore point for future issues.

How to Prevent the mixed content in WordPress

To prevent mixed content warnings from reappearing on your WordPress site, follow these best practices:

• Use relative URLs instead of absolute URLs in your content, theme files, and custom code, wherever possible. Relative URLs don’t specify a protocol (http or https), allowing them to adapt to the current protocol used by the page.
• Use HTTPS for external resources (scripts, stylesheets, images) when linking to them. If the external source doesn’t support HTTPS, consider finding an alternative or hosting the resource locally.
• Keep track of your site’s SSL expiry dates. Google is moving towards 90-day certificates, making this step critical.
• Regularly update your WordPress themes and plugins. Developers often release updates to fix security vulnerabilities and improve compatibility with new technologies.
• Use a plugin like Easy HTTPS Redirection or similar, which can automate the process of handling mixed content issues.
• Avoid widgets or embeds that may use non-secure resources. Try to find alternatives or ensure that the content being embedded supports HTTPS.
• Enable automatic HTTPS in hosting. Some web hosting providers offer this feature. So check if your hosting provider does too.

Impact of the mixed content warning

A mixed content warning can have several negative effects on your WordPress site:

• Mixed content can potentially expose sensitive information to attackers. This happens because an attacker could intercept or manipulate the non-secure content, leading to security breaches.
• A mixed content warning can erode user trust in your site. They may view it as unprofessional or potentially unsafe, which can lead to a higher bounce rate and lower user engagement.
• Sites with mixed content warnings may be penalized in search rankings since search engines like Google consider HTTPS as a ranking factor. This can lead to potentially lower organic traffic.
• Browsers may block access to sites with mixed content warnings. This is because modern browsers are becoming increasingly strict about enforcing secure connections.
• Sites with mixed content can see loading delays, which can result in a negative impact on user experience and SEO.

How to improve your WordPress site’s security

Making sure your site uses HTTPS correctly is just one step among many to ensure your site is secure and running smoothly. Here are a few more ways to ensure your site is performing efficiently:

• Install a security plugin like MalCare. Removing mixed content may remove the Not Secure warning from your site, but its security is incomplete without MalCare’s strong malware detection and removal capabilities.
• Install a firewall to keep your site protected against malicious attacks of all kinds. If you use MalCare, its robust firewall is installed automatically.
• Keep your WordPress core, plugins, and themes updated at all times.
• Install plugins only from verified sources and creators.
• Include login security methods like strong passwords, two-factor authentication, etc. for added security of your site.

Final thoughts

Congratulations on removing the pesky mixed content warning, and consequently the Not Secure warning, from your WordPress site. You have just improved your site’s security and trustworthiness by doing this.

However, removing mixed content and Not Secure warnings does not mean your site is protected. Install MalCare to make use of its robust firewall, malware detection and removal feature, as well as excellent bot protection to further strengthen your site against malicious attacks of all kinds.

FAQs

What is an example of mixed content?

Mixed content can take the form of images, videos, stylesheets, JavaScript files, etc. that are loaded over unsecured HTTP links. Identifying them is fairly easy. Right-click anywhere on your site to open a context menu. Click on Inspect to open the console, which shows the elements that are causing the mixed content warning.

Does mixed content affect SEO?

Yes, mixed content affects your WordPress site’s SEO in several ways. Google may mark your site as Not Secure if it finds the mixed content warning on it. This will lead to a loss in user trust, resulting in visitors not wanting to visit your site and a potential loss in revenue. It will also hamper your site’s search rankings, and hence its visibility. Additionally, the mixed content issue may cause your site to load slowly since it has to serve content over both HTTP and HTTPS protocols. This will again affect your search rankings as Google considers page loading speeds when ranking sites.

Why use HTTPS instead of HTTP?

HTTP Secure, or HTTPS, is, as the name suggests, the secure version of the HTTP protocol. It uses encryption to protect information being transmitted over this protocol. This prevents any information you transmit, like passwords, banking details, etc., from being intercepted. Unlike HTTPS, HTTP does not use any form of encryption, making any information transmitted over it susceptible to attacks and interceptions.