2 Ways to Fix the WordPress Mixed Content Error

Posted on April 18, 2018 by in Tips & Tricks | 23 comments

2 Ways to Fix the WordPress Mixed Content Error

Running a website today requires a secure connection between you and your users. This connection is done via SSL certificate, and it is actually pretty easy (and free) to install on your site. Most web hosts offer free Let’s Encrypt certificates and renewal that can be installed with just a few clicks. Installation, however, isn’t the final step. However, mixed content is a common issue when setting up SSL, and it’s not a big deal. We can show you how to fix the mixed content error in WordPress easily and get your site fully secured.

What is the Mixed Content Error in WordPress?

Essentially, the mixed content error is when your WordPress site delivers some of the resources securely by HTTPS and some insecurely by HTTP. Sometimes, bits of that mixed content won’t even show up, making your site appear broken in any number of ways. This is obviously bad for a few of reasons.

The first being that Google penalizes any site that it deems insecure, both warning users as they click into the site that your site could be home to any number of internet evils. Chrome users will get a double-dose of this as the browser itself warns of potentially dangerous sites.

The second is that Google and other search engines will penalize your site in the rankings both for having an insecure site that could potentially contain malware, but also for having a poor user experience with content simply not loading.

Add in that mixed content errors on WordPress sites can severely impact load times, and you’re hitting a trifecta of reasons users and search engines alike will avoid your site like the plague. Because to them, your site appears like it is or has the plague itself.

So how do you keep this from happening and your site becoming a pariah in Google’s eyes?

How to Fix the Mixed Content Error in WordPress with a Plugin

It’s actually relatively simple to fix a mixed content error in WordPress. Because of the customization and flexibility in the platform, basically any problem you can have has been solved by a plugin developer. You just have to know where to search. For most sites, being able to quickly install and configure a plugin is the best solution.

ssl insecure content fixer by webaware

We recommend checking out SSL Insecure Content Fixer by WebAware. Simply installing and activating the plugin can potentially fix any mixed content errors showing on your WordPress site. It handles, as the WordPress.org plugin description puts it, “some basic fixes on  your website using the Simple fix level.” If you need more than that, the plugin has a more advanced settings page where you can tweak what needs to be secured.

You can find the settings under Settings – SSL Insecure Content in your WP admin panel menu. Note that the Simple selection is already enabled.

simple mode active

Most of the time, this works. To make sure it’s working, we highly suggest running a page speed test on GT Metrix or Pingdom. While these tests are pretty fantastic on their own to help with identifying errors on your site, they both report on insecure/mixed content. So if you do have anything amiss, one of them will tell you.

We have had luck using this plugin to fix the errors using everything except Capture All. In our experience, the AJAX calls being automatically fixed has tended to break site functionality. However, each of the other options has fixed anything that GT Metrix or Pingdom found.

The biggest issue with using a plugin like SSL Insecure Content Fixer is that if you deactivate the plugin, there’s a chance the mixed content fixes will deactivate as well. If this is a potential issue for you, we have a solution for that, too.

How to Fix the Mixed Content Error in WordPress Manually

WordPress, like any other major web app, is really just a database on a server. If the resources in that database are still marked as HTTP and the browsers are calling for HTTPS…that’s a mixed content error. Luckily, there are pretty easy fixes you can perform manually, too.

Find & Replace in your WP Database

While this does involve a plugin, too, it’s only for the actual functionality and can be disabled afterward. Find the Better Search Replace plugin on the WP.org repository.

mixed content error wordpress find and replace

search and replace to fix mixed content error

Under Tools – Better Search Replace, you’re going to be searching for insecure instances of your domain name and replacing them with HTTPS versions. So simply enter http://yourdomain.com and https://yourdomain.com in the Search For/Replace With fields (2).

Then, choose which database tables you want to include in the search. In general, this will be all of them. So click the top, scroll to the bottom, and shift-click the last one. This will highlight all the tables in the list (3).

We suggest enabling the Run as Dry Run option. Doing so will have the plugin perform all the actions, but not actually save the changes. It will report on anything it finds.

search and replace results report

If you like what you see, uncheck the dry run box and run it for real. Before doing so, however, we highly suggest backing up your site and database. Any time that you even think about touching your database, back it up. A corrupted or mishandled database is one of the hardest things to fix in all of WordPress.

You can also do this same process through phpMyAdmin in your hosting dashboard, but it doesn’t have the dry run feature and requires a lot more technical knowledge to implement. So we suggest the plugin method for most people.

Altering the .htaccess File

Your website’s .htaccess file is responsible for directing traffic and allowing, well, access to elements of your site. You can force HTTPS on your site’s resources by adding a few lines to your .htaccess file using either FileZilla (or another FTP client) or from within your host’s dashboard file manager.

Basically, you’re going to up redirects using .htaccess, so your existing content doesn’t continue to load by HTTP.

To do this, navigate to the /public_html or root directory and look for the .htaccess file within. Right-click on it and choose the option that lets you edit the file, which will open the file using your default text editor if you’re using FTP or an integrated editor if you’re using your host’s dashboard.

edit .htaccess to fix mixed content error in wordpress

Inside, you will past the following code between the final </IfModule> tag and the line that reads # END WordPress.

<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
</IfModule>

mixed content htaccess code

