In the past, we have shown a few techniques where you are required to use a SSL certificate to secure your WordPress page(s). The most popular one is creating a donate form for non-profit organizations in WordPress. A lot of the non-profits like to use Authorize.net which requires them to have a secured (https://) page. In this article, we will show you step by step on how to secure your WordPress pages with SSL.
First thing you need to do is acquire and setup a SSL Certificate. You can ask your host if they already have a SSL certificate available for you. Some do provide SSL Certificate with the hosting account (for example HostGator Business Plan use coupon “wpbeginner” to start for $0.01 for the first month). If your host does not have one available by default, ask them if they have that as a paid service (majority do). This can range from $50 – $200 / year. The cheapest one we found was getting it through GoDaddy for $12.99 / year. The downside of this is that you can only use it on 1 domain, and it does not have a wildcard option by default. So you cannot have a subdomain like store.xyz.com and use it there as well. To setup a SSL certificate on the server, you simply give the details to your hosting company, and they will do it for you.
Once the SSL certificate is ready to use on your server, now we need to implement it in WordPress. The easiest way is to install and activate WordPress HTTPs plugin. After you activate it head on over to Settings » WordPress HTTPS menu. Enter the SSL host name which will be your domain name. Then check the box Force SSL Exclusively. This basically means that only few pages on the site will be HTTPS, the others will be redirected to HTTP (normal). You can choose to force SSL on administration if you want, but it is not required.
Now lets go to the Pages tab in the WordPress admin panel. Select the page you want to have SSL certificate on (most likely your checkout page, donate page etc). Click to edit that page. Right above the publish button, there is a new checkbox that says Force SSL.
Simply check the box and click publish/update. Your new page will now be a secured page. Make sure that you get the little green sign in Google Chrome.
Basically, if the green sign is next to your URL, then you are done. You should stop reading this article now. If you see either yellow or red sign, continue reading the article.
How to Fix Non-SSL Elements on SSL Page
Google chrome shows a yellow or red icon if they see a potential risk on the site. Firefox is worst because it shows an error alert message warning the user. This is NOT good for your website’s reputation (specially the donate page of non-profits). When you see a yellow message or red message, it means that you have insecure content on a secured page. All what that means is that you may have images and scripts that are http:// instead of https://. You might be wondering why that might be the case? Well basically if you inserted an image in your donate page through WordPress, have images in your sidebar (social icons), have any social media scripts (facebook like box), or any other sort of media item, then your page has insecure content. A quick fix for this would be to use iThemes Fix SSL/Non-SSL Links plugin.
This plugin will simply change all http:// requests on the page with https:// requests. This will cause an increase in server load, but it is not significant enough.
It is important to note that this plugin does not alter anything that you add manually (i.e facebook like iFrame in the sidebar etc). You should just have those with https:// anyways. This plugin takes care of all the scripts loaded in the header and such. Plugins that are not coded properly will cause issues. Those fixes are on case by case basis.
We hope that this article has helped you. If you have any questions feel free to leave a comment below.