As the use of the Internet has increased, so has cyber crimes. As with the worldly measures to protect crimes, there are also online methods to safeguard against cyber crimes especially in the world of online business. One such method is using Secure Socket Layer or SSL which protects the data of the users. Therefore, adding SSL (Secure Socket Layer) has become indispensable for protection of critical data of users.
Before we actually dive into the topic, a little background on SSL is necessary because it will clear any confusions that you may have as we move forward with the topic.
What is an SSL Certificate?
We browse the internet where we share private and confidential information such as credit card numbers, passwords, etc. Therefore, SSL or Secure Socket Layer comes into play to safeguard your privacy and strengthen security as the middleman (between the browser you’re using and the server where your site is being hosted).
Not all websites have SSL protection. That is why, SSL-Protected websites always load after HTTPS (HyperText Protocol Secure) marked by a padlock icon. This is the real-time indication that the transmission of data between the visitor and the server is fully encrypted(See image below):
There are three main types of SSL certificates that companies use to secure their websites. These are:
- Domain Validation (DV)
This certificate verifies that you own the domain. - Extended Validation (EV)
This certificate generates the highest security where all applications have to pass strict scrutiny for maximum protection. - Organization Validation (OV)
This certificate works to verify your domain as well as assure that your organization/website is legitimate.
Now that you have an understanding of the concept, let’s add other elements in this such as WordPress websites and HTTPs and its impact on both.
Concept of SSL in WordPress Websites
In 2018, Google started marking all HTTPs versions of websites, whether WordPress or any other platform, as insecure. This is because, as mentioned in the introductory premise, to provide security to the users of the website. Therefore, it sort of became mandatory for all websites including WordPress websites to have an added layer of security in the form of SSL.
This is the simple version of it.
The more complex version includes actually adding the SSL certificate which is a bit of a technical process that can cause numerous errors in the functionality of the website. As with many errors associated with WordPress websites, when you try to apply or add an SSL certificate to your WordPress website, it usually gives an error of having mixed content. Now, bear in mind that, this error is majorly associated with WordPress and not any other website developing platform.
So, what does this mean for your WordPress website?
Ramifications of Mixed Content Error
The mixed content error does not directly affect the functionality of the website but it can have some adverse effects on the user experience and ultimately the SEO rankings of your WordPress website.
No worries here!
Fixing mixed content errors in WordPress websites is something of a specialty for us. But, before we get into that, you need to know where and how this error originates so that you can fix it (assuming you are doing this on your own and are a developer yourself).
What does it mean by WordPress Mixed Content SSL Warnings?
There are two situations – First, if you have successfully installed an SSL certificate on your site built on WordPress, a green padlock icon should be visible in the address bar when you visit your WordPress website. This means that you do not need to worry about Mixed Content Error occurring.
Second, if you are unsuccessful in properly configuring an SSL certificate on your WordPress website, you will see an info ⓘ icon like in the picture below.
This means that even though your website might be using an SSL certificate, most of its content is not secure therefore, it is considered as an unsuccessful installation by Google and the icon appears.
When this happens, the ‘mixed content error’ appears in the code console as a warning for all the items that are considered as unsecure. Now the question is how can you locate all the warnings.
Let’s answer the question in the next section.
How to Locate Mixed Content Errors in WordPress?
You can use multiple ways to determine mixed content errors on your WordPress site and, particularly, what assets you are loading over HTTP. Here are two ways you can do so:
1. Chrome DevTools
The first thing you can do to diagnose mixed content errors is to check it with the help of Chrome DevTools: a set of web developer tools.
- In order to locate mixed content errors in WordPress, open your WordPress site in Google Chrome.
- Now, right click on the page where you’re seeing ‘warning message’, and then select ‘Inspect’.
- Now, you will see that your browser has detected and flagged anything that will be listed under the ‘Console tab’ displaying mixed content warning in yellow where the SSL certificate is not configured properly (look at the image below)
2. SSL Check by JitBit
You can also diagnose the error by using the SSL Check plugin by JitBit.
- Using this tool, type the URL of your website in the text field of this tool and press ‘Check for SSL Error’.
- It will scan your website immediately to display all non-HTTPS URLS.
- It will then display a list that can be really helpful in detecting insecure content that cause mixed content SSL warnings for your website (see image below):
Now that you have uncovered where the problem exists, it is time to fix it, which we will in the next section!!
What are the Four Best Steps to Fix Mixed Content Errors in WordPress?
Since the matter is technical in nature, the fixes are also the same which we have tried to present in a simple fashion. There are 4 ways to fix mixed content errors in WordPress – timely and effectively in our expert opinion:
- Change your WordPress Internal URLs from HTTP to HTTPS
- Make sure you are using a Valid SSL Certificate
- Redirect your HTTP to HTTPS
- Find and Replace Links in your Content
Starting with the first one in our list….
1. Redirect Your WordPress Internal URLs from HTTP to HTTPS
- Log into your dashboard, navigate to Settings>General
- Now, replace HTTP with HTTPS in the text field next to WordPress Address (URL) and Site Address (URL) — Check an image below to get clarity:
- Once you’ve completed this process; click on the ‘Save Changes’ button.
- Ultimately, you’ll see each URL of your WordPress site will be served via HTTPS.
2. Make sure -- You’re using Valid SSL Certificate
Ensure that the SSL certificate you installed in your website is valid and updated. In order to find out the status of your SSL certificate — click on ‘padlock’ in browser’s address bar. And, now, select Certificate(valid). See an image given below:
You will see ‘Certificate Viewer’ opened on your screen where you can review the details about your SSL certificate. It includes issuance and expiration dates:
If your certificate has expired, renew it. If it is already renewed, then try to fix the issue by using any other method mentioned in this section.
3. Implement a Rule to Redirect your HTTP to HTTPS
In order to properly install the SSL certificate, you need to redirect your http to https to automatically send your visitors to the secured version of your pages. If you have not done so, then the mixed content error will show up.
To be able to send visitors to the secured version of your WordPress website, you’ll have to add a rule in the .htaccess file of your website to force WordPress to employ HTTPs.
First, access your site’s file through the File Manager tool of your web host or with the help of File Transfer Protocol (FTP). Second, look for the directory which contains WordPress core files (public-html) and right-click on the .htaccess file. Third, click on ‘Edit’:
Put the following lines of code within the file if you are using Apache as your server:
IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.mysite.com/$1 [R,L]
</IfModule>
NOTE: Make sure to replace ‘https://www.mysite.com’ with your own domain.
In case, if your hosting provider utilizes NGINX, then you will have to add this rule instead:
server {
listen 80;
server_name yoursite.com www.yoursite.com;
return 301 https://yoursite.com$request_uri;
}
BONUS TIP:
If you can’t access .htaccess file, use the plugin- WP Force SSL & HTTPS Redirect. This plugin implements SSL on each page of your WordPress website automatically. Just install and activate this plugin. It will help you locate settings from the dashboard. (Settings > Force SSL).
4. Find and Replace Links in your Content
This is the last step to fix WordPress mixed content SSL warnings. You will have to find links in your WordPress database and content. Once you do, replace them with HTTPS instead of HTTP. Well, if you want to save time and energy, use a plugin to fix this error — Better Search Replace
When you install and activate this plugin on your WordPress website, navigate to Tools > Search and Replace from your dashboard. Add HTTP version of your website (http://xyzdomain.com) in the Search field and the HTTPS version (https://xyzdomain.com) in the Replace with field:
In this step, choose all the tables of the WordPress database and select ‘Run as dry run?’ option:
When you’ve done it — click on the Run Search/Replace button which you can see at the bottom of your screen. When you’ve cleared your browser’s cache, now revisit your website to make sure that it’s not showing any WordPress mixed content warnings at all.
There. Done and Dusted !!!!
Was it Hard to Fix WordPress Mixed Content SSL Warnings?
We know today’s topic was a bit technical but it was necessary to cover it because of the numerous errors that are arising in WordPress websites. Moreover, dealing with SSL certificates is now a necessity because of search engine rankings.
At any point, if you think that this is all too much information, or you need more information, our experts will be more than happy to guide you.
