Alright, you have an idea, you thought to bring it up online. Initially, you thought not to invest much and began building your website without must-have services like SSL. But then when you come across website services like SSL post applying it the site does not load securely even though it has the SSL certificate. Have you come across such circumstances with your website? If yes, worry not check this blog out on how to fix mixed content of a WordPress website.
In today’s blog, we are going to check out what is mixed content. and how to debug mixed content. and how to fix mixed content of a WordPress website. Without any further due, let’s check this out.
What is mixed content?
Mixed content is nothing but some pages, links, and images of a website loading on HTTP despite having an SSL certificate which then causes conflicts. The conflicts are site loading issues, unsecured issues, or design issues post SSL installation. Like we have shared in the introductory part of this post, when you have built the site without services like SSL, this means whatever you have done has been done under the HTTP prefix. So anything that you have uploaded like images, and links would be in HTTP. Later you realize “Hey I need SSL security on my website for that we need SSL”.
You go about SSL, install it, and verify the website, that’s where the site either shows insecure or does not load as intended. Here, since all the website content was built before the SSL installation it is not going to work as expected. This whole situation might leave you to the hosting provider’s support queue, while they might not have much scope of support for such content issues you might wonder how to fix mixed content of a WordPress website.
How to debug mixed content?
In this part, we are going to review how you check if your website is having this issue. The ideal way is to inspect the website pages through an inspection tool. This way you would be able to figure out what objects are still using HTTP.
Step 1) We are going to use Google Chrome, you can use any browser that is favorite to you. Well, promotion time, check out our best web browser blog here. Open your website on the browser.
Step 2) Tap on the 3 dots in the top right corner of Chrome. Navigate to More settings > Developer tools > And tap on the console tab. You can also top right on the mouse and click on inspect and navigate to Console Tab.
Step 3) Look out for something that says mixed content. You may want to tap on images, and other parts of the web page to figure that out.
How to fix mixed content?
Now that we have found mixed content, the question is how we can fix this in the easiest way. There are 2 ways we can fix this one by using a plugin called really simple SSL plugin and the other one is you take each content change from HTTP to HTTPS manually. Doing this manually is going to take some time and neither it is doable when a nontechy guy is on it. Let’s check this further.
1) Using Really Simple SSL plugin
Step 1) Log in to the WordPress admin dashboard, and navigate to the plugins section. Click on Add new> and search for Really Simple SSL plugin and install it. After activating the plugin follow the below steps. You can also download the plugin here.
Step 2) Once you have activated the Really Simple SSL plugin, you would be seeing something like the above(1), that’s the first thing, hit okay and the issue should be resolved. In case you do not see it working for you then go for the screen (2). For this navigate to the Settings tab and enable the mixed content toggle button and options shared in the screenshot. The issue should be resolved.
2) Using Better Search Replace
Step 1) Log in to your WordPress account and navigate to Plugins > Add new > Search Better Search Replace plugin and install it. Additionally, you may download the plugin here.
Step 2) Post activating the plugin, navigate to Tools > Better Search Replace and an URL replace interface would show up as above. You can fill in the necessary information and uncheck the Dry Run and then hit Run Search/Replace as shared in the screenshot. The issue should be resolved now.
Note: If the steps did not solve the issue, it might be that something is preventing for the plugins to complete the task. The last option is to search and replace using the database manually.
3) Manually Replace URLs in the database
This process is tricky but still can be followed to fix the issue when there is no other option left. Please navigate to phpmyadmin section of your control panel and follow the below steps.
Step 1) Export your database in SQL format, and open it using Notepad.
Step 2) When the file is opened with Notepad, go to Edit > Replace and replace the URL starting from HTTP prefix to HTTPS. Post this, you can import the database back to phpmyadmin and the site should work as expected.
Nowadays most of the hosting plans are coming with Auto SSL or integrated SSL features. If your hosting plan has it, you must consider installing SSL on it first and then begin website development. If you haven’t done this, do not worry following the above steps would definitely fix this issue. This concludes about how to fix the mixed content of a WordPress website. Which steps did help you in fixing the mixed content? do let us know in the comments section below. If you need any help or have any suggestions to make, then do reach us via the contact page here. Happy National Hammock Day!