Putting in a Secure Socket Layer (SSL) certificate on your web page is more uncomplicated than ever. On the other hand, in some circumstances, you’ll undergo all of the procedure handiest to run right into a ‘combined content material’ error in WordPress as soon as the certificates is about up.
This actual error happens when there’s an issue along with your HTTPS/SSL configuration. Extra particularly, it occurs when WordPress doesn’t load all of your content material by way of HTTPS, therefore the ‘combined content material’ section. On this article, we’ll communicate extra about how the WordPress combined content material error works and what reasons it. We’ll then display you two tactics to mend it.
Let’s get to paintings!
What the WordPress Combined Content material Error Is (And What Reasons It)
The combined content material error seems because of an error along with your SSL configuration.
We’ve talked so much about SSL certificates and HTTPS previously, and there are a number of types of SSL certificates you’ll be able to get on your web page. This tells the sector your web page isn’t compromised and that any knowledge customers give you’re going to be secure. On the other hand, after enabling HTTPS on your web site, it’s possible you’ll come throughout an error, referred to as the WordPress ‘combined content material’ error.
This will happen when your web site serves some, however no longer all, of its contents the usage of the protocol. Maximum usually, this content material will come with your pictures or scripts. Since your web site makes use of ‘combined’ assets, it’ll motive this mistake to happen. If this occurs, your web page gained’t show the fairway padlock image to customers, and make your web site seem unsecured.
It’s simple sufficient to determine which of your web page’s property are nonetheless loading by way of HTTP. As an example, if you happen to’re the usage of Chrome, you’ll be able to right-click at the web page and use the Investigate cross-check choice:
Now you’ll be able to use the hunt function inside Chrome Dev Equipment to search for the next string – src=”http. This may permit you to find any content material that makes use of HTTP reasonably than HTTPS. If you’ve discovered the content material that’s nonetheless loading by way of HTTP, there are two easy tactics to mend the issue.
2 Tactics to Repair the WordPress Combined Content material Error
There are many tactics to take on this actual error. As an example, plugins like SSL Insecure Content Fixer generally tend to paintings reasonably smartly, however we’re a fan of a extra handbook method in terms of HTTPS. With that during thoughts, let’s speak about two tactics to can repair this downside manually.
1. Pressure WordPress to Redirect All Visitors Thru HTTPS
For this step, we’re assuming you already configured WordPress to make use of HTTPS via your dashboard. If you haven’t, you’ll be able to accomplish that by way of going to the Settings > Normal tab. If you’re in, search for the WordPress Cope with (URL) and Web site Cope with (URL) fields:
You wish to have to verify your web site’s URL makes use of HTTPS as an alternative of HTTP on each those fields. This step is sufficient if you happen to’re beginning a brand new web page. On the other hand, if you happen to’re including SSL to an current assets, you’ll wish to arrange redirects using .htaccess, so your current content material doesn’t proceed to load over HTTP.
To do that, you’ll wish to get entry to your .htaccess record (pardon the pun) by way of FTP. We advise using FileZilla if you happen to don’t have an FTP consumer arrange already. If you log into your web page by way of FTP, navigate to the public_html or root listing and search for the .htaccess record inside. Proper-click on it and make a choice the choice that claims View/Edit, which is able to open the record the usage of your default textual content editor. Normally, a blank .htaccess record must seem like this:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
What we’re going to do now’s rewrite that code so when anyone tries to get entry to your web page by way of a port that isn’t 403, the content material they need to see will probably be loaded via HTTPS. Port 443 is the default for SSL site visitors, so redirecting all different choices looks after all our issues.
# BEGIN 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
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
This snippet makes use of a 301 or everlasting redirect for all site visitors that isn’t routed via port 443. The use of this kind of redirect guarantees the adjustments on your URL construction don’t affect your Search Engine Optimization (SEO), which is essential for established web sites.
Remember – some internet hosts make adjustments on your .htaccess record out of the field to put into effect complicated options, comparable to browser caching. That implies your record would possibly come with extra code than the default WordPress snippet. In the ones circumstances, you’ll need to obtain a replica of the unique .htaccess record as a type of backup, which you’ll be able to do by way of right-clicking on it and the usage of the Obtain choice inside FileZilla.
Upon getting your backup, upload the code we equipped you with earlier than the road that reads #END WordPress. Simply be sure that it doesn’t intrude with different code throughout the record by way of ensuring to stick it after the closing tag you spot, like this:
Now, save the adjustments to .htaccess and shut the record. FileZilla will ask you if you wish to replace the model of the record to your server with the only you simply edited. Solution sure and check out loading your web page once more. If the whole lot’s labored, you must now not see the combined content material error.
It’s possible you’ll nonetheless run into the mistake if you happen to’re the usage of a caching plugin. If that’s the case, be sure you empty your web page’s cache and check out loading your web page yet again.
2. Configure Your CDN to Load Your Static Content material Over HTTPS
In some circumstances, using a CDN can cause the WordPress combined content material error. This will occur while you arrange an SSL certificates for a web page that already has a operating CDN. On this case, you’ll wish to replace your CDN’s settings to keep away from this type of mistakes.
As an example, let’s take a look at Cloudflare. For those who’re the usage of this provider to cache your WordPress web page, you wish to have to move on your Cloudflare dashboard and search for the SSL settings phase. Right here you’ll discover a drop-down menu enabling you to test how Cloudflare handles encrypted content material. We advise opting for the Complete (strict) surroundings since that approach, the relationship between your guests and Cloudflare will probably be encrypted, in addition to from the CDN on your server:
As soon as your CDN is configured to paintings with SSL. You’ll additionally wish to be sure that all of the content material it caches rather a lot over HTTPS. With Cloudflare you’ll be able to do this by way of enabling the At all times use HTTPS surroundings at the CDN’s dashboard:
Save the adjustments on your settings now and reload your web page, at which level the mistake must now not disappear. This procedure can will range relying on which CDN you utilize, however you must be capable of in finding additional information on configure SSL for your CDN’s wisdom base.
Conclusion
Working into the WordPress combined content material error doesn’t imply your SSL certificates isn’t operating. It simply issues against an error in the best way WordPress makes use of the HTTPS protocol, which will also be simply mounted. Failing to take action would possibly motive your web page to be hit with some SEO penalties, so it’s one thing you must care for in an instant.
There are two tactics you’ll be able to take on this factor, relying on whether or not you’re the usage of a CDN or no longer:
- Configure your .htaccess file so WordPress redirects all its site visitors via HTTPS.
- Tweak your CDN’s settings so it rather a lot static content material over HTTPS.
Do you might have any questions on power WordPress to serve your content material via HTTPS? Let’s speak about them within the feedback phase under!
Article thumbnail symbol by way of Zhitkov Boris / shutterstock.com
The submit 2 Ways to Fix the WordPress Mixed Content Error seemed first on Elegant Themes Blog.
WordPress Web Design