Move Http to Https & Fix Mixed Content Error In WordPress

Every single website is moving from HTTP to HTTPS, because of the benefits of SSL.

I am sure you also want to make your website/blog secure for your users so they feel safe while visiting. Giving a good and secure experience to your users is became more important.

Further, a majority of webmasters didn’t even plan to switch to the secure HTTPS version. Here are the results of a 2014 poll, conducted by Moz.

Moz Survery

Is it looking tough for you? No, it is not at all.

Many of the beginners don’t understand what is SSL? and How it works? If you are one of them then this is the right post for you which is going to clear all your doubt about the SSL.

What Is SSL Certificate?

SSL stands for Secure Socket Layer, Secure Sockets Layer (SSL) is a standard security technology for establishing an encrypted link between a server and a client—typically a web server (website) and a browser, or a mail server and a mail client (e.g., Outlook).

SSL protects sensitive information such as credit/debit card numbers, PIN Passwords, and Login details. Usually, when users put information on any website then data sent between browsers and web servers in plain text so hackers can easily see and use the information.

How To Check That Website Is Secure Or Not?

You can easily check that website is secure or not by seeing before URL in URL bar of your browser. There you can see a secure sign or not-secure sign like shown in the below image.

Secure StayMeOnline

This is the icon which will show you that the website you are browsing is secure and if you click on the secure icon which I have highlighted above then you can see something like this.

Secure Socket Layer

I sure you are aware of the not-secure icon too, whenever you are browsing any site and you see an icon in the URL bar like below image then its mean the site is not secure and you should not enter your sensitive information there.

Not secure

If you click on the icon which is highlighted above then you can see a message from your browser that you should not enter your sensitive information on the site.

Not Secure

I had my SSL certificate installed in my blog from the initial days of blogging but my website was not secure. It was in Https:// but not showing a green signal of secure that you saw above.

I ignored it because that time I was not aware of SSL and all these stuff.

But now I fixed it and my blog is completely in Https:// so if you are also facing this issue then this will help you a lot.

Fix Mixed Content Error

First, before proceeding ahead, You should understand what Mixed Content Error is?

A website has many resources such as images, videos, stylesheets, scripts. O

It always happens when your website is over HTTP from the day 1 then you change it with HTTPs but all your old resources are over HTTP still now. Mixed Content called when a webpage load with both resources HTTPs and HTTP.

Read more about the Mixed Content by clicking here.

Let start how to fix the mixed content error, I will be sharing method which I had used when I was facing the same problem.

But before moving forward, I suggest you take a backup of your website/blog. You can read here How To Take WordPress BackUp Manually?

For CloudFlare Users

I am assuming you are using CloudFlare as Content Delivery Network for your WordPress website. If not, then you must use it will make your website load faster and many more features.

I have already discussed CDN if you want to start using a CDN then you must read Why Should You Need To Use CDN Right Now?

And also read CloudFlare CDN: Setup Free CDN For Your WordPress Website.

Now login your CloudFlare account then go to Crypto and change your SSL to full.

CloudFlare SSL

Know here why you need to choose Full from the drop-down option.

Now scroll down to the bottom then you can see Always Use Https option ON it.

Always use HTTPS

Now go to your website and check it is showing a green secure icon or not. If not then follow all the steps I mentioned below.

I am also a CloudFlare user, In my case, it had not done in the first step. I had to do many more methods to solve the Mixed content error.

Step 1. Change Website Address

Now go to Settings>General Settings in your WordPress Dashboard. And update your website address from HTTP to HTTPs.

WordPress General Setting

Then click on the Save Changes button to save this. Now visit your website maybe you are lucky and the Mixed Content Error is solved. if not then don’t worry I will help you.

Step 2. Update URLs from Resources

For this whole process, you need to download a plugin called Velvet Blues Update URLs. This is best to replace URLs in WordPress.

Must Read:

There are more plugins which can do the same work for you. here are the some:

Now, Go To Tools>Update URLs and enter your website with HTTP:// in Old URL and with HTTPs:// in New URL

Velvet Blues Update URLs

Check the boxes to Choose which URLs should be updated as shown in the Image. Then click on Update All URLs button it will update all your HTTP URLs to HTTPs.

Now do the same as you did above but using another plugin called Better Replace Search.

Must Read:

Go to Tools>Better Search Replace, put your website with HTTP in the first field and with HTTPs in the second and select all tables.

Better Search Replace

I suggest you check Run as dry run if you do so then no changes will be made to the database, it will allow you to check the results. after checking, you can uncheck this and made the changes.

