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

The whole world is moving their websites from HTTP to HTTPS!

Why?

Because it makes their sites secure & rumor has it that search engines favor websites using the “https” protocol.

Sooner or later, you will be moving your site to HTTPS. But before you do, you need to consider a few factors in order to make a successful migration from HTTP to HTTPS.

In this article (& in upcoming articles), I will cover migration techniques for different scenarios.

Here’s our first scenario:

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

Let’s Encrypt + Nginx + CloudFlare : Scenario 1

In this case, my hosting people configured a free SSL certificate from Let’s Encrypt.

However, one big downside of using Let’s Encrypt is the certificate expires in 90 days. So after every 90 days, you or your hosting people need to renew the certificate.

Most paid SSL certificates stay valid for one year.

Since I’m setting up HTTPS for an information-based website with no transactions, I prefer the free solution over other paid SSL certificates.

Server admins can use Certbot for installing an SSL certificate from Let’s Encrypt.

Once the certificate is installed, we need to configure HTTPS from CloudFlare & make some changes on our WordPress blog.

Here is how you can get started:

  • Login to your CloudFlare account & select the website.
  • Click on “Crypto” & from the “SSL” tab.
  • Select either “Full” or “Full (strict)”.

Full Strict SSL Cloudflare
  • Save

Since I’m using a Let’s Encrypt SSL certificate,  I selected “Full”.

If you have purchased an SSL certificate from other places like DigiCertGeoTrust, or any other, use the “Full (strict)” mode.

  • Wondering what the difference is between the two?
    • Full (strict) checks for a valid certificate on your origin server, whereas Full checks for any certificate.

Full SSL: Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.

  • You will need to have an SSL certificate on your server. However, CloudFlare will not attempt to validate the certificate (certificates may be self-signed).
  • Visitors will see the SSL lock icon in their browser.

Full SSL (strict): Encrypts the connection between your website visitors and CloudFlare, and from CloudFlare to your server.

  • You will need to have a valid SSL certificate installed on your server, and the certificate must be signed by a trusted certificate authority.
  • Visitors will see the SSL lock icon in their browser.

Various SSL Cloudflare
  • Save

Once this is enabled, you should open your website in HTTPS mode.

Chances are you will see an error (like the one shown below).

The images will be broken & you will get a warning for “mixed content”.

(I have talked about mixed content earlier here.)

Let me quickly explain “mixed content” for you:

Your website is opening in HTTPS, but resources (like your images and theme files) are still using the HTTP protocol. Since your site is using two protocols, you will get this “mixed content” warning.

Take a look at these two images:

The first one shows the “https” sign in red & with a line through it.

Clicking on the link on Chrome will bring up the developer console (as shown in the 2nd image).

Broken image https issue
  • Save

Insecure broken https
  • Save

You can clearly see the warning for “Broken HTTPS” & “Active Mixed Content”.

Fixing Mixed Content Warning in WordPress: CloudFlare users

This is where the real work starts (& it’s going to be fun)!

I’m assuming you are using CloudFlare to manage your DNS. (That’s how this guide started! Isn’t it?)

Install the official CloudFlare WordPress plugin & activate it.

Go to Settings > CloudFlare & configure the plugin.

Toggle “On” the option that says “Automatic HTTPS Rewrites”.

  • Save

HTTPS Protocol Rewriting in this context converts links within your WordPress site to images, stylesheets, and scripts from using either “http://” or “https://” to using just “//”. This rewrite tells your browser to load all of these assets using the same protocol as the base page loaded.

Now, refresh the homepage & you will notice the red bar has turned into a green bar (No warning!).

Also, all of your WordPress broken images have reappeared.

Enforcing SSL for WordPress Admin Area:

Once we have fixed the mixed content warning, now it’s time to configure the rest for complete migration.

Now we will be enforcing our WordPress admin area to use the SSL protocol (HTTPS). For this, we need to edit the WordPress “wp-config.php” file.

For this, you need to login to your Hosting using FTP. (Here is a guide). At the root of your WordPress installation, you will find wp-config.php file. Before editing it, take a backup of the file.

Now, open the file & add below mentioned command as shown in the screenshot:

define('FORCE_SSL_ADMIN', true);

force ssl admin
  • Save

 Change Website Address To “https”:

  • After enforcing SSL for the Admin area, go to Settings > General (in the WordPress dashboard).
  • Change the WordPress & Site URL to “https”.

Website address changed to HTTPS
  • Save

This will ensure all images & links on your WordPress site open in HTTPS.

However, the job is not done yet, as we still need to redirect all traffic coming from HTTP to HTTPS.

Redirect All WordPress Traffic from HTTP to HTTPS

This step relies solely on what kind of server you are using.

If you are on regular shared hosting like Bluehost, HostGator, etc., you are most likely using an Apache server. Most managed WordPress hosting uses the Nginx server.

You can either edit the .htaccess file yourself or use this free plugin called Really Simple SSL.

Really simple SSL WordPress Plugin
  • Save

This plugin works for both Apache & Nginx servers.

If you want to do it with code, pick the one that fits your scenario.

  • For an Apache server, the redirection can be done by adding 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, if you are the admin, following this guide, or ask your server admin to do it for you.

Additionally, you can use search & replace – http://domain.com to https://domain.com. (This step is highly recommended)

