Ever wonder how to get the little green padlock to show up next to a URL to make sure the website is secure? Word on the street is that Google will start penalizing websites that are not https. Having a secure site is something everyone should do anyway and it’s not too difficult to achieve. Let’s Encrypt is a free and totally effective SSL certificate you can install on your website.
I updated a website (that is hosted with WP Engine) to https using Let’s Encrypt. Getting the certificate was very easy. Actually getting the green padlock to appear next to the URL was another matter. Once I got the certificate I still had errors. I got the error saying I had “mixed content” which means some of my content was being sent via http and some weren’t. I wasn’t sure how to fix my errors so I downloaded this plugin called SSL Insecure Content Fixer after reading an article from WP Engine. I’m still not sure what the plugin does but I’m thinking I don’t need to use it. I still wasn’t seeing the green padlock.
I did more research and found that the culprit turned out to be all my image files. I fixed all the URLs by changing http to https for the URLs of the images but I still got error messages. You can see where the errors are on each page by opening the webpage on Chrome, going to View->Developer->JavaScript Console. Finally I found this handy dandy test called Why No Padlock? and was able to get a record of all the errors I needed to fix for each page. Basically the Why No Padlock? test and the Google Chrome JavaScript Console show you the same information. Remember to submit the URL of each page when doing the Why No Padlock? test. Besides going through each page one by one to fix all the URLs, I also checked any PHP functions and CSS style sheets to make sure I fixed all lingering http URLs. It was tedious, but I fixed all the errors.
The last part of this process is to make sure that all of my visitors only access the secure site and not the http site. If you have WP Engine, it’s pretty easy to do and requires clicking on a few buttons in the settings. You can chat with customer service and they are super helpful. If you don’t have WP Engine or if you have another hosting service that is not as customer service oriented, you have to add a few lines of code to your .htaccess file. I went to my file manager which is not called file manager in Dreamhost but is actually found clicking on WFTP. I downloaded my .htaccess file, and added these 2 lines of code at the very top and then FTPed the edited .htaccess file back. I was scared my site was going to break but it worked! You can also watch this YouTube video to help you if you are scared because honestly I was scared. I’m starting to think I need to change my workflow when building websites. I think installing an SSL certificate should come pretty much at the beginning of the process. It would be nice if by default these certificates were already installed to websites.