It will update your website link in all your database files. Now let check again that its done or not, visit your website. If it has done then you are so lucky because it has easily done. if not then don’t worry I am here.

Step 3. Fix Mixed Content Using Developer Tools

Visit your website, I know it is still not secure. But this is the reason why you are still reading this post. Am I right?

Right click on the page and click Inspect, as shown in the image.

Inspect

Now click on the Console, it will show you the errors of the page especially Mixed Content error. You can also see the same as the image on your desktop, mixed content is highlighted with the Mixed content word.

Google Developer tools

You only need to copy the link which has HTTP and use Better Search Replace plugin to replace them one by one.

You can use Search & Replace plugin here to find which file contains that particular string, or you can also use any method which you find better for this work.

Solve all Mixed Content error which you found on the developer tools one by one and mixed content error will definitely fix.

Avoid Landing Page Redirects

Now your website is secured and address is also changed from HTTP to HTTPs. Was It Hard to do?

Maybe, If you don’t have technical knowledge.

When I made my website secure then I immediately check the performance of my website using GTmetrix. I found there one error which is making my website load slow is Landing Page Redirects.

I am sure you will also see the same, It usually looks like.

Avoid Landing Page Redirects

It was red before but I used the same methods which I am going to share with you and now you can see it.

Must Read:

Now open your .htaccess file and copy the below code then post it here.

[perfectpullquote align=”full” bordertop=”false” cite=”” link=”” color=”” class=”” size=””]RewriteEngine On</span>
<span style=”font-size: 14pt;”>RewriteCond %{HTTPS} off</span>
<span style=”font-size: 14pt;”>RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L][/perfectpullquote]

Now go and check your website performace, I am sure you will not see this again. And you website speed will increase as well.

Tools For You

Here are some tools which will help you to check status and the error of your website after migrating to HTTPs.

SSL Labs

SSL labs will help you to know the status of your website which you have migrated to SSL/HTTPs. You have to enter your website URL in the box you can see in the image below.

SSL Labs

Here is the result when I tested my website on SSL Labs, It gave me grade according to the performance of the website. Here you can see…

Result of SSL Labs

It means my website is working good with SSL. It’s your turn go and check your website.

Conclusion

As I mentioned, Having SSL is one of the 200+ factors which help Google to decide your rank in the SERPs. Why are you missing this?

It is not only good from SEO perspective rather it is also good from a User point of view, giving a secure user experience is also good as getting high rank is.

Your users will trust more on you if you are making your website secure for them. If you are running a website where you need to accept payment from the customers then you must use SSL. 

Hope you liked this post and found it very useful if you did then use below’s buttons to share it with your friends who love to blog like you and me.

And you most welcome if you have any query regarding this then drop them in a comment below.

Tell Us, Is your website secure? Is your Mixed Content Error Resolved?

Follow Me

Ravi Dixit

Founder at StayMeOnline
Ravi Dixit is a Blogger and Affiliate Marketer, He is the founder of StayMeOnline Who Loves to help others.
Travelling and learning new things online are his first love.
"I only want a life without any boundaries- Ravi Dixit"
Follow Me

24 thoughts on “Move Http to Https & Fix Mixed Content Error In WordPress”

  1. It is actually a great and helpful piece of info.
    I am satisfied that you shared this useful information with us.
    Please stay us up to date like this. Thanks for sharing.

  2. Nice post. I learn something new and challenging on blogs I stumbleupon every day.
    It’s always helpful to read content from other
    authors and use something from their web sites.

  3. This is really interesting, You’re a very professional blogger.
    I have joined your rss feed and sit up for looking for extra of your magnificent post.
    Also, I’ve shared your site in my social networks

  4. It’s in point of fact a great and useful piece of information. I’m satisfied that you shared
    this useful info with us. Please keep us informed like this.
    Thank you for sharing.

  5. The inspect element in Chrome really saves a lot of time. Great post. It’s easy to fix the URLs in non-wordpress sites but in WP, it’s really difficult to change CSS and JS sources that are loaded by plugins.

    BTW, you might want to remove tags from your .htaccess code.

  6. Thanks for some other magnificent post. The place else may anybody get that kind of info
    in such a perfect approach of writing? I have a
    presentation next week, and I’m at the look for such information.

  7. this airticle is very helful for online marketer,because of to get online business search engine or google ranking is must.Google officially announced that “https” is a ranking factor.so http to https is must needed for search engine ranking.

Leave a Comment