parallax background

What ‘WordPress Mixed Content’ Means and How to Fix It

How To Solve The Failed To Open Stream Error In WordPress
May 13, 2021
WordPress Add Media Button Not Working and How to Fix It
May 27, 2021
 

The WordPress mixed content message is an issue that can impact SEO ranking and user experience. It’s a label that classifies a WordPress site as not secure.

All URLs, scripts, and content must load over HTTPS instead of HTTP. HTTPS stands for Hypertext Transfer Protocol Secure.

It is the secure version of the HTTP protocol. Encryption of the protocol is via TLS (formerly SSL).

Encryption changes plain text into a code. This protects the data from unauthorized access.

Google made HTTPS a ranking factor several years ago. Visitors need to trust the site and feel safe sharing their data with you.

The WordPress mixed content warning shows that the site is loading some elements over HTTP, not HTTPS.

This article presents some possible causes of this error and tips on how to fix it.

What the "WordPress Mixed Content" Warning Means

 

A secure site uses the SSL (Secure Sockets Layer). This is a protocol that provides security between a web server and a browser.

It keeps sensitive personal information such as bank card details secure and protected.

A green padlock icon appears in the address bar when a website has an SSL certificate and an encrypted connection. But when there's a security problem, users will see an info icon and a mixed content warning.

This means that some elements on the site are loading over HTTPS, but others are still using HTTP scripts. They are not protected with encryption and are making the site vulnerable.

Depending on the browser used, the exact words of the error message may differ. The most common mixed content warnings are:

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

Common Triggers of the "WordPress Mixed Content" Warning

 

Moving from HTTP to HTTPS is not always smooth and trouble-free. Some HTTP links may not change and can account for the insecure content on the site.

To remove the mixed content warning, check to see which features are not encrypted. The following elements are a common trigger of the mixed content warnings:

 
  • an image that has a hardcoded URL path that uses HTTP. They can be in posts, pages, or widgets.
  • a video that loads over HTTP, rather than HTTPS.
  • plugins, themes, or services that use absolute paths instead of relative paths to link to CSS and JavaScript.
  • links to external resources that don't use HTTPS (hosted jQuery, Font Awesome, etc.).

Mixed Content can be passive or active.

Passive mixed content loads over HTTP and includes images, video, and audio content. Active mixed content also loads over HTTP and can include stylesheets, scripts, and other code.

Here are some tips on how to fix the mixed content warning error.

Find the Source of the Error

 

First, it’s necessary to pinpoint what content is triggering the error.

To find the HTTP element, go to the page that loads with the mixed content warning. Then open Chrome DevTools assistant.

How to open Chrome Developer tools:

  • Use the following key shortcut for Windows: F12 or CTRL + Shift + I. For macOS press Cmd + Opt + I.
  • Launch it from the tools menu in your browser- More tools/ Developer tools.

Once the Developer tools window opens, go to the Console tab and refresh the page. If the assistant finds any mixed content errors, they will display in red or yellow.

Usually, this message also appears: “This request has been blocked; the content must be served over HTTPS.” The browser is preventing any HTTP insecure content by default.

Thanks to some new features on Google Chrome, some mixed images and media are now auto- upgraded. Other browsers don't include this option.

Results shown under the Console tab will indicate if this action has occurred.

In the example below, notice the yellow highlighted message. It says that the page loaded over HTTPS, but requested an insecure element.

The request was automatically upgraded from HTTP to HTTPS

 

The Developer tools assistant will show the different types of mixed content warnings. Some of them include a stylesheet and script, which is the active mixed content error.

Besides the Console tab, users can investigate under the Security tab. It will show the security details of the certificate, connection and resources.

The Network tab in the Developer Tools lists blocked requests.

Check the Status of your SSL Certificate

 

The SSL Certificate authenticates your site and guarantees a secure, encrypted communication. But these certificates only work if they're valid.

The SSL Certificate isn't infinite so it’s important to check the status.

It’s possible to find the relevant details by viewing site information. Do this by clicking on the padlock in the address bar.

 

The information in the window that opens says if the certificate is valid. Users can also view further information, such as who it was issued to and by what authority.