Here is a good script that works pretty well. You can follow these steps mentioned by Brian to use this script.

Search & replace
  • Save

HTTPS Testing Tool:

Now is the time to test your implementation of HTTPS.

You can use this tool to check your site.

Here is the report from the WordPress site that I just migrated to HTTPS:

SSL testing tool
  • Save

Check for SSL Errors:

This is another useful site that scans your website for non-secure content.

HTTPS Online Scanner tool
  • Save

Here are a few more things that you should do over the course of time:

  • Add the “https” site in the Google Search Console & Bing Webmaster Tool.
  • Submit your sitemap.
  • Update all of your social profile links to point to the “https” site.
  • Use the Broken Link Checker plugin to find redirected internal links & fix them with one click.
  • Go to Google Analytics & update the site’s URL.

Hope this helps you to setup HTTPS on your blog. In the coming days I will be sharing more scenarios for setting up SSL certificate for your WordPress site. If you haven’t downloaded our smartphone app, you should do it now to ensure you stay updated.

Download Android app || Download iOS App

Subscribe on YouTube

  • Save
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

27 thoughts on “How to Fix Mixed Content Error in WordPress After Adding SSL Certificate”

  1. This is a great guide and to be honest I have recently moved to SSL and found all that difficulty and after reading so many articles online I was able to resolve that issue which you included in one post itself. If you would have written that before it would have saved at least 1 day of mine. This is good info for all those who want to move to SSL as surely they are going to face this issue.

  2. Really, this post was very important. Now a days, a huge number of bloggers including me are moving from http to https to give a more trusted connection to their readers. So, mixed content error is a common problem for them and me. Applying your given solutions, I have successfuly fixed all errors related to mixed content in my blog. Thanks for sharing the fix.

  3. Hello,

    this all appeared a bit technical until this amazing post by you.Step by step and to the point article. Thanks.

    Is SSL a search engine ranking factor ?

  4. I have one image that is referenced by http:// and is giving me an SSL warning. The other image are referenced by https:// how do I go about setting the one image to be https:// I can’t find it anywhere in the media settings in wordpress. I’m using latest wordpress and 3clicks theme.

    Thanks in advance.
    HARSH

  5. Hi there,

    Nice to see here the mention of ‘Search & Replace plugin’, I can remember it was only plugin which helped me in the crazy moment. I can say- this plugin would be most effective way to tackle the most of all HTTP link in one go. You should must try this plugin.

    At the moment, when I had switched to HTTPs, I found that Broken link check plugin is also good but it has some limitation and it’s time taking for fixing each link manually. Also, they can only can find with in the content, or some host like GoDaddy may won’t allow you to install.

    But, for checking all mixed content (HTTP) links in one click, you may use this online tool (https://jitbit.com/sslcheck/)
    I hope it would be very helpful.

    If you guys are going to switch to HTTPs today, here are my few suggestion for you:-

    Make sure to do proper HTTP to HTTPS redirection without creating long redirection chain/loop. Regarding proper .htaccess code your web host team can provide you. What anywhere it is mentioned may not work properly for you if server configuration is different. This issue I had faced, and totally it was fed up experience.

    Warning: If you are implementing relative URL in shortcut manner, make sure you DON’T set it anyhow for Canonical link and Social Meta Tags (FB Open Graph & Twitter Cards) else you will yourself invite a new problem related to SEO and not appearing images on social shared link.

    Today, I’m not using HTTPs due to some reason but in future, I really wish to go with it, because, I like Green lock and I love to give visitor an awesome experience. I want if they have land to my site, at least they keep remember my domain name for coming to next time, and for directly clicking in organic search first to my link 😀

    Thanks dear author, for sharing this high quality post, for a beginners it’s a great checklist.
    Sincerely,
    Gulshan

  6. Thanks to share with us

    I have one another error when domain is ssl certified.. it show there are two website and canonical not working here,,,

    Would you resolve it?

  7. After SSL has made a Ranking factor, I have also started using it but couldn’t fix the errors it caused. So removed it but will try it out now once again, Thanks.

  8. Hi Harsh,

    Great efforts but sorry I don’t prefer using CloudFlare as I saw 503 service unavailable couple of times. My hosting provider is better as its always up and running. So I think free SSL from CloudFlare or any other company will always give you this problem. So its better to buy it and not to affect your business.

  9. I so wish I had read this article when I was setting up my website! It would have helped to know how to fix these issues with ssl certificates. I wasted two days understanding how to fix these issues when answer was right here.

  10. Hi Harsh i also want to setup ssl in my site but Always getting mix content error and my site ll break. Any Solution. and cloudflare plugin is updated please update your post thanks 🙂

  11. Hello;

    So what if we are not using Cloudflare? i use linode DNS and Namecheap premium DNS how do i fix the mix content error?

  12. Hi Harsh,

    I have Cloudflare SSL, however I am getting mixed content error on Chrome. I was unable to fix with the above steps on this blog. Any other option that was missing in here which I should try.

    Please advise.

  13. Hallo Harsh. I’ve tried this way. It’s been going well, but there are some of my web pages that have lock keys. Now I am returning to http mode.

    But in some web running smoothly in the way above. Thank you for the help.

    Sorry for the language. : D

Leave a Comment

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

Scroll to Top
184 Shares
[i]
[i]
[i]
[i]
Share via
Copy link