How to Quickly Fix WordPress Mixed Content Warnings (HTTPS/SSL)
How to Quickly Fix WordPress Mixed Content Warnings (HTTPS/SSL)
Running your WordPress site over HTTPS is no longer optional. ✅ But moving from HTTP to HTTPS can come with mixed content warnings. Learn how to quickly solve them with this tutorial.
👉 Subscribe: https://www.youtube.com/c/Kinsta?sub_…
Using your WordPress site with HTTPS is not only more secure, but it also builds trust. HTTPS is a search engine ranking factor, and provides more accurate referral data. Unfortunately, when transitioning from HTTP to HTTPS, website owners can encounter several issues. One of them is the famous ‘mixed content warnings’.
You might get the ‘mixed content warnings’ if you’re migration from HTTP to HTTPS hasn’t been done correctly, and both scripts are running at the same time. This can cause problems since HTTP and HTTPS are completely separate protocols.
Web browsers such as Google Chrome and Mozilla Firefox are cracking down on sites not running over HTTPS, and are showing stricter warnings to potential visitors. To help you avoid those problems, this video will guide you through a few different ways you can fix this issue on your WordPress site.
ℹ️ About Kinsta
Kinsta is an award-winning Cloud Platform designed to host and manage your WordPress sites, Applications, and Databases faster and more efficiently. Trusted by 25,000+ companies worldwide, from developers, startups, and agencies, to multinational brands, we guarantee lighting-fast performance, enterprise-level security, ease of use, and exceptional support.
🚀 Try our flagship Managed WordPress Hosting plans and get $240/month worth of premium features included in every plan. That’s free unlimited migrations, 20% faster load times thanks to Google’s fastest servers and Premium Tier network backed by Cloudflare’s 275+ CDN locations worldwide, and 24/7/365 multilingual technical support from humans in less than 2 minutes.
👉 Try risk-free with our 30-day money-back guarantee Powerful Managed WordPress Hosting
👤Follow us:
► https://kinsta.com/blog/
► https://kinsta.com/newsletter/
► https://twitter.com/kinsta
► https://instagram.com/kinstahosting
► https://facebook.com/kinstahosting
💡Discover all of our hosting solutions ► https://kinsta.com/
🕘Timestamps
0:00 How to Quickly Fix WordPress Mixed Content Warnings
0:49 What Is a Mixed Content Warning?
1:14 What Causes Mixed Content Warnings?
2:05 4 Steps to Fix Mixed Content Warnings
2:24 Find Out Which Resources Are Loading Over HTTP
5:37 Verify Whether HTTP Resources Are Accessible Over HTTPS
6:04 Perform a WordPress Search and Replace
7:53 Confirm That the Mixed Content Warnings Are Gone
📚Resources
📙 Full Guide on How to Fix WordPress Mixed Content Warnings
► https://kinsta.com/blog/mixed-content…
➡️ In-Depth HTTP to HTTPS Migration Guide for WordPress
► https://kinsta.com/blog/http-to-https/
🤖 How to Redirect HTTP to HTTPS in WordPress
► https://kinsta.com/knowledgebase/redi…
⚙️ How to Install SSL Certificate on Your WordPress Site
► https://kinsta.com/knowledgebase/how-…
#MixedContentWarnings
Content
0.18 -> Hey, everyone. I'm Mike and today I'm going to show you
2.28 -> how to quickly fix WordPress mixed content warnings.
5.3 -> (upbeat music)
11.23 -> Running your WordPress site over HTTPS
13.54 -> is no longer optional.
15.17 -> Not only is it more secure, but it also builds trust,
18.33 -> is a search engine ranking factor
20.09 -> and provides more accurate referral data.
22.6 -> Unfortunately when migrating from HTTP to HTTPS,
26.49 -> website owners can encounter several issues,
29.03 -> one of which is mixed content warnings.
31.54 -> Today I will show you a few different ways
33.18 -> you can fix this issue on your WordPress site.
35.54 -> But before we get too far,
36.72 -> I wanna let you know that there will be links
38.42 -> and more resources in the video's description below
40.85 -> and remember, subscribe and ring that bell
42.82 -> to get notifications for future helpful content.
45.5 -> So let's get started.
50.13 -> A mixed content warning appears in a user's browser
52.76 -> when the WordPress site they're trying to visit
54.79 -> is loading HTTPS and HTTP scripts
57.98 -> or content at the same time.
59.73 -> This can cause problems since HTTP and HTTPS
63.13 -> are completely separate protocols.
65.16 -> When you migrate to HTTPS,
67.08 -> everything needs to be running over that protocol
69.42 -> including your images, JavaScript files and so on.
75.46 -> We've found that most common mixed content warnings
77.9 -> appear right after someone migrates their WordPress site
80.4 -> from HTTP to HTTPS.
82.85 -> Some HTTP links get carried over
84.96 -> and this causes mixed content warnings to start firing.
87.92 -> Here are some additional causes of this warning.
90.38 -> You just added a new service or plugin to your site.
93.38 -> In particular, developers sometimes use absolute paths
96.71 -> in their plugins or themes to link to CSS and JavaScript
99.89 -> instead of using relative paths.
101.67 -> Your images have hard-coded URLs that run over HTTP.
105.94 -> These could be within posts, pages or even widgets.
109.24 -> You're linking to HTTP versions of external scripts.
112.23 -> You have embedded video scripts that use HTTP
114.68 -> instead of HTTPS.
116.91 -> Unfortunately you may not uncover the real source
119.22 -> of the issue until you start troubleshooting.
124.93 -> You can follow these four simple steps
126.78 -> to fix your WordPress mixed content warnings.
129.26 -> This process assumes
130.3 -> that you have already done the following.
132.17 -> Installed an SSL certificate
134.22 -> and redirected HTTP to HTTPS on your whole site.
139 -> We'll be using an example development site
140.69 -> in the following examples.
142.92 -> The first thing you'll need to do
144.1 -> is find out which resources are still loading over HTTP.
147.2 -> Remember, these warnings might only be happening
149.03 -> in certain areas of your site, not globally.
151.87 -> Browse to the page that's prompting the warning
153.76 -> and launch Chrome DevTools.
155.68 -> If you're Windows, hit F12 or Control+Shift+I
160.07 -> and if you're using macOS, hit Command+Option+I.
163.7 -> You can also open Chrome DevTools
165.27 -> from the tools menu in your browser.
167.56 -> There are a couple of places you can check to find out
169.95 -> which resources aren't loading over HTTPS.
173.27 -> The first is a console tab.
174.95 -> Note that you might need to refresh the page
176.88 -> after you have Chrome DevTools open
178.81 -> for it to properly load everything.
180.88 -> If mixed content errors are present,
183.06 -> they'll be highlighted in either red or yellow.
185.5 -> Typically they're accompanied by information
187.51 -> explaining that this request has been blocked.
190.6 -> The content must be served over HTTPS.
193.86 -> This means that the browser settings are configured
195.97 -> to automatically block any HTTP content.
199.5 -> In an effort to ensure pages only load over HTTPS,
203.17 -> Chrome started to begin blocking mixed content by default
206.55 -> with Chrome 79.
208.2 -> Most recently, they unrolled features
209.99 -> to start auto upgrading mixed images and media.
212.75 -> Therefore, when using Chrome DevTools,
214.92 -> you may see mixed content messages indicating
217.42 -> some requested elements were automatically upgraded.
220.26 -> Here we can clearly see that there are a variety
222.63 -> of insecure elements causing the mixed content warnings
225.61 -> including a style sheet and script.
227.75 -> You'll also notice that a request was made
229.7 -> for an insecure JPEG image
231.77 -> which was automatically upgraded to HTTPS.
234.71 -> You can also look in the security tab of Chrome DevTools.
237.76 -> This will show you any non-secure origins.
241.31 -> Under the network tab you can also find
243.19 -> a list of blocked requests.
246.06 -> If you aren't using Chrome
247.47 -> or you just want a quick summary of the errors,
249.33 -> you can also use a free tool like Why No Padlock?
253.08 -> It scans an individual page and shows you
255.14 -> all of the insecure resources.
257.04 -> This tool is easy to use and you can enter your URL
260.1 -> and click on test page and it will show you
262.39 -> any errors that are present. Plus, it's free.
265.62 -> If you're worried about the rest of your site,
267.35 -> you may want to check it in bulk.
269.14 -> There are a few ways to do this.
270.69 -> There's a free little tool called SSL Check from JitBit
273.75 -> which you can use to crawl your HTTPS site
276.6 -> and search for insecure images and scripts
278.87 -> that will trigger a warning message in browsers.
281.16 -> The number of pages crawled is limited to 400 per website.
284.91 -> The Ahrefs Site Audit tool has the ability to detect
287.76 -> HTTPS and HTTP mixed content.
290.72 -> If you already have access to the solution
292.63 -> or someone on your marketing team does,
294.27 -> it can be a great way to be thorough.
295.93 -> HTTPS Checker is a desktop software you can install
299.16 -> to scan your site.
300.39 -> It can help you check for not secure warnings and content
302.93 -> after big changes.
304.36 -> It is available on Windows, Mac and Ubuntu.
307.26 -> The free plan enables you to check up to 500 pages per scan.
310.87 -> SSL Insecure Content Fixer is a WordPress plugin
314.19 -> you can install on your site to uncover errors
316.51 -> that lead to mixed content warnings.
318.55 -> It's free to use and will even automatically perform fixes
321.5 -> to resolve the errors.
322.75 -> Using any of these tools can help save you time
325.04 -> over having to manually check each page on your site
327.75 -> for mixed content warnings and errors.
329.63 -> For a thorough assessment
331.07 -> of the potential errors on your site,
332.74 -> you might consider using a combination of these solutions.
336.07 -> The next step is confirming that the resources
338.03 -> loading over HTTP are accessible over HTTPS.
341.57 -> They most likely are. You just need to update your links.
344.18 -> As an example, let's say our mixed content errors
346.67 -> point to the following
347.8 -> insecure jQuery script and JPEG image.
350.68 -> If we take both of those URLs,
352.35 -> input them into our browser's address bar
354.45 -> and replace HTTP with HTTPS at the beginning,
357.96 -> we can see that they load just fine.
360.15 -> Therefore, we need to do a search and replace on our site.
363.57 -> There are a lot of ways
364.53 -> to perform a WordPress search and replace.
366.48 -> In this section, we'll walk you through
367.75 -> two different recommended options.
369.6 -> If you're curious, we don't recommend
371.49 -> using a tool such as Really Simple SSL.
373.85 -> While it's a great plugin,
375.36 -> it's not best to rely on a solution like this
377.48 -> over the long-term.
378.96 -> You won't be migrating back to HTTP later
381.42 -> so it's best to do it the right way
383.32 -> and update your HTTP URLs in your database
386.56 -> as I'll show you here in just a moment.
388.63 -> If you're a Kinsta customer,
389.97 -> you can use our search and replace tool
391.79 -> which is available right within the MyKinsta dashboard.
394.76 -> Go to your site's tools page
396.32 -> and click on search and replace.
399.02 -> Next in the search field,
400.22 -> enter the value you want to look for in the database.
403.07 -> In this case, we will use our HTTP domain.
406.67 -> Then click on the search button.
408.53 -> The search and replace tool
409.76 -> will show the number of occurrences for the given string.
413 -> Check the replace box
414.44 -> to continue with the replacement process.
416.71 -> In the replace with field, enter whatever
418.91 -> should replace the value you are searching for.
421.3 -> In this case, we will use our HTTPS domain.
424.69 -> We also recommend leaving
425.93 -> the clear cache when ready box checked
428.32 -> to automatically purge the Kinsta cache
430.36 -> after the search and replace process is complete.
432.93 -> Finally, click on the replace button.
435.48 -> Make sure you don't include any leading
437.69 -> or trailing whitespace in either of these fields
440.39 -> as this might produce undesirable results.
443.07 -> If you aren't using Kinsta, you can accomplish the same task
446.22 -> with the free Better Search Replace plugin
448.8 -> and then delete it after you're done.
450.47 -> You can download this tool
451.53 -> from the WordPress plugin directory
453.38 -> or by searching for it within your WordPress dashboard.
456.38 -> After activating it, just search for your HTTP domain
459.66 -> and replace that with your HTTPS domain.
462.9 -> As an alternative, you can also do a search and replace
465.6 -> with the Interconnect IT Search Replace DB PHP script
469.91 -> or WP-CLI.
473.11 -> After you finish doing the search and replace,
474.757 -> you'll want to double check your site
476.55 -> to confirm that the mixed content warnings are gone.
479.2 -> We recommend visiting your site on the front end
481.35 -> and clicking around on a few pages
482.87 -> while looking at the browser status indicator
485.3 -> up in the address bar.
486.51 -> On our site we can see that the JPEG image is now fixed,
489.57 -> but an insecure script warning remains.
491.87 -> That's because we ran a search and replace
493.57 -> on resources loading from our own domain.
496.32 -> The jQuery warning is caused by an external script
498.91 -> that has to be manually updated.
500.95 -> In this case, the script needed to be manually added
503.63 -> to our WordPress header.
505.21 -> It should be using a relative URL so we updated it to this.
508.91 -> The search and replace will most likely fix
511 -> all of your issues.
512.23 -> In general, you'll only run into additional problems
514.63 -> if you have something hard-coded on your WordPress site.
517.47 -> If you think there's an external script hard-coded
519.54 -> in one of your plugins or themes
521.09 -> and you're having trouble tracking it down,
522.87 -> feel free to reach out
523.81 -> to a relevant developer for assistance.
527.45 -> Some of you might be wondering
528.52 -> why you can't use HSTS to fix this problem.
531.71 -> HSTS was created as a way to force the browser
534.39 -> to use secure connections when a site is running over HTTPS.
538.54 -> It's a security header you can add to your web server
540.92 -> and is reflected in the response header
542.8 -> as strict transport security.
544.8 -> However, HSTS isn't a quick fix
547.16 -> for all mixed content warnings.
548.95 -> HSTS merely handles redirects
551.07 -> whereas the mixed content warning
552.59 -> is a feature of the browser itself.
554.62 -> You also don't have control
555.88 -> over whether third-party sites enable HSTS.
558.84 -> Therefore, you'll always need to update your HTTP URLs.
562.89 -> Mixed content warnings can be frustrating to deal with,
565.54 -> especially when there are a handful of causes
567.48 -> they can be attributed to.
568.89 -> Luckily there are some simple steps
570.78 -> you can take to fix these issues.
572.4 -> In most cases, a simple search and replace
574.74 -> should quickly resolve your mixed content warnings
577.06 -> and have your site back to normal in just a few minutes.
579.89 -> If that doesn't fix everything, it's likely
582.05 -> there are one or two hard-coded scripts left behind.
585.15 -> You'll need to find them and manually update them
587.56 -> in order to clear this error or hire a developer
590.56 -> who can do that for you.
593.71 -> Kinsta's WordPress hosting can speed up your website
595.95 -> by up to 200% and you'll get 24/7 support
599.06 -> from our expert WordPress engineers.
601.21 -> Let us show you the Kinsta difference.
603.1 -> Try a free demo of our MyKinsta dashboard
605.78 -> at demo.kinsta.com. Thank you for watching.
609.1 -> And don't forget to subscribe for more tutorials,
611.35 -> explainers and helpful like this.
613.949 -> (upbeat music)
Source: https://www.youtube.com/watch?v=t_VW8ZVtHbk