Cloudflare and SSL breaks wordpress - Mixed Content & Unable to use Admin

Question

I'm trying to install WordPress with CF's Flexible SSL option, and it worked out! The website loaded just fine with SSL. However, I couldn't login to the admin page. When inputting details, all the page did was refresh and cleared the input. No errors on the page or in the PHP errors log.

So I researched how to and I've found the best way to fix this was to install a CloudFlare SSL plugin on WordPress.

However, I can't install without adding logging to Admin so I went ahead and changed Site URLs, other URLs to the http version of the site's URL as well as disable SSL on CF's side.

This produced a broken website and errors in console:

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://example.com/wp-content/themes/twentyseventeen/assets/js/skip-link-focus-fix.js?ver=1.0'. This request has been blocked; the content must be served over HTTPS. I tried to fix this by purging cache but that didn't do anything.

And I still can't login to admin.

What can I do to fix this?

Answer 1

You need to install these two plugins.

1. CloudFlare Flexible SSL - https://wordpress.org/plugins/cloudflare-flexible-ssl/

2. Really Simple SSL- https://wordpress.org/plugins/really-simple-ssl/

After both the plugins are installed and activated, you will get a message at the top of your dashboard to activate SSL. Click on activate and you are done. You will be logged out. Because your domain has changed from http to https

Answer 2

you can fix Wordpress SSL login problem by entering your server IP to the Windows HOSTS file. Find Hosts file in windows\system32\hosts add your IP and domain name.