Furthermore, it outlines the exact validity period.

Replacing HTTP With HTTPS in Your WordPress Address And Site Address

Having an invalid SSL certificate isn’t usually the core problem. There are other common causes, so further action may be necessary to fix the mixed content errors.

Here are some more tips on how to make sure that all site URLs load over HTTPS. In this step, users replace HTTP with HTTPS in their WordPress Address and Site Address.

1. Go to the WordPress Dashboard.

2. In the General Settings, find the following fields: WordPress Address (URL), and Site Address (URL). In those fields change the HTTP into HTTPS.

 

3. Finally, don’t forget to save the changes.

Now all site URLs will load over HTTPS and are safe. But if visitors type HTTP in the site address, they’ll still access insecure content.

The following tip will explain how to redirect visitors to the secured HTTPS version.

4. Opened the Dashboard, and click on Settings/General.

How to Redirect HTTP to HTTPS

 

If launching a new website, use HTTPS in the WordPress Address and Site Address right from the start. That way you won’t need to make any protocol or security changes in the future.

If switching from HTTP to HTTPS, it's important to set up an automatic redirect to the encrypted pages. To do that, add a rule in the WordPress .htaccess file.

Make sure to complete the previous step before adding the code. That is, replace HTTP with HTTPS in the WordPress Address and Site Address.

Next, connect to your site via the web host's File Manager, or with the File Transfer Protocol (FTP) and an FTP client. Go to the WordPress core files (usually public_html).

Right-click on the .htaccess file and select Edit. If using the Apache servers, paste the following rule within the file:

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

If using the NGINX, add this code:

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

If your file includes more code than the default WordPress snippet, download a backup of the original .htaccess file. Right-click on the .htaccess file and download it.

Checking Your CDN SSL Settings

 

At times the cause of the WordPress mixed content warning is a CDN (Content Delivery Network). If you issue an SSL certificate for a site that has a CDN configuration, it may trigger the mixed content error.

Here's how to check the CDN SSL settings for Cloudflare.

Go to the Cloudflare dashboard. Locate the SSL option.

In the menu that allows users to choose the level of encryption, select the Full (strict) setting. This enables a secure connection between Cloudflare and visitors, and between the CDN and your server.

 

Next, enable ‘Always use HTTPS’ to serve all the content. On the Cloudflare dashboard, select the Always use HTTPS setting.

Save the changes and refresh the site to see if the mixed content warning still appears. For those unsure how to configure the SSL on a different CDN, check the CDN’s knowledge center.

Update the Content In Your Database Through Search/Replace

 

If the preceding tips didn’t solve the issue, update the database content through search and replace.

Open the phpMyAdmin and go to the WordPress database on the left. Select the SQL tab.

In the SQL query box write the following command:

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

The 'old URL' is the HTTP website address. The 'new URL' is the new HTTPS site address.

 

Don't forget to include the 's' in HTTPS. Confirm by clicking on GO.

Clear the cache and refresh the website. The mixed content error should be gone and all content served over HTTPS.

Ending thoughts on fixing the WordPress mixed content warning

Having a secure website brings countless benefits.

It protects your data from unauthorized access. It also creates a safe environment for visitors' sensitive information.

Additionally, pages that are not secure are automatically flagged by Google. This has a negative impact on SEO ranking.

To provide the best service, make sure to encrypt content with SSL. Keeping the certificate updated is also vital.

To prevent any Wordpress mixed content errors, check the site is correctly set up for HTTPS.

If the mixed content warning occurs, find the source of the problem. The Google Chrome Developer tools are a great help for this.

It may be necessary to replace HTTP with HTTPS in the WordPress Address and Site Address by hand. Remember to redirect all HTTP URLs to HTTPS.

Users might also need to configure their CDN settings. Or update the content in the database through search and replace.

These tips will help to make sure all your content is protected.

If you enjoyed reading this article on Wordpress mixed content errors, you should check out this one about failed to open stream error.

We also wrote about a few related subjects like WordPress post missed schedule, failed to load resource error, WordPress posting to Facebook done automatically, how to reorder pages in WordPress and WordPress updating failed error.

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 195,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.