How to Fix the WordPress HTTPS Mixed Content Warnings?

Are you worried about the mixed content errors in WordPress? The incorrect HTTPs/SSL settings cause the WordPress HTTPS Mixed content. Many times the functionality of your website is not affected but can have some adverse effects on the SEO of your website and user experience.

As said in the first line, if you are worried about the WordPress HTTPs mixed content, then no more to worry. This article gives you specific tips on how to fix the mixed error content in WordPress.

But before that, you need to know what WordPress HTTPS mixed content is? Let us see how.

It is always recommended to add HTTPS/SSL in WordPress. This is because Google Chrome has marked all the HTTP versions of the website as insecure after July 2018.

Whenever your WordPress site is loading both HTTPS and HTTP script and the content at the same time, you get a mixed content warning in your browser. One cannot load both at a time as they are entirely separate protocols. Whenever you migrate to HTTPS, everything must be run over HTTPS.

SSL adds an additional security layer around the data transferred to users from the website by adding an extra security layer around data transferred from your website to browsers for users. On your website, search engines such as Google recommend using SSL.

As part of their packages, all the WordPress hosting companies now offer free SSL. If this is not provided by your hosting company, then you can get free SSL for your WordPress site through “Let’s Encrypt”. If you have implemented SSL correctly on your website, you will see in the browser address bar with a green padlock icon next to the URL of your website.

Now let us see what SSL certificate is?

Secure Socket Layer (SSL) acts as the intermediate layer between the browser of the visitor and the server hosting a site. People always share their personal information and the credit card details while browsing the internet. This is where SSL helps to protect our privacy and to ensure security.

Once we know what an SSL Certificate is, the next thing we need to know is how vital SSL Certificate is? Let’s see it below.

Importance of SSL Certificate
The SSL Certificate is rapidly growing, and everyone is switching to the HTTPS protocol. Why so?
It is because:

• SSL is a ranking factor that decreases the cart dropout rates
• SSL Certificate helps in avoiding the “Not-Secure” warning

SSL is a ranking factor
Google has introduced to its SERPs (Search Engine Results Pages) the use of SSL certificates as a ranking parameter along with the site speed. The use of an SSL certificate can, therefore, help to boost ratings and strengthen SEO.

It decreases the cart dropout rates
Having a green padlock icon on the address bar with a “Secure Connection” message helps in gaining the confidence of the visitors. Visitors become more confident once their trust is built,and they will buy their products without worrying about data theft.

SSL Certificate helps in avoiding the “Not-Secure” warning
In September 2016, Google Chrome did announce that it would be showing a “Not Secure” warning on the pages without SSL Certificate. Those having the SSL Certificate won’t be able to see the SSL Certificate.
Now let us see different types of SSL Certificates.

Types of SSL Certificates

1. Domain Validation (DV): The Domain Validation certificate verifies that you are the owner of any particular domain.
2. Organization Validation (OV): The Organization Validation certificate confirms the domain by proving that your organization is legitimate.
3. Extended Validation (EV): The Extended Validation certificate offers the highest level of security assurance for all your customers. All the applicants pass via a strict vetting process.

Once you go through all the above SSL Certificates, you need to choose one according to your choice. This was a little introduction of the SSL certificates. Now, let’s see the installation of SSL Certificates via “Let’s Encrypt.”

Let’s Encrypt is a free SSL certificate provider at the domain level. It is funded by the Research Group for Internet Security (ISRG). It is free, automated, and was released in April 2016 as an open certificate authority.

The right time to renew the SSL Certificate
The “Let’s Encrypt” certificate has a ninety days expiry date. Whenever the SSL Certificate is expired, you can restore it. One can also find the hosting providers who have a built-in feature for renewing the SSL Certificates automatically.
Let us now see the installation process of “Let’s Encrypt.”

Below is a step-by-step process of installing the free SSL Certificate on your website.

Is Your Web Hosting Supported?
Yes. Looking at the importance of SSL security, many web hosting providers support the SSL integration on a single click.

Install the “Let’s Encrypt” SSL Certificate Manually
One must have control over the entire shell access and the server. Once you have the shell access, you need to install the CertBot on your computer for uploading new files on the server.

Although this is a bit complicated process, it might take a few hours to complete. The best approach, in this case, is to go to the manual route via SSL for a Free website.

Installing “Let’s Encrypt” SSL for free
Given the difficulties of incorporating a Let’s Encrypt certificate into your WordPress page, people have created an online resource that removes the battle. Enter the URL of the page and follow the steps given. This way is much more comfortable and requires only about 10 minutes to complete.

Once you have installed the SSL Certificate, the next step is to configure the other required steps for integrating the SSL Certificate properly.

