Mixed content on WP admin

sage
, ,
1

After building and deploying a Sage theme to a site, I’m getting “mixed content” warnings on my console. Effectively, both editor.css and editor.js have http:// URLs, while the frontend css are loading with https:// correctly. I’ve looked at every setting, what am I missing?

This is the error I’m getting:
Mixed Content: The page at ‘https://site.com/wp-admin/post.php?post=2&action=edit’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fa.montag.uy/wp-content/themes/mytheme/public/css/editor.50ccf2.css’. This request has been blocked; the content must be served over HTTPS.

I’d appreciate any tips

2

I’ve experienced this issue quite a bit moving sites from HTTP to HTTPS – I think it’s unlikely to a be a Sage related error.

From experience, this usually solves it:

  • Make sure the domain is HTTPS in the dashboard settings
  • Use a plugin like Better Search Replace to replace instances of http:// with https://
  • Make sure there’s a https force redirect setup on the server

Hopefully that’s helpful!

1 Like
3

Hey Alex, thanks for your feedback. About your points:

  1. Staging domain is https, I also configured https for local dev (using Local) in case that made a difference, I also forced https via SITE_URL in wp-config.php
  2. I ran wp-cli’s search-replace and even though I did have some http urls (that I replaced), that was not the issue.
  3. I have a .htaccess rule, but not sure if that’s what you mean? I know there are some plugins that rewrite all calls to https, but I’d like to address the the underlying problem.

To add more info, on page/post edit page on WP’s admin on staging, I’m seeing this on view-source:

<link rel='stylesheet' id='editor/0-css' href='http://example.com/wp-content/themes/fa/public/css/editor.50ccf2.css' media='all' />
<link rel='stylesheet' id='acf-global-css' href='https://example.com/wp-content/plugins/advanced-custom-fields-pro/assets/build/css/acf-global.css?ver=6.2.0' media='all' />

There you can see how ACF’s global CSS is loading ok over https but the editor’s CSS is not (.js either, that’s why I think this might have something to do with Sage’s build process)

4

Glad to report this issue resolved itself :man_shrugging:
To give some info for future devs with a similar problem… this got fixed after I had some issues and fixed them (might be related or not, who knows):

  • Enabled https with my local env (Local by flywheel)
  • Uninstalled Laravel Herd (was causing PHP conflict issues w/Local on the command line) following their docs & restarted
  • npm run dev was failing with bud errors, npm install was not installing. For some reason NODE_ENV was set to production.
2 Likes