How to Get Rid of those Pesky "Mixed Content" Messages for WordPress

Perhaps you've heard the news surrounding "secure" websites? A secure site is better for your users. Their data (and yours) is safer. Google adds new rules all the time that could affect your search engine ranking. Luckily, most hosts offer an easy way to turn HTTPS on. You could even get a free SSL certificate through Let's Encrypt.

So let's say you do that: you enable SSL on your domain. How do you make sure your WordPress site is secure? Specifically, how do you make sure you don't get Mixed Content messages?

What are Mixed Content Messages?

Websites can have 3 states for security: Secure, insecure, and "not fully secure." Secure sites will often show a green icon or https in the address bar. Insecure sites will show as red, or not at all if you're visiting an http site. For "not fully secure" sites, most browsers will display what's above: https in gray.

This means that while your domain is using SSL, there are insecure elements on your pages. Here's the mixed content: it's a mix of secure (https) and insecure (http) content.

Why do I get Mixed Content in WordPress?

Mixed Content in WordPress can occur for many reasons. Most often, it's because you create your site without using SSL, and then enable it later. This leaves some content in the database using HTTP instead of HTTPS, so how can we fix it?

Install Really Simple SSL

The first step (after getting your SSL certificate) is installing Really Simple SSL. Once enabled, the plugin will first check to make sure you have a valid SSL certificate. If you do, great! It will show you this message, allowing you to switch over to HTTPS:

Image

Note that there are a few things the plugin is telling you. The most important message is regarding your theme and plugins. While Really Simple SSL can fix most mixed content errors for you, it cannot change the theme and plugin files. If any of them have http:// hardcoded into these files, you will have to change them .

Tip: Anything you get from the WordPress Repositories should not have hardcoded files. It's against the coding requirements.

Settings and Notices

Once enabled, you can go to Settings > SSL to see any notices and settings for the plugin. You'll see there are a few specifically for mixed content.

The plugin will check for and fix any mixed content errors it can. It's recommended you clear your cache once you turn on SSL to make sure the correct assets are loading. If you're using a plugin like Beaver Builder, also make sure to clear its cache.

In most cases, once Really Simple SSL is enabled and your caches are cleared, you should be good go to! Mixed Content Errors are a thing of the past. However, sometimes things don't go as cleanly as we'd like.

Advanced Solutions

If you're still experiencing mixed content errors, there are a few things you can do to fix them.

The first is check out Really Simple SSL premium, which will do advanced checking and fixing. If you're not a developer or comfortable with database changes, this might be your best bet.

The rest of this I strongly recommend doing in a staging environment first.

Modifying wp-config.php

A while back, I wrote a solution on the Crowd Favorite blog for the mixed content issue. It could be the case that Really Simple SSL does this same thing, but it's worth trying.

You can add some logic to your wp-config.php file to set the SITE and HOME URLs to specifically use https: 

$protocol = "http://";
$domain = $_SERVER['HTTP_HOST'];
if ( $_SERVER['HTTPS'] == 'on' ) {
$protocol = "https://";
}
$url = $protocol . $domain;
define('WP_DOMAIN', $domain);
define('WP_HOME', $url);
define('WP_SITEURL', $url);

This will tell WordPress, "Any time you need the URL, check wp-config.php instead of the database."

Database Search & Replace

Finally, if all else fails, you can do a search and replace on your database. You can do this through WP-CLI, SQL, or PHPMyAdmin, but there's also an excellent plugin.

Better Search Replace by Delicious Brains gives you a great interface on the WordPress dashboard. It allows you to specify to "find" URL (http://yoursite.com) and the "replace" URL (https://yoursite.com) then lets you choose the tables. You can even do a dry run first to make sure nothing breaks. This should, without fail, remove all references of http from your database.

Wrapping Up

Mixed Content can occur for any number of reasons, and it can affect the security of your website. With the solutions above, your WordPress website should be all fixed up and secure in no time!

You may also like:

• [DOC] Require HTTPS with the HSTS Header
• [DOC] Using WP-CLI On The Pantheon Platform
• [BLOG] Why HTTPS Deployments Need a CDN
• [BLOG] How Pantheon Hardens Every WordPress Installation