SOLUTION: Wordpress templates not working following Cloudflare setup

An acquaintance recommended Cloudflare for SSL certificates, and as I’d like my websites to be https rather than http I’ve signed up.

I’ve got several sites and I’ve been adding them one by one. Three of them are now working as https - www.helenbarrell .co.uk, www.eleanorharkstead.co.uk, www.birminghamcentrallibrary.co.uk

But… only eleanorharkstead looks as it should do with the template and layout etc being just as it was before. The other two look a complete mess - it looks like the template isn’t working and there’s no layout so they look like something from the late 1990s! (without the dancing jukeboxes, scrolling galaxy background or “site under construction” signs). (A friend has checked on her phone and confirmed it’s not working on there either so it’s not just my browser or PC being a doofus).

And horror of horrors… the login page doesn’t work anymore for the two sites with the template issues!

What can I do? I’ve asked my web hosting people, and they said they can’t help because the nameservers aren’t pointing to them anymore. So I’ve changed helenbarrell .co.uk back, and now they’re saying I’ve got to change the A record back too (which I don’t remember changing as I don’t know what it is!). It’s still https and still looking rather sad without its template.

Is this template thing a known problem when setting up Cloudflare? If so, is it temporary, or do I need to do something to fix it? And how do I fix it when I can’t login?

According to the support person at my hosting people, the A record for helenbarrell.co.uk is back to what it should be (which presumably happened after I changed the nameservers back to what they were before Jerry and Tricia kicked over the patio table and chucked it into the pool).

And now I can’t get into helenbarrell.co.uk at all as it’s giving that annoying Chrome thing “unsafe - go back to safety” as the https has fallen off and it’s http again.

But the template is working again (I managed to get to the login, and could see it working from inside there). And it’s working on Edge even if Chrome is terrified of it.

All suggestions gratefully received! My theory is that because the eleanorharkstead site has less content than the 2 sites that went wonky, it propagated more quickly, whereas the banjaxed sites have more content and that’s why they went wonky? Should I just be patient with the weird-looking template issue while the nameserver changes do their thing? (only it’s not a seamless process despite what I read somewhere!)

I’ve installed the Cloudflare Flexible SSL Wordpress plugin - I’ll change the nameservers again on hb.co.uk and see if that solves it.

birminghamcentrallibrary.com is still showing the banjaxed non-templatey screen.

@helenbarrell

What you have here, looking at the site, is a mixed content issue. Your web page is being loaded over https (secure), however some resources on the page are being loaded over http (insecure) causing then not to load correctly.

Do a search on these forums for ‘mixed content’ or online on the search engine of your choice. There are lot’s of resources about on it. If you can’t solve the problem then do come back on these forums and we will try to help further.

Thanks, I’ll have a look.

When I was setting this all up, I got to a page which was showing what would be going through Cloudflare and what wouldn’t, and I couldn’t see what I had to do to sort that out! So I’ll have a look for “mixed content”. Thanks.

helenbarrell.co.uk is http still although I’d set up https again after installing that plugin. Not sure why it hasn’t changed…

I see that site as https but it won’t have the green padlock icon due to the mixed content issue as some content is loading over http.

In the Cloudflare dashboard, try turning on the ‘Automatic HTTPS rewrites’ feature. I think it is in SSL/TLS app. It may fix some of the mixed content issues.

ahhhh, I see! I can’t see https on there, but I can’t see http in the browser either. Gosh, it’s annoying, this SSL business!

Right, I’ve flicked the switch for “Automatic HTTPS rewrites” - let’s see what happens…

Leave it for a while to let your changes propogate. (E.g. overnight). If it doesn’t sort it, let us know tomorrow and I will help you further with doing it manually. I have done it recently on a WordPress site myself.

I use the following plugin on WordPress to fix my mixed content error.

  1. In developer tools in your browser (preferably chrome) you will see the warnings and it will tell you exactly which bits of your site are loading over http.

If you need further help with finding this, have a look at https://www.wpbeginner.com/plugins/how-to-fix-the-mixed-content-error-in-wordpress-step-by-step/
I wouldn’t use the plug-in recommended on that page for mixed content though. It didn’t work for me and it completely broke my SSL!

  1. Where you see the links in dev tools: but the following… was loaded over http, there will be a link after it to the http item. Copy these and make a list of all the insecure items on your site. You should check pages other than your home page as well for insecure content.

  2. Now that you have found the links, you need to find the blocks of code that they sit within. Right click on your website and choose ‘view source’ you will now see the source code for your site.

  3. Use the ctrl+f function to search for each one of the insecure links. This will work for insecure images, but not Google Fonts items.

  4. Copy the block of code that contains the link.

  5. Once you have installed the plug-in, in the tools menu of your wp-admin area, you will have e a real time find and replace option. In this, you will see two boxes. In the find box, paste the code you have just copied. In the replace box, paste the same code but change the link from http to https.

You should be able to fix all the insecure images and files this way.

With Google Fonts, there are lots of articles on Google for WordPress using Google Fonts and https.

I don’t use Google Fonts but I believe it depends on the way it is set up as to how to secure it, again - lots more info online.

I hope I have been of help!

1 Like

Thank you SO MUCH!

I used the dev tools and found that the offending items were just two in number - the social media buttons to click on for Twitter and Facebook, which sit in the side bar on all pages of my site (I’m assuming this is because from a security point of view, it’s an image which has a link taking you to another website… it doesn’t take into account that it’s a picture of an F that takes you to Facebook). I used the find and replace plugin, but it didn’t seem to work (I might’ve not been using it properly, of course!). So I took the images out and just used text instead, and as soon as I did that, the magic padlock appeared!

Soooo relieved…

I’m going to get essexandsuffolksurnames.co.uk working now, so I’ve taken out the social media buttons on there too, and have changed the way that an image of a book cover too people to another page on the site (just to be on the safe side if using images as links is an issue!). I’ve changed the template that site uses too.

Anyway, many, many thanks for being so helpful. You saved me from pulling more of my hair out! :slight_smile:

Glad I could help. Please mark the post as solution to help others looking on this forum.

Will do.

1 Like

(Hope I’ve done that right…!)

2 posts were merged into an existing topic: General sting

That’s great. If you login, at the bottom of the posts, you will see a tick icon. On the post that solved your issue, please click the tick to turn it green aswell. This helps others quickly go to the post containing the solution.

Many Thanks

1 Like

Done! Thanks again.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.