Word of advice here, too. Download a backup of the current .htaccess file just in case these changes make something go awry.

If things work like they should, you should no longer see the mixed content error. However, you might still run into the error if you’re using a caching plugin. If that’s the case, make sure you empty your website’s cache and try loading your website once more.

Wrapping Up

If you or your users are getting the mixed content error in WordPress, it’s not as scary as it sounds. In fact, it’s one of the easier WordPress error messages to fix. Whether you prefer plugin fixes or digging into your WordPress core files, getting rid of the mixed content error on your site is simple, quick, and easy.

What have been your experiences with mixed content errors?

Article featured image by Ksusha Dusmikeeva / shutterstock.com

Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Posted on May 7, 2019 by in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post

23 Comments

  1. I did not know about mixed content error..thanks for sharing with us.

  2. I have this problem on lots of sites where I have enabled a certificate for SSL after the site has been created on an http:// base. You can also backup and restore the site using a backup plugin that enables the root of the site to changed (cloning) and restoring the site to https://…. Updraftplus will do this for you in a couple of clicks and rewrite all of the references.

  3. Hi John,

    Testing this out on my site. I see no issues, which is good but I have been trying to get this correct for a while.

    Before converting to https I was getting a Good 5 second result on Google’s test site for mobile. With it enabled, a little slower but not a complete https i.e. a partially secure site according to Chrome. Looking around I tried the Really Simple SSL plugin and while this did give me a fully secure status my results on test site for mobile go down to Poor 11 seconds.

    I now have disabled and removed the Really Simple SSL plugin and am trying your solution but I am back to seeing the advisory beside my url in Chrome:

    Your connection to this site is not fully secure

    Attackers might be able to see the images that you’re looking at on this site and trick you by modifying them.

    • Ok. A bit of perseverance pays dividends : ) I did a test on Pingdom and it threw up a list of images in my slider that were flagged as redirects. So I dumped these and uploaded and now I am fully secure according to Chrome.

      Thanks John for spurring me into checking this out. It’s been bugging me for the last number of weeks and now using your solution, no extra plugins required.

      • No problem, Stephen. Happy to help. 🙂

  4. Thanks for this.
    I have run into this quite a bit as I try to move all my clients to https.

    Personally I don’t like messing around with code and I’ve tried a few different plugins to help me.

    I was using a plugin to fix insecure content (usually images) but lately I’ve been relying on a plugin called “Really Simple SSL” which as the name implies turned out to be really simple.

    Might be an option for the code writing adverse.

    ernie

  5. Thanks John, good pointers which would have helped me save a lot of time about a year ago when I started implementing SSL for all my WordPress websites.

    You may wish to add a note about WordPress sites using PayPal where you can ‘force SSL’ connection to PayPal which may make the online purchase process more trustworthy from a viewer’s perspective.

  6. Hello,

    The .htaccess rule; HTTP_HOST and REQUEST_URI are not secure and can be spoofed in the header information. Better hardcode the domain name, and not use REQUEST_URI!

    When setting both:
    WordPress Address (URL)
    https://www.wp-perfecto.org

    Site Address (URL)
    https://www.wp-perfecto.org

    The .htaccess rules are not necessary.

    With mixed content, look at the source code in the browser (Ctr + U).

    Search for http:// (Crt + F)

  7. I use the Simple SSL plugin. So far no issues of any kind.

  8. On some sites I can’t use SSL on all the pages. On a realtor’s site, the page that has an iFrame for their listings can’t be SSL or it will throw a warning. That’s because the listings come from a huge company that serves many realtors, and they don’t use SSL yet. So trying to make that page SSL is not feasible at this time. On a bed and breakfast’s site, the reviews come from another huge company, and their feed is also not SSL.
    For those two sites, I’m having success using the Really Simple SSL Per Page plugin, which allows me to specify certain pages as not being SSL. Those still get the little unlocked icon, etc. but they don’t flag a warning that we’re trying to pass off non-SSL content as SSL.
    I think the plugin sells for $29 for one site, or a license for 5 sites for a little over double that.

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

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

    • You’re welcome, Kritika. 🙂

  11. I used the WP plugin “Search & Replace” to replace my http:// files to https://. It worked fine.

    • Hi,
      My problem is resolved, thank you.
      Have a nice day.

  12. Hello, i have another problem. I have installed my HP in another directory. ex. http://www.domain.de/test
    It is not realy work now. Have someone an Idea?

    Tom

    • Hello Thomas.
      I’m afraid I’m not clear what you are referring to when you say HP. Can you provide more specific information about what the issue is?

  13. After following the rules listed in the tutorial, I am now getting a 500 internal server error.

  14. Thank you for the article, really explicatory!

    • You’re welcome. Happy to help 🙂

  15. These suggestions are fine, but there are additional issues with Divi that anyone will have moving to ssl:
    1) logo and favicon urls are absolute by default and need to be updated;
    2) any custom css with absolute references (not divi specific, but important)
    3) Now that module background images are visual and do not list the actual url, I have to go in to each module, click settings, refind the photo (I REALLY WISH it were highlighted by default) and re-save. I would LOVE an option to simply see the url of this photo instead…..

  16. Thank You! Hoping not to need another plug-in for this.

Join To Download Today

Pin It on Pinterest