BlogWordPress Hosting

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

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.

  • The SSL certificates you might be utilizing.
  • What server architect you’ve (Apache or Nginx).

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

Right here’s our first situation:

  • The positioning is hosted on a Nginx server.
  • DNS is managed by CloudFlare.
  • SSL certificates by Let’s Encrypt.

Web page Contents

Let’s Encrypt + Nginx + CloudFlare : Situation 1

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:

  • Login to your CloudFlare account & choose the web site.
  • Click on on “Crypto” & from the “SSL” tab.
  • Choose both “Full” or “Full (strict)”.

Full Strict SSL Cloudflare

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.

  • Questioning what the distinction is between the 2?
    • Full (strict) checks for a legitimate certificates in your origin server, whereas Full checks for any certificates.

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

  • You will have to have an SSL certificates in your server. Nonetheless, CloudFlare is not going to try to validate the certificates (certificates could also be self-signed).
  • Guests will see the SSL lock icon of their browser.

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

  • You will have to have a legitimate SSL certificates put in in your server, and the certificates have to be signed by a trusted certificates authority.
  • Guests will see the SSL lock icon of their browser.

Various SSL Cloudflare

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

Insecure broken https

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”.

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.

  • Right here is the official Cloudflare useful resource to study extra about HTTPS Protocol Rewriting.

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

  • Right here is the official useful resource to study in regards to the SSL_Admin space.

 Change Web site Handle To “https”:

  • After imposing SSL for the Admin space, go to Settings > Basic (within the WordPress dashboard).
  • Change the WordPress & Website URL to “https”.

Website address changed to HTTPS

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

This plugin works for each Apache & Nginx servers.

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

  • For an Apache server, the redirection may be achieved by including the redirection code in your .htaccess” file:


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

  • For a Nginx server, in case you are the admin, following this information, or ask your server admin to do it for you.

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

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

Verify for SSL Errors:

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

HTTPS Online Scanner tool

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

  • Add the “https” website within the Google Search Console & Bing Webmaster Device.
  • Submit your sitemap.
  • Replace all your social profile hyperlinks to level to the “https” website.
  • Use the Damaged Hyperlink Checker plugin to seek out redirected inside hyperlinks & repair them with one click on.
  • Go to Google Analytics & replace the location’s URL.

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.

Download The WPSaviour App Now

Related posts
BlogTutorials

Installing WordPress on Sub-Domain with Kinsta Hosting: Tutorial

BlogTutorials

How to Setup CloudFlare Free CDN in WordPress

Best WordPress PluginsBlog

How to Fix the Mixed Content Error in WordPress (Step by Step)

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro