WP Buffs Blog |

How to Fix WordPress Mixed Content SSL Warnings (2021)

How to Fix WordPress Mixed Content SSL Warnings

Adding Secure Socket Layer (SSL) protection to your website is crucial for protecting users’ private data. However, when integrating SSL certificates, it’s not uncommon to run into issues such as WordPress mixed content warnings.

To prevent Google from flagging your webpages as “not secure”, it’s important to take careful measures to ensure the proper implementation of SSL certificates. This includes making sure all URLs, scripts, and content loads over HTTPS rather than HTTP.

In this post, we’ll start by explaining what SSL certificates are and why they’re important. Then we’ll discuss HTTPS mixed content warnings, what causes them, and step-by-step instructions for how to find and fix them in WordPress. Let’s get started!

In This Article 🤓

Our team at WP Buffs helps website owners, agency partners, and freelancer partners fix WordPress errors and other security issues. Whether you need us to manage one website or support 1,000 client sites, our solutions have you covered.

What Is an SSL Certificate? 🔐

While browsing the internet, we often share personal information such as credit card details. SSL, which stands for Secure Socket Layer, helps protect your privacy and boost security by acting as the middleman between your browser and the server where a site is hosted.

SSL protected sites load over HyperText Transfer Protocol Secure (HTTPS). They’re also marked by a padlock icon in the address bar. This indicates that the transmission of data between the visitor and the server is encrypted:

There are three main types of SSL certificates:

  • Domain Validation (DV): A DV certificate simply verifies that you are the owner of the domain before adding SSL protection to it.
  • Organization Validation (OV): An OV certificate not only verifies your domain, but also proves your organization is legitimate.
  • Extended Validation (EV): An EV certificate offers the highest level of security assurance to your customers, as all applicants must pass a strict vetting process.

The use of SSL certificates is growing rapidly and almost everyone is switching to HTTPS.

Why SSL Certificates Are Important for WordPress Sites

There are a variety reasons SSL certificates are so important. To start, Google added HTTPS use as a ranking parameter for its Search Engine Results Pages (SERPs), along with site speed. Thus, leveraging an SSL certificate can help boost your rankings and improve Search Engine Optimization (SEO).

SSL certificates can also help decrease cart abandonment rates. Having a green padlock icon in the address bar with a “Secure Connection” message helps gain visitors’ trust. Customers will feel more confident when purchasing your products, as there’s less concern about data theft.

Free WordPress site speed eBook

Speed checklist eBook cover

SSL certificates are also officially recommended by WordPress. The platform’s co-founder, Matt Mullenweg, announced that WordPress will only suggest SSL-secured WordPress hosting providers.

Perhaps most importantly, HTTPS prevents browsers from displaying security warnings on your WordPress site, which may deter visitors altogether:

In 2018, Google Chrome announced that it would start showing a “not secure” warning on sites using HTTP. By having an SSL certificate, your visitors won’t see this warning and will be more likely to trust your site.

How to Get an SSL Certificate for Your WordPress Site

There are a handful of methods you can use to install an SSL certificate on your WordPress site. One of the most popular is to go through Let’s Encrypt, a free domain-level SSL Certificate Authority (CA) provider backed by the Internet Security Research Group (ISRG):

We recommend checking with your host for specific SSL certificate installation requirements and guidance. However, most hosting providers include support for free, one-click Let’s Encrypt installation with their plans.

If your host doesn’t offer a one-click installation option, you can also add a Let’s Encrypt certificate to your site manually. To do so, you will need control of your entire server and shell access, as well as the CertBot ACME installed on your computer.

Another option is to use an online tool such as SSL For Free, which eliminates the complexity of installing an SSL certificate:

You simply enter your site’s URL and follow the steps provided. This is much easier than the manual method and only takes about ten minutes to complete.

Unfortunately, there are some cases when you might still see a “not secure” message even after installing your SSL certificate. If your settings are misconfigured, it can cause a number of issues, including WordPress mixed content warnings.

What are WordPress Mixed Content Warnings? 🛑

If you’ve successfully installed an SSL certificate on your WordPress site and configured it properly, you should see the padlock icon in the browser address bar when you visit your site. However, on some pages, you may notice an info ⓘ icon instead:

This indicates a mixed content warning, which appears in visitors’ browsers if your WordPress site loads both HTTPS and HTTP scripts. The wording of this error may vary depending on which browser you’re using. However, in most cases, it will identify your site as “not secure”.

Some common examples of HTTPS mixed content warnings include:

  • “Your connection to this site is not fully secure”
  • “Connection is Not Secure”
  • “Be careful here. Some content on this page is not encrypted.”
  • “Only secure content is displayed”

Although your site may be using a secure URL and is accessible and functioning, a WordPress mixed content warning means there are some elements or assets on the page that aren’t protected. More specifically, it means one or more URLs are serving content via HTTP rather than HTTPS.

Common Causes of HTTPS Mixed Content Warnings

