Mixed content - SSL http/https issue

Question

Approximately 2 months ago I installed a SSL certificate on my site, catherinerushforth.com. I changed the site and WordPress URL in the admin area of WordPress to include https:// instead of http://. All was fine.

Then, about 2 weeks ago I started to have a problem with "Mixed Content" errors on all pages except the main home page. There doesn't seem to be an issue when viewing the site with Safari but there is a problem with Chrome, Firefox and Internet Explorer. I inspected the Javascript console in Chrome (as an example) and saw multiple "Mixed Content" errors

This is what I have do so far to try and fix these mixed content errors:

Changed http:// to https:// in the WordPress Admin section for the site and WordPress URLs (Settings/General)
I've added "define('FORCE_SSL_ADMIN', true);" to the top of the wp-config.php file.

I've added the following piece of code to the .htaccess file:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^catherinerushforth.com [NC]
RewriteRule ^(.*)$ https://catherinerushforth.com/$1 [L,R=301]

With this code I get "ERR_TOO_MANY_REDIRECTS"

I've also tried the plugin, WordPress HTTPS (SSL).

None of the above have worked.

Does anyone know what I am doing wrong and/or have any suggestions as to how I can fixed this issue?

Many thanks.

WordPress version: 4.2.2 Theme: X-theme v.4 (although issue was the same in previous version of this theme) Site: catherinerushforth.com

UPDATE If I simply remade each page for my site (which I will probably have to do at some point due to X-Theme now using their CornerStone page builder) would this ensure all links were https:// and not http://?

markratledge markratledge · Accepted Answer · 2015-05-30T16:36:43

Remove

define('FORCE_SSL_ADMIN', true);

from wp-config.php, be sure you have changed http:// to https:// in WordPress Admin, and then force SSL for front and backends with this in .htaccess above the WordPress rewrite block:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://catherinerushforth.com/$1 [R=301,L]

That only forces SSL; you still need to find the site resources which are loading non-SSL.

So use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see the errors with specific site resources.

And:

• you should change URLs of media items and links in the post/page content to https so they don't depend on the redirect in .htaccess. Search RegEx is a good plugin to be able to search and replace (optionally with grep) through all posts, pages, excerpts, comments, titles and meta. And, interconnectit.com WordPress Serialized PHP Search Replace Tool can be used to find/replace in the entire database, i.e. metadata, GUIDs and widget content, etc.

• You may need to change to a relative path for images in CSS files, i.e. background-image: url(http://example.com/themes/wp-content/theme/images/image.jpg) to background-image: url(images/image.jpg)

• You may need to remove the http from absolute paths in php theme files, i.e. change 'http://example.com/image.jpg' to '//example.com/image.jpg'; that will allow your resources to default to https.

Mixed content - SSL http/https issue

4 Answers