Loading style.css and Jquery using HTTPS

We have several environments and we have just started using wordpress (Dev, QA, Pre-prod, prod etc…). We don’t have https enabled in the lower environments and everything is working smoothly. In our prod environments the site redirects all traffic to https.

The first issue seems to only be with chrome. Chrome refuses to load anything on the page that isn’t https. I am unsure how to get WordPress to load jquery or styles.css (from my theme) over https ( more information below).

The second issue also with HTTPS is we cannot log into wordpress in the environments that use HTTPS. When the login screen loads (sitename.com/wp-admin) you get redirected to wp-login as expected but upon entering your username / password the page just refreshes. No errors (checked console / firebug and httpfox and couldn’t find any errors).

I know we are doing something wrong with https in general because we are having many problems in the environments that support it. I have done a bunch of googling and haven’t really come up with much on using HTTPS and wordpress surprisingly. Aside from answers to the questions of how to load jquery via HTTPS and how can we log into the https wordpress instances, are there any good links on how to work with HTTPS in wordpress. Almost everything I have found points to using the plugin WordPress HTTPS and we are going to try that but I am not sure if it will solve all of our issues.

Note* In my functions.php I am using Enqueue to load JS and CSS files the proper way, and I am using relative pathing on those loads //sitename.com/bla/bla which works fine. I am loading jquery using: in my header.php and styles.css is loaded automatically as part of my theme loading using , so I don’t know how to configure either to load via HTTPS or if that is even the correct approach to fixing these issues. (jQuery is loading from our local file system not a CDN). Any help would be greatly appreciated. Thanks in advance.

Since you are behind a load balancer (confirmed in your comments above), your WordPress installation won’t be able to detect SSL using the is_ssl() function, and will not serve any enqueued scripts or stylesheets with https: protocol URIs.

If you are behind a load balancer that supports the HTTP_X_FORWARDED_PROTO server variable, you can fix your problem by adding this snippet to your wp-config.php file:

// Amazon AWS Elastic Load Balancer, CloudFlare, and some others
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
    $_SERVER['HTTPS']='on';

If you’re unlucky enough to be hosted on Network Solutions, first beat your head against a desk, then try to work this gist into an already-activated plugin (since you can’t activate new plugins because you can’t login to admin): https://gist.github.com/webaware/4688802

Actually, you should be able to force your admin to not use SSL, login, install whatever plugins you need, and then test your installation over SSL to see if all is working, before forcing it to use SSL. Add this to your wp-config.php file, changing WP_SITEURL and WP_HOME to match your real server.

define('FORCE_SSL_LOGIN', false);
define('FORCE_SSL_ADMIN', false);
define('WP_SITEURL', 'http://example.com/');
define('WP_HOME', 'http://example.com/');