What Is Mixed Content?
Mixed content occurs when a page loads over HTTPS but requests some of its resources over HTTP.
These resources may include:
-
Images.
-
Stylesheets.
-
JavaScript files.
-
Fonts.
-
Embedded media.
Browsers may upgrade or block these requests. This can cause missing images, broken layouts, or features that stop working.
Step 1: Confirm That the Certificate Works
Open your website over HTTPS.
If the browser displays an expired certificate, an untrusted certificate, or a domain-name mismatch warning, resolve that certificate issue first. These are different from mixed content.
Step 2: Identify Insecure Resources
Open your browser’s developer tools and inspect the Console for mixed-content messages.
These messages usually identify the resource requested over HTTP.
Step 3: Update the Resource URLs
Change references to your own website resources from HTTP to HTTPS.
Check:
-
Website settings.
-
Page and post content.
-
Theme or template files.
-
Custom code.
-
Plugin settings.
-
External embeds.
For third-party resources, confirm that the provider supports HTTPS. If it does not, replace or remove the resource.
For WordPress Websites
Check Settings > General and confirm that the WordPress and site addresses use HTTPS, where these fields are editable.
Older HTTP links may also remain in your database. Back up your files and database before making replacements, and use a WordPress-aware tool that handles serialised data correctly.
Step 4: Clear Caches and Retest
Clear any relevant website, hosting, CDN, and browser caches, then check several pages—not just the homepage.
Note: Force HTTPS redirects visitors to HTTPS, but it does not rewrite every hard-coded resource URL in your website.
