Wordpress https ssl content blocked errors

Question

I have spent many days on google with this now, my wordpress problem is this. I would like to turn on https for a couple of pages on the site for a checkout page and a my-account page.

What i have done so far is tried with htaccess and also tried the wordpress https plugin. Using wordpress 3.4

What happens is i get blocked content errors, as it is unable to load the css images etc in the template (headway) when in the https page. I can see on chrome inspect element it will show blocked contents error (the css files etc) as they are http not https links I believe the WordPress Address (URL) should have https in it but not sure as when i do this, the homepage even on http wants to display a certifcate.

This a developement domain so the certificate is not correct yet so just using a server wide cert.

Do i need extra rules in htaccess as i believe wordpress struggles with https from googling around and experiencing every error so far (redirect loop errors etc) Firewall allows port 443 so not a firewall issue. Hoping somebody has good knowledge on wordpress https ssl

Answer 1

I thought i would post my answer to my problems with wordpress https for those that maybe stuck like i was for days. You must when using https on a wordpress have a vaild ssl certificate we bought one from rapidssl for £16 per year. Without the valid ssl certificate we were constantly getting 310 errors from browswrs like google complaining about redirect loops. Once ssl was installed these went away. The wordpress site url and wordpress home link did not have to be changed from http at all.

Using the wordpress https plugin for the secure pages that we needed, ticked the boxes in edit page to force ssl and with everything ticked in https settings except admin ssl login.

We then after installing the certificate got security warnings and errors about partially encrypted content which means in your secure page there are some http links that the browser does not like.

What we then did was using chrome inspect the element of the page and click on the console tab to find these http links. In our case there were 3 images which in the headway theme i had to insert as a https:// url (url of image) in the header or media boxes in the grid (for those of you using headway).

We also had a link from google web fonts that had to be made https in the secure pages once that was secure our errors went away. Eg in firefox only the padlock displays.

If you then have a return url set in paypal which gives you a partially encrypted message like this - Although this page is encrypted, the information you have entered is to be sent over an unencrypted connection and could be easily read by a third party - the page which you are returning to has to have a padlock in the https if not you will keep getting this error from firefox etc. So return page has to be no errors, best way is to have a thankyou page with no calls to images etc but the just the order details etc.

One thing that has been driving me nuts was that the call to google we fonts was being affected by headway cache so it was sticking to http sometimes in the https page causing an error, so disabled that now, just off to post a question about making a plugin to disable wordpress headway theme cache on ssl pages see if any can help me on that.

Good luck with your ssl pages folks its great fun!!!!!!!! oh and heres javascriipt i use for google fonts if anyone wants it for the header

 <script type="text/javascript">
 WebFontConfig = {
 google: { families: [ 'Lato:300,400,700' ] }
 };
 (function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
 })();
</script>

but there are other ways of calling it in https using // instead of http:// google bla is another

Answer 2

I can see on chrome inspect element it will show blocked contents error (the css files etc) as they are http not https links I believe the WordPress Address (URL) should have https in it but not sure as when i do this, the homepage even on http wants to display a certifcate.

That’s the answer. ssl protected webpages delivering content need to have 100% all of their content delivered via https. Maybe 10 years ago mixed https/http pages existed, but nowadays browsers are extra security aware. So you need to figure out how to make sure all content has URLs set with https. This site seems to have a decent set of answers.