Setting up a Secure Socket Layer (SSL) Certificate for your website is easier than ever. However, in some cases, you will go through the entire process only to generate a "mixed content" error in WordPress after the certificate is installed.

This particular error occurs if there is a problem with your HTTPS / SSL configuration. Specifically, this happens when WordPress does not load all your content via HTTPS, from where the "mixed content" part. In this article, we will discuss in more detail how WordPress mixed content error works and the causes of this error. We will then show you two ways to fix it.

Let's go to work!

What is the WordPress mixed content error is (and what are the causes)

  The mixed content error.

Mixed content An error has occurred because of an error in your SSL configuration.

We have talked a lot about SSL Certificates and HTTPS and there are several types of SSL Certificates that can get for your website. This tells the world that your website is not compromised and that any information that users will give you will be safe. However, after enabling HTTPS for your site, you may encounter an error, known as the WordPress error 'mixed content'.

This can happen when your site processes some, but not all, of its contents using the protocol. Most often, this content will include your images or scripts. Because your site uses "mixed" resources, this error will occur. If this happens, your website will not display the green padlock symbol for users and will make your site insecure.

It's pretty easy to know which elements of your website are still loading via HTTP. For example, if you're using Chrome, you can right-click on the page and use the Inspect option:

 Inspect a page using Chrome.

You can now use the Chrome Dev Tools search feature to search for the following string – src = "http." This will help you find any content that uses HTTP rather than HTTPS. is still loading via HTTP, there are two simple ways to solve the problem

2 ways to fix the WordPress mixed content error

There are many ways to fix this error. Plugins like SSL Insecure Content Fixer tend to work rather well, but we are supporters of a more manual approach when it comes to HTTPS. With that in mind, let's talk about two ways to solve this problem manually

1. Force WordPress to redirect all traffic via HTTPS

For this step, we assume that you have already configured WordPress to use HTTPS via your dashboard. If not, you can do this by going to the Settings tab> General. Once you are there, look for the URL Address (URL) and Site Address (URL) fields:

 Change the URL of your WordPress site.

You want to make sure the URL of your site uses HTTPS instead of HTTP on both of these fields. This step is sufficient if you start a new website. However, if you add SSL to an existing property, you will need to configure redirects using .htaccess so that your existing content does not continue to load via HTTP.

you will need to access your .htaccess file (pardon the pun) via FTP. We recommend to use FileZilla if you have not already set up an FTP client. Once you connect to your website via FTP, go to the public_html or root directory and look for the .htaccess file inside. Right click on it and choose the option that says View / Edit, which will open the file using your default text editor. Usually, a clean .htaccess file should look like this:

# BEGIN WordPress
& lt; IfModule mod_rewrite.c & gt;
RewriteEngine On
RewriteBase /
RewriteRule ^ index .php $ – [L] RewriteCond% {REQUEST_FILENAME}! -f
RewriteCond% {REQUEST_FILENAME}! -d
RewriteRule. /index.php [L] & lt; / IfModule & gt;
# END WordPress

What we are going to do now, is to rewrite this code, so when someone tries to access your site via a port that is not 403, the content what he wants to see will be loaded via HTTPS. Port 443 is the default for SSL traffic, so redirecting all other options supports all of our problems.

# BEGIN WordPress
& lt; IfModule mod_rewrite.c & gt;
RewriteEngine On
RewriteCond% {SERVER_PORT}! $ 443
RewriteRule (. *) Https: //% {HTTP_HOST}% {REQUEST_URI} [R=301,L] RewriteBase /
RewriteRule ^ index .php $ – [L] RewriteCond% {REQUEST_FILENAME}! -f
RewriteCond% {REQUEST_FILENAME}! -d
RewriteRule. /index.php [L] & lt; / IfModule & gt;

# END WordPress

This snippet uses a 301 or permanent forwarding for all traffic that is not routed through port 443. Using this type of redirection ensures that changes to your URL structure do not occur. Not affect your [Search Engine Optimization] (SEO) which is the key to established websites.

Keep in mind that some hosts make changes to your .htaccess file to implement advanced features, such as browser caching. This means that your file may include more code than the default WordPress extract. In this case, you will need to download a copy of the original .htaccess file as a kind of backup, which you can do by right-clicking on it and using the Download option in FileZilla .

Once you have backed up, add the code we provided to you before the #END WordPress line. Just make sure it does not interfere with the other files in the file making sure you paste it after the last tag you see, like this:

 An example of htaccess file. [19659002] Now save the changes to .htaccess and close the file. FileZilla will ask you if you want to update the version of the file on your server with the one you just edited. Answer yes and try loading your website again. If everything worked, you should no longer see the mixed content error.

You can still encounter the error if you use a caching plugin. If that's the case, make sure to clear your website's cache and try loading your website again.

2. Setting up your CDN to load your static content on HTTPS

In some cases, using a CDN may trigger mixed WordPress content error. This can occur when you configure an SSL certificate for a Web site that already has an active CDN. In this case, you will need to update the settings of your CDN to avoid such errors.

For example, let's look at Cloudflare . If you use this service to cache your WordPress website, you must go to your Cloudflare dashboard and look for the SSL Settings section. Here you will find a drop-down menu that lets you check how Cloudflare handles encrypted content. We recommend that you choose the parameter Full (strict) because the connection between your visitors and Cloudflare will be encrypted, as well as that of the CDN on your server:

 Adjust your Cloudflare SSL settings. [19659002] Once your CDN is configured to work with SSL. You must also make sure that all cached content is loaded via HTTPS. With Cloudflare, you can do this by enabling the Always Use HTTPS setting on the CDN dashboard:

 Setting Up Your CDN to Always Use HTTPS

Save changes to your settings now and reload your website, how much the error should no longer disappear. This process may differ depending on the CDN you are using, but you should be able to find more information on how to configure SSL in your CDN's knowledge base.

Conclusion

The WordPress mixed content error does not mean your SSL certificate does not work. It simply points to an error in the way WordPress uses the HTTPS protocol, which can be easily fixed. If you do not, your website could be hit by SEO penalties so this is something you should be dealing with right away.

You can solve this problem in two ways, depending on whether you use a CDN or not:

Configure your .htaccess file so that WordPress redirects all of its traffic over HTTPS.
Tweak settings from your CDN so that it loads static content over HTTPS.

Do you have questions about how to force WordPress to stream your content via HTTPS? Let's talk about them in the comments section below!

Article thumbnail image by Zhitkov Boris / shutterstock.com

The article 2 Ways to Correct Error WordPress Mixed Content appeared first on Blog of elegant themes .

Load More Related Articles
Load More By Amit Ghosh
Load More In Uncategorized

5 Comments

  1. Kritika Bhandari

    April 19, 2018 at 7:34 am

    I use the plugin “WordPress Force HTTPS” works perfect.

    Reply

    • Amit Ghosh

      April 19, 2018 at 9:01 am

      Hi Kritika,
      Thank you for this tip.
      I will add it somewhere in my future article updates.
      Regards,

      Reply

  2. Prachi

    April 20, 2018 at 12:03 pm

    I’m using SEMrush and getting these error messages, but all errors are external. Thanks for this article.

    Reply

    • Amit Ghosh

      April 20, 2018 at 12:37 pm

      Thank you, and glad to know that this helped you.

      Reply

    • Amit Ghosh

      June 13, 2018 at 3:48 am

      Thank you, I am Glad that you liked it.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

How to Add a Searchable Map Store Locator to Divi’s Handyman Layout Pack

If you have multiple stores, the addition of a store locator to your website can greatly e…