Mixed content warnings are most likely to occur right after migrating from HTTP to HTTPS. There are multiple reasons you might see a mixed content warning on your WordPress site, including:

  • There are HTTP links in your CSS and JS Files. While writing the code of themes and plugins, some developers hardcode HTTP links instead of HTTPS.
  • Images on the page are hotlinked. Hotlinking is the process of calling images from other sources. Images may have hardcoded URL paths that use HTTP.
  • Links to external scripts are included in your CSS and JS files. As with hotlinking, if you are calling files from external resources that don’t have HTTPS enabled, it might cause a mixed content warning in WordPress.

There are two major types of mixed content: active and passive. Active mixed content refers to webpages loaded over a secure HTTPS connection that also contain scripts that are loaded over HTTP. Passive mixed content refers to image, video, or audio files loaded via HTTP.

How to Find and Identify WordPress Mixed Content Errors in WordPress 🔍

There are multiple ways you can identify mixed content errors on your WordPress site and, more specifically, which assets are loading over HTTP. The first is to manually check for them using Chrome DevTools.

To do this, you’ll need to open your site in Google Chrome. Right-click on the page where the warning appears, then select Inspect. Under the Console tab, anything your browser has identified and flagged as not secure will be listed, with mixed content warnings highlighted in yellow:

If it’s just one or two items you need to fix, you can go to the page or post where the problem is located to fix it. However, if there are many mixed content issues on your WordPress site, manually resolving them isn’t the easiest.

Therefore, you might consider using SSL Check by JitBit instead:

This helpful tool scans your entire site and provides a list of non-HTTPS URLs. Simply enter your domain and click on Check for SSL Errors. After it’s done crawling your pages, it will display a list of pages with insecure content:

Another popular tool you can use for this is Why No Padlock. Similar to SSL Check, you simply enter your URL, then click on Test Page:

Any mixed content errors will be listed at the bottom of the results page with the specific location of the problem:

Once you identify which assets are causing the WordPress mixed content warnings, the next step is figuring out how to resolve them.

How to Fix Mixed Content Warnings in WordPress (In 4 Steps) 🧰

If you’re seeing mixed content warnings on your WordPress site, it’s important to resolve them as soon as possible. In addition to making your site appear untrustworthy to visitors, these errors can also hurt your site’s User Experience (UX) and SEO.

Let’s take a look at how to fix WordPress mixed content warnings in four steps:

Step 1: Confirm You’re Using a Valid SSL Certificate

As we’ve discussed, installing an SSL certificate is a critical part of securing your site. However, it’s also important to make sure that it’s valid and stays up-to-date.

Let’s Encrypt certificates have a default expiry of ninety days. You have to renew yours regularly for it to keep functioning properly. There are a few hosting providers that have a built-in feature to renew SSL certificates automatically. However, this isn’t always the case.

Therefore, unless you recently implemented an SSL certificate on your website, there’s a possibility it could be expired. While this likely isn’t the cause of the WordPress mixed content warnings, it’s worth checking out.

To determine the status of your SSL certificate, click on the information icon that appears where the padlock should be in your browser’s address bar. Then select Certificate (Valid):

In the Certificate Viewer that opens, you can review the details and information about your SSL certificate. This includes the issue and expiration dates:

Verify that your certificate has not expired. If it has, check with your hosting provider or the CA for guidance on renewing it.

Step 2: Change Your WordPress Internal URLs from HTTP to HTTPS

If you’re still dealing with WordPress mixed content warnings even after installing a valid SSL certificate, it’s possible that the integration wasn’t properly configured for HTTPS encryption.

Therefore, the next step is to change your internal URLs from HTTP to HTTPS in WordPress. To do this, log in to your dashboard and navigate to Settings > General:

In the text fields next to WordPress Address and Site Address, replace HTTP with HTTPS:

When you’re done, click on the Save Changes button at the bottom of the screen. Now, every URL of your WordPress site should be served via HTTPS.

However, users who access your site via a link using ‘http://yoursite.com’ or who type “http” into their browsers when navigating to your site will not be served HTTPS pages. Therefore, you need to set a rule to redirect HTTP to HTTPS.

Step 3: Add a Rule to Redirect HTTP to HTTPS

Another issue that may be causing WordPress mixed content warnings on your site is if you never implemented redirects to automatically send visitors to the secured version of your pages. For that, you need to add a rule in your site’s .htaccess file that will force WordPress to use HTTPS.

You can do this manually or with a plugin. Let’s start with the manual method.

First, you’ll need to access your site’s files via your web host’s File Manager tool or using File Transfer Protocol (FTP) and an FTP client. Navigate to the directory that contains WordPress’ core files (usually public_html) and right-click on the .htaccess file.

Then, click on Edit:

Within the file, place the following lines of code:

IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.mysite.com/$1 [R,L]</IfModule>

Make sure to replace ‘https://www.mysite.com with’ your own domain.

The above rule is for Apache servers. If your hosting provider uses NGINX, add this rule instead:

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

