Loading style.css and Jquery using HTTPS

2 Views

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).

Read More

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.

Post Views: 2

Related posts

4 comments

  1. 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/');

  2. Most SSL issues are due to plugins/themes using the wrong code to load CSS/JS.

    • Under WordPress General Settings change the WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS. If you don’t have access to your admin you can change this via your wp-config.php http://codex.wordpress.org/Editing_wp-config.php

    • Use the proper url paths for your themes and plugins: http://codex.wordpress.org/Determining_Plugin_and_Content_Directories for example hardcoding the WP_PLUGIN_URL will not work as opposed to plugin_dir_url. The functions are generally SSL friendly because they have time to check if the site is SSL enabled, the constants are not.

    • For the admin/login you can force SSL via the wp-config.php:

      Login: define('FORCE_SSL_LOGIN', true);

      Admin: define('FORCE_SSL_ADMIN', true);

    Of course any hardcoded assets will be a problem or plugins/themes that incorrectly load assets.

    You can also update your themes and plugins via SSL if your server has libssh2 , you can also define the port# and Auth keys. If this is enabled you do not have to define anything it will just magically show up in the admin settings.

  3. Ok! It happened to me like that before. Make sure that you load your jquery file properly and then double check the plugins depended javascript file. WordPress has some ways to load js file. Again to check not to load default wordpress jquery file and your custom jquery version file. For Your HTTP Problem, please read html5boilerplate.com they use smarter ways for HTTP. Don’t too much hack the core file 🙂

  4. We found a solution and it appears to be purely environmental as in a problem in how our environments were setup. As it happens, our MySQL server and our actual server were not on the same box and wordpress needs to explicitly know the difference between request routed to the MySQL box and the box containing the actual code. So the fix lied in figuring out what Database entries to point at the SQL and which to point at the web server.

    Once we figured out how to setup the environments so that I could log in I enabled the HTTPS plugin and we were able to load the site normally fixing the chrome issue of blocked non http requests.

Comments are closed.