Mixed Content Error in WordPress

Steps to Fix Mixed Content Error in WordPress


Know how to fix Mixed Content Error in WordPress? – First know what is a mixed content issues, is warning appears in a user’s browser when the WordPress site is loading both HTTPS and HTTP scripts or content at the same time. In other words Secure and non-secure content, or mixed content, means that a web-page is trying to display elements using both secure (HTTPS/SSL) and non-secure (HTTP) web server connections.

It is highly recommended to add HTTPS/SSL in WordPress because after July 2018 Google Chrome will mark all HTTP versions of website as insecure. All best WordPress hosting companies are now offering free SSL as part of their packages. If your hosting company doesn’t offer that, then you can get free SSL through Let’s Encrypt for your WordPress site.

How to Fix Mixed Content Error in WordPress

There are two simple steps to do that 1st is Use the WordPress Dashboard and a 301 Redirect and 2nd is using WordPress SSL Plugin.

1. Using WordPress Dashboard and a 301 Redirect

In any case, your first step should be to go to your dashboard and open up the Settings › General tab. Inside, you’ll find two fields called WordPress Address (URL) and Site Address (URL). Your website’s address should appear identical in both, and should use HTTP.

  • What you need to do is replace that HTTP prefix with HTTPS in both fields, and save the changes to your settings: That’s all it takes to configure WordPress to use HTTPS.
  • Open your admin panel using Ftp filezilla or panel.
  • Once you connect to your website via FTP or c panel, navigate to the public_html folder and look for the .htaccess file within.
  • Open the .htaccess file and and paste in the following snippet
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yoursite.com/$1 [R,L]

For this to work, you’ll need to replace the placeholder URL in this code with your website’s full HTTPS address

2. Install a WordPress SSL Plugin

If you do not work directly with your WordPress files, there are easier ways to enforce HTTPS use throughout your website. For example, you can set up a WordPress SSL plugin, which adds the same code we showed you in the previous method.

We recommend Really Simple SSL, since it’s remarkably easy to set up. All you need is a WordPress SSL certificate ready to go. Once you install and enable the plugin, it will scan your website for a WordPress SSL certificate.

If it finds one, it will help you enable HTTPS throughout your entire site with a single click. To do this, just visit the new Settings › SSL tab in your dashboard, and click on the Reload over HTTPS button. With that, you’re good to go.

Some Assets Aren’t Loading Over HTTPS ( Common Issues )

After enabling HTTPS for your website, you might find that some of its assets, such as images, aren’t loading properly. That’s because WordPress is still using the HTTP prefix for them instead of HTTPS.

If you find yourself having this problem with your site’s images, CSS, or JavaScript, the easiest way to solve it is to make a few additions to your .htaccess file. However, this approach only applies if you used the manual method during the previous section. We’ll talk about what to do if you used a plugin instead in a minute.

Access your website via FTP or c panel again, and look for the .htaccess file within the public_html directory. Open it up, and find the code you added earlier to force a 301 redirect, which should look like this:

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

Change this to below mention code and save it

<IfModule mod_rewrite.c>
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]

This code does is force all traffic to load over HTTPS. It also includes rules for your WordPress assets, so it should take care of all the files that weren’t working. After adding it in, save your changes to the .htaccess file and upload it back to the server.

Note: If you configured your website to use HTTPS via a SSL plugin, you shouldn’t need to tweak your .htaccess file manually.

For More: visit here

Also Read:-