The answer to both issues in the title of this help article is the same: if you’ve recently forced HTTPS on your site and are noticing some broken images or assets—or if they’re loading properly, but you’re seeing “insecure content” warnings and not seeing the padlock in the browser bar—this is likely due to images and other assets being called into the page insecurely.
When you’re forcing HTTPS, your browser tries to require all site assets to be served via the secure HTTPS protocol. But if you have hard-coded HTTP URLs or active plugins that are using HTTP explicitly, you’ll likely see a warning in the browser address bar instead of the famous padlock, meaning that while your site is loading over HTTPS, it’s calling insecure assets over plain HTTP.
There are a few ways to go about addressing this problem. The best way is to use your browser’s developer tools (and console, specifically) to determine what assets are being called via HTTP. Once you’re aware of those URLs, you can track them down in your site’s content, settings, template files or plugins, and switch them to HTTPS.
In most cases, you can also use relative links with WordPress. For example, if you have a link that looks like this:
You can either replace “http” with “https” to force the image to load securely, or you can make it a relative link by deleting the domain entirely, like so:
Relative links follow the lead of whatever protocol the page is already using, so if you’re forcing HTTPS, a relative link will always load over HTTPS automatically.
You can also use search-and-replace plugins like Better Search Replace to automate the process of updating HTTP links and URLs to HTTPS in your database. Just be aware that you should use the full protocol and domain together in both the “search” and “replace” fields, like so: searching for “http://example.com” and replacing with “https://example.com”.
Note the full protocol at the beginning and lack of a slash or other text at the end of those domains. Aside from the extra “s,” the two should be identical.
Unless you’re absolutely sure what you’re doing, you should never run a search-and-replace without the protocol at the beginning, as this can break email links, alter user email addresses, and cause other unintended side effects.
The above techniques should fix the issue, but it will depend somewhat on the site and theme. If your theme stores its settings and other data in unusual ways in the database, or if the theme files themselves contain references to the HTTP version of your domain, you’ll likely need to make a manual replacement. This will also be the case if you have background images stored as HTTP links in your site’s CSS.
If you’ve looked through your theme files and plugins but are still not getting the padlock icon, there are plugins available to try to help rewrite HTTP URLs to HTTPS on the fly. We typically recommend the SSL Insecure Content Fixer plugin. Just activate it, and the plugin will attempt to switch any HTTP URLs to HTTPS so they can be served properly. Note, however, that this plugin is not able to change hard-coded URLs in content or in theme or plugin files.
If that plugin doesn’t seem to be working right away, be sure to head to Settings > SSL Insecure Content from the WordPress admin menu and adjust as recommended. Depending on how your site is configured, “Simple” mode may work for you, or you may need to change it to a higher setting.
We also use Why No Padlock to help identify any remaining insecure assets. It’s a very simple website that you can enter your site’s web address into (don’t forget the HTTPS!). Enter your URL and click ‘Run’ to see the results. Any URLs that are being called insecurely will be listed for you to investigate.
If you’re still stuck after that, or if you have any other questions, contact us, and we’ll be happy to do what we can to help identify any other insecure asset issues and recommend fixes.
The most commonly asked questions, and a few we just think you should know.26 Articles
Questions that don't fit elsewhere, or those about Flywheel in general.59 Articles
Everything you need to know to get your first Flywheel site up and running.16 Articles
Details about how to manage DNS and point your domain names at Flywheel.13 Articles
Questions relating to payments, billing and managing your account on Flywheel.13 Articles
Learn everything there is to know about what Blueprints are, how to create them and how to make the best use of them.5 Articles
How to access your WordPress database to make changes and update content.3 Articles
Everything you need to know about our amazing, free local WordPress development software for Mac and PC.6 Articles
Everything you need to know about managing your team with our Organizations feature.8 Articles
Which plugins work best, which plugins work worst, and everything in between.7 Articles
Details about everything Flywheel does to makes your site so secure.13 Articles
Information on setting up and troubleshooting with SFTP connections and file transfers.4 Articles
All there is to know about our free, automatically installed and activated SSL certificates.9 Articles
How to get the most out of Staging, which allows you to duplicate a site, make changes, and then push those changes to the live site.7 Articles
Everything you need to know about our Whitelabel subscriptions for branding and reselling Flywheel.4 Articles