How to Fix Mixed Content Error in WordPress After Adding SSL Certificate

By WP Saviour •  Updated: 02/25/21 •  7 min read

The entire world is transferring their web sites from HTTP to HTTPS!

Why?

As a result of it makes their websites safe & rumor has it that engines like google favor web sites utilizing the “https” protocol.

Ultimately, you’ll be transferring your website to HTTPS. However earlier than you do, you should think about a couple of elements so as to make a profitable migration from HTTP to HTTPS.

On this article (& in upcoming articles), I’ll cowl migration strategies for various eventualities.

Right here’s our first situation:

On this case, my internet hosting folks configured a free SSL certificates from Let’s Encrypt.

Nonetheless, one massive draw back of utilizing Let’s Encrypt is the certificates expires in 90 days. So after each 90 days, you or your internet hosting folks have to renew the certificates.

Most paid SSL certificates keep legitimate for one 12 months.

Since I’m organising HTTPS for an information-based web site with no transactions, I choose the free answer over different paid SSL certificates.

Server admins can use Certbot for putting in an SSL certificates from Let’s Encrypt.

As soon as the certificates is put in, we have to configure HTTPS from CloudFlare & make some adjustments on our WordPress weblog.

Right here is how one can get began:

full-strict-ssl-cloudflare-6666030

Since I’m utilizing a Let’s Encrypt SSL certificates,  I chosen “Full”.

You probably have bought an SSL certificates from different locations like DigiCert, GeoTrust, or another, use the “Full (strict)” mode.

Full SSL: Encrypts the connection between your web site guests and CloudFlare, and from CloudFlare to your server.

Full SSL (strict): Encrypts the connection between your web site guests and CloudFlare, and from CloudFlare to your server.

various-ssl-cloudflare-7221961

As soon as that is enabled, you must open your web site in HTTPS mode.

Likelihood is you will notice an error (just like the one proven under).

The photographs can be damaged & you’ll get a warning for “blended content material”.

(I’ve talked about blended content material earlier right here.)

Let me shortly clarify “blended content material” for you:

Your web site is opening in HTTPS, however sources (like your photographs and theme information) are nonetheless utilizing the HTTP protocol. Since your website is utilizing two protocols, you’ll get this “blended content material” warning.

Check out these two photographs:

The primary one exhibits the “https” sign up crimson & with a line by way of it.

Clicking on the hyperlink on Chrome will convey up the developer console (as proven within the 2nd picture).

broken-image-https-issue-8770535

insecure-broken-https-3775705

You’ll be able to clearly see the warning for “Damaged HTTPS” & “Energetic Combined Content material”.

Fixing Combined Content material Warning in WordPress: CloudFlare customers

That is the place the actual work begins (& it’s going to be enjoyable)!

I’m assuming you might be utilizing CloudFlare to handle your DNS. (That’s how this information began! Isn’t it?)

Set up the official CloudFlare WordPress plugin & activate it.

Go to Settings > CloudFlare & configure the plugin.

Toggle “On” the choice that claims “Automated HTTPS Rewrites”.

cloudflare-automatic-https-rewrite-4172641

HTTPS Protocol Rewriting on this context converts hyperlinks inside your WordPress website to photographs, stylesheets, and scripts from utilizing both “http://” or “https://” to utilizing simply “//”. This rewrite tells your browser to load all of those property utilizing the identical protocol as the bottom web page loaded.

Now, refresh the homepage & you’ll discover the crimson bar has become a inexperienced bar (No warning!).

Additionally, all your WordPress damaged photographs have reappeared.

Imposing SSL for WordPress Admin Space:

As soon as we have now mounted the blended content material warning, now it’s time to configure the remaining for full migration.

Now we can be imposing our WordPress admin space to make use of the SSL protocol (HTTPS). For this, we have to edit the WordPress “wp-config.php” file.

For this, you should login to your Internet hosting utilizing FTP. (Here’s a information). On the root of your WordPress set up, you can find wp-config.php file. Earlier than modifying it, take a backup of the file.

Now, open the file & add under talked about command as proven within the screenshot:

outline('FORCE_SSL_ADMIN', true);

force-ssl-admin-3624037

 Change Web site Handle To “https”:

website-address-changed-to-https-9862819

It will guarantee all photographs & hyperlinks in your WordPress website open in HTTPS.

Nonetheless, the job just isn’t achieved but, as we nonetheless have to redirect all visitors coming from HTTP to HTTPS.

Redirect All WordPress Visitors from HTTP to HTTPS

This step depends solely on what sort of server you might be utilizing.

If you’re on common shared internet hosting like Bluehost, HostGator, and many others., you might be most certainly utilizing an Apache server. Most managed WordPress internet hosting makes use of the Nginx server.

You’ll be able to both edit the .htaccess” file your self or use this free plugin referred to as Actually Easy SSL.

really-simple-ssl-wordpress-plugin-2226074

This plugin works for each Apache & Nginx servers.

If you wish to do it with code, decide the one that matches your situation.

RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Moreover, you should utilize search & change – http://area.com to https://area.com. (This step is extremely beneficial)

Right here is an effective script that works fairly effectively. You’ll be able to observe these steps talked about by Brian to make use of this script.

search-replace-5572380

HTTPS Testing Device:

Now could be the time to check your implementation of HTTPS.

You should use this instrument to test your website.

Right here is the report from the WordPress website that I simply migrated to HTTPS:

ssl-testing-tool-4657788

Verify for SSL Errors:

That is one other helpful website that scans your web site for non-secure content material.

https-online-scanner-tool-4102110

Listed below are a couple of extra issues that you must do over the course of time:

Hope this lets you setup HTTPS in your weblog. Within the coming days I can be sharing extra eventualities for organising SSL certificates to your WordPress website. For those who haven’t downloaded our smartphone app, you must do it now to make sure you keep up to date.

gp-9609676 as-7114748

WP Saviour