Changing Internal URLs from HTTP to HTTPS
Once you install the SSL Certificate, you can use HTTPS on the site. Next, you need to log in to your WordPress dashboard, navigate to Settings > General and then replace HTTP with HTTPS on the “WordPress Address” and “Site Address” as shown below.

Redirecting HTTP to HTTPS
Every URL of a WordPress site is served via HTTPS in the above step. The visitors visiting the website with “yoursite” will not help the HTTPS pages. This is because you haven’t set any rules to redirect the HTTP to HTTPS. One should also require a rule in the WordPress .htaccess file, which forces the WordPress site to use the HTTPS protocol.

You are required to log in to your hosting plan, and on the WordPress directory, you need to right-click on the .htaccess file and then click on Edit tab or create a new one if one does not exist.

To create one, you need to add the below lines of code if you are a NGINX :
server {
listen 80;
server_name yoursite.com www.yoursite.com;
return 301 https://yoursite.com$request_uri;
}
Wherever it is mentioned yoursite, see to that you put proper site address and if necessary change the port.

Most of the WordPress users are not used to .htaccess file. Alternatively, you can make use of WordPress force https plugin. This WordPress force https on each page of the WordPress site.

Once you are done with all the changes and improvements for fixing the Mixed Content warning on WordPress, in the next step, you need to visit your WordPress site and check if everything is working correctly. You can check the same with the mixed content checker.

With “Search & Replace.”
On a few pages, one might see an info icon other than the green padlock. This indicates that one or more URLs serve via HTTP on relevant pages. You need to identify the URLs and also fix them as all these WordPress HTTPS mixed content issues won’t be suitable for the visitors.

For replacing the URLs, there exists one plugin, namely Search & Replace, which helps in restoring the HTTP with HTTPS in the database. This, in turn, also helps in replacing the Media URLs to HTTPS.

For installing the plugin from the WordPress dashboard, you need to navigate to Tools > Search & Replace

SSL Insecure Content Fixer
First thing, you need to install the SSL Insecure Content Fixer plugin and activate it. After activation, you are required to visit the Settings >> SSL Insecure Content page for configuring the plugin settings. The above plugin provides various levels of fixes to mixed content error. Each one of them is explained below. You can go through it and decide which is best for you.

1) Simple
For all beginners, this is the fastest and most recommended process. This addresses the mixed content error of scripts, stylesheets, and WordPress media library images in WordPress automatically.

2) Content
If the simple method on your website does not correct the mixed content problem, then try this method. In addition to checking for improvements inside WordPress content and the text widgets, it will use all the features.

3) Widgets
It includes all changes made to the level of material plus an additional update for tools loaded on your website in all WordPress widgets.

4) Capture
This method captures everything from header to the footer on each page of your website and replaces all URLs with HTTPs. It’s slower and would impact your website’s efficiency.

5) Capture all
If all the above rates fail, then this approach can be attempted. It tries to fix everything on your website that can lead to some unexpected behavior. It will also have the worst quality effects.

You must scroll down to the HTTPS detection tab after selecting a content repair stage. This is where you can pick how to detect your website’s HTTPs content. The default option for most websites is to use a WordPress feature that would work.

Go ahead and choose the method you think will apply to your website, depending on your specific setup. To save your settings, do not forget to click the Save Changes button.

You can go ahead and select various methods that you think are best suitable for your website based on your particular set up. Hence, never forget to click on the save changes button for storing your settings.

One can also visit your website and see if this has resolved your insecure content issues on the site. Always make sure you clear the WordPress cache before you check the website.

Even after implementing all the above methods, do you still get the WordPress HTTPS Mixed Content Warning? There are various reasons why one can still get the Mixed Content Warning. Few ideas are mentioned below:

1) HTTPS Links in CSS and JS Files
Whenever you write the code of plugins and themes, the developers code the HTTP links instead of HTTPS. One can also fix it manually by separating the code. Whenever you replace the URL, you need to check whether your new URL works well with HTTPS.

2) The Hot Linked Images
Hotlinking is a process to call images from different resources. If the remote source is HTTPS-enabled, one should use the URL with HTTPS.

3) CSS and JS files must be included from the other domains
Similar to hotlinking, if you call any data from the other external resources, you need to make sure the URL is working with HTTPS.

By now, you must have successfully added an SSL Certificate to the WordPress site and must have learned to fix the issues.
At the end of this post one can successfully add the SSL Certificate to the WordPress site and must have also learnt on fixing the issues.

Final Thoughts
We hope you learned how to correct the mixed content error in WordPress with this post. So, don’t worry anymore; whenever you get the WordPress HTTPs mixed content error, refer to this article and solve the mistakes in a hassle-free manner. So, what are you waiting for? Start using the SSL Certificates on the websites and always be ahead of all your competitors.