Again, make sure to replace ‘yoursite’ with your domain, and change the port if your provider uses a different one as well. If you’re not sure which rule you should use, contact your host.

If you’re not familiar with the .htaccess file, you can use a plugin such as WP Force SSL instead:

This plugin forces SSL on every page of your WordPress site automatically. After you install and activate it, you can locate its settings from your dashboard by going to Settings > Force SSL.

Step 4: Perform a Search and Replace to Update Links in Your Content and Database

The next step is to update the links in your WordPress database and content to replace any instances of HTTP with HTTPS. The most efficient way to do this is to use a plugin such as Better Search Replace:

After you install and activate it on your WordPress site, navigate to Tools > Better Search Replace from your dashboard. Add the HTTP version of your site (http://yourdomain.com) in the Search for field and and the HTTPS version (https://yourdomain.com) in the Replace with field:

Select all the tables of your WP database and de-select the Run as dry? option:

When you’re done, click on the Run Search/Replace button at the bottom of the screen. Once you clear your browser’s cache and revisit your website, there should no longer be any WordPress mixed content warnings.

How to Change Image URLs from HTTP to HTTPS in WordPress

As you might recall, image URLs and other media assets with absolute HTTP links can cause WordPress mixed content warnings. If a plugin such as Better Search Replace wasn’t effective for updating your image URLs, you can also switch them by running a database search and replace query.

To do this, login into your hosting account and open phpMyAdmin. Select your WordPress database from the list on the left, then click on the SQL tab:

In the SQL query box, place the following:

UPDATE wp_posts SET post_content=(REPLACE (post_content, ‘<old url>’,'<new url>’));

Make sure to replace old url and new url with your domain using HTTP and HTTPS, respectively. When you’re done, click on the Go button:

Once the query is done, all your post content and images should be updated with the new HTTPS URL. To confirm that the WordPress mixed content warnings are resolved, clear your cache and visit your site again.

Helpful WordPress Mixed Content Plugins 🔌

Manually inspecting, implementing, and resolving WordPress mixed content warnings can be a time-consuming process. Fortunately, there are some WordPress mixed content plugins that can help streamline the process. We’ve already mentioned a few in the steps above, but here are some others you might find helpful.

Really Simple SSL

Really Simple SSL automatically detects and configures your WordPress site to run over HTTPS. The beauty of this tool is that you just have to enable SSL via your host and the plugin handles everything else:

Really Simple SSL accomplishes the following:

  • Handles common issues with SSL certificates in WordPress
  • Redirects all incoming requests to HTTPS
  • Enables .htaccess redirects
  • Changes your website address to HTTPS
  • Fixes mixed content warnings in most cases, except for outbound links

Really Simple SSL premium licenses start at $29 per year and run up to $159 per year. If you don’t need all the bells and whistles, there’s also a free version you can use.

SSL Insecure Content Fixer

SSL Insecure Content Fixer is a free yet powerful plugin you can use to resolve a variety of WordPress mixed content warnings and errors. After you install it, it automatically works to detect insecure content on your website.

It also provides multiple levels for fixing mixed content errors, ranging from Simple to Capture:

Once you select your detection level and settings, the plugin basically handles all the heavy lifting for you. Plus, it’s free to use!

Frequently Asked Questions 📝

There are multiple ways to get a free SSL certificate for your WordPress site. First, check with your hosting provider to see if one is included with your plan. You can also refer to our post on how to get a free valid SSL certificate using Let’s Encrypt and other methods. 

Put simply, yes. Aside from installing an SSL certificate, you can make WordPress force HTTPS sitewide in a variety of ways. One method is to manually edit your site’s files and database, including .htaccess and wp-config.php. Another option is to use a plugin such as WP Force SSL, which we discussed earlier.

Wrapping Up ⌛️

Since Google added HTTPS as a ranking factor and began marking sites without SSL certificates “not secure”, it’s recommended that you protect your WordPress site by installing one. However, to prevent and resolve WordPress mixed content warnings, it’s important to properly configure your site for HTTPS encryption.

As we discussed in this post, there are four steps you can take to do this:

  1. Confirm you’re using a valid SSL certificate on your WordPress site.
  2. Change your internal WordPress site URLs from HTTP to HTTPS.
  3. Add a rule to redirect HTTP to HTTPS.
  4. Perform a search and replace to update the links in your content and database (via query or plugin).

Adding an SSL certificate is just one way you can boost your WordPress site security. At WP Buffs, we offer Care Plans that can help streamline all your site maintenance and security tasks. Check them out today to see how we can help!

Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.

If you enjoyed this article, then you’ll really enjoy the 24/7 WordPress website management and support services WP Buffs’ has to offer! Partner with the team that offers every aspect of premium WordPress support services.

From speed optimization services, to unlimited website edits, security, 24/7 support, or even white-label site management for agencies and freelancers, our expert engineers have your back. Bring us in as part of your team to make your site Bufftastic! Check out our plans

Curious about what we do?