On today’s episode, we talk about how to add an SSL certificate to your website, right here on Your Website Engineer Podcast, episode number 304.

Hello everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler, and today we are going to be diving in in the 304th episode of the Your Website Engineer podcast. Today, we’ll be talking about how to add an SSL certificate to your website because this is, well, recently something that I’ve done to yourwebsiteengineer.com.

And, I also wanted to let you know, I am back from the grand meet up. I spent a week in Whistler, Canada, with 467 of my closest friends, my colleagues, if you will. The entire company of Automatic got together, and we flew from all parts of the world, all 50 countries that we represent, and made it to Whistler to spend some time together in person just learning. I learned a lot about WPCLI, a lot about the command line, a lot about how to use the console in Chrome to do some debugging and stuff. And so, a lot of really great information that I get to take on and use on a daily basis to just improve my efficiency with my computer and just be able to navigate more quickly through WordPress and just figure out a few things along those lines.

So, that’s what I wanted to share with you, that I’m back, I’m excited, I’m excited to continue the podcast episode, and yeah, we’re going to dive right into the SSL certificate.

Not really anything in the way of announcements that’s happened in the last couple of weeks when it comes to WordPress, but I did get quite a bit of feedback on the, “How do I do things with Alfred?” that I talked about in the last episode or so, how I navigate the WordPress dashboard with Alfred. And, I will go ahead and make a – I put together a workflow that I custom created, and it basically takes, when you’re on the dashboard page, it goes up to whatever browser window that you’re using, it goes and takes the URL, and then upends wp-admin/plugins or whatever. So, I’m going to make that as a workflow so you can see it. I’ll add the ones that I customarily use, the ones that I normally use, and then you can just go ahead and you can add more things to it. It’ll work for – I think I’m using Alfred 2 or Alfred 3. Whatever the newest version of Alfred is, that’s the one I’m using. So, I’ll go ahead and paste that into the show notes for the last episode, and I can put it in this episode as well so that you can see what that is and just install it, and you’ll be able to start navigating it around your dashboard.

So, that is kind of the announcements for the day.

The plugin of the week that I want to share with you today is called Pixel Your Site, and it is a plugin that will allow you to insert the new Facebook pixel on WordPress. You can add standard events, and you can enjoy superb commerce Facebook pixel integration. So, if you’re interested in seeing if Facebook is working properly, or if the ads that you’re using are converting, then you want to add that pixel, and the easiest way to do that is by adding this plugin called Pixel Your Site. And so you can go ahead and do that by using the link in the show notes for episode number 304, or you can just search for Pixel Your Site on the WordPress repository.

All right, today we’re going to be talking about the SSL certificate. And, this is something that I’ve always really just shied away from because it’s really been a big pain in the rear to get set up and configure. Because, there’s all these different steps. You’ve got to have a dedicated IP address, and you’ve got to buy a certificate, and you’ve got to activate your certificate, and you have to generate some random key thing, and you have to install it, and it’s just been hard. Even back in the day when I was building websites for clients and I was creating Woo Commerce solutions for them, I was always excited when they were like, “Oh, well, we just want to accept PayPal.” I was like, “Okay, good. Just PayPal. There needs to be no SSL certificate, because you’re not transmitting any data. All of that is being hosted elsewhere,” and so I really liked those.

If they wanted to build a store and they didn’t want an SSL certificate, or if I didn’t want to worry about the SSL certificate, there’s actually a plugin out there, it’s called Meerha Cart or something. I’ll put a link in the show notes. It's a weird way to spell it, but it basically is an SSL environment where you suck down the content of what your theme and your cart and your checkout page looks like, and then you check out on their site, but it looks like your site. So it’s different but it works, and it gets you around that – you don’t need an SSL certificate.

Mainly the big sticking point is you need a dedicated IP address, and in order to do that, you can’t really have the shared hosting environment with the $5.00 a month plan. You need a little bit more robust hosting platform where they give you a dedicated IP address.

So, those were just some of the stipulations and some of the hard things that are just like, “Oh, well, setting up this SSL certificate is just painful. It’s a big deal. It’s time consuming and what not,” and I’ve just never done it. Plus, I don’t sell anything on my website, so there’s really not a whole lot of point. But, there’s been a lot of different, great information that’s out there about adding an SSL certificate and why it’s so much benefit. There’s general security benefit, so when you enforce HTTPS, you’re guaranteeing that the information passed between the server and the client can’t be intercepted and messed with in any way.

I’ve heard reports that there have been – or, I guess the next point is that your customers and your visitors will see the site as it’s intended. And, I’ve heard of examples that hotel Wi-Fi systems, and even some internet service providers can mess with HTTP traffic and do stuff like add their own advertising code. But, they cannot do this over HTTPS. SEO, there’s SEO benefits. Google says that you rank higher, and I’ll put just a link in the show notes for that. And, you just get, also, it’s like, you have a secure site. So, people feel that you’re more trustworthy, and they have a better indication that, “Hey, this is a legit site that I can spend some time on.”

So, those are some of the reasons that you may want to go ahead and do it. And definitely you need an SSL certificate if you are taking details from users on your website, especially payment details or credit card information. You definitely need an SSL certificate. And, I also would venture to say if you’re taking email addresses and contact information, even phone numbers and email addresses with names and stuff like that, if you’re accepting that information with a contact form, then you should have an SSL certificate on those particular pages, if not your entire site.

So, let’s just go ahead and talk through some of the steps here. My steps were a lot different because I was using Flywheel, or I’m still using Flywheel as my host, and Flywheel just automatically does it. You just basically go into your Flywheel dashboard, you click “enable SSL,” and from there it takes a little bit of time, and then all of a sudden, your WordPress dashboard is SSL compliant. Or, now you navigate to HTTPS://yourwebsiteengineer.com/wp-admin, and you start logging in and you’re on a secure environment.

There’s a little bit of steps that I’ll talk about just in a little bit to get the rest of your website up and complaint with SSL. But, let’s first talk about if you’re not using Flywheel, if you don’t have the built-in ability to click one check box and for them to do it all, here’s basically how it works. You have to, first, buy that SSL certificate. You can do it pretty much anywhere. There’s a lot of places. You can just Google SSL certificate. You can buy them from your hosting company. Your hosting company sometimes is just a reseller for a third party. It is – it’s just kind of a tedious process to walk through. You just need to follow the instructions really closely. They work fine. You can even get them from letsencrypt.org. Let’s Encrypt, the foundation or the project that’s trying to get all websites encrypted, and I believe those are free, that you can get over there as well.

But, you basically just have to purchase one, or get one, acquire one in some way. And then, the first thing you want to do is you want to just, once you get it – basically you have to purchase it or buy it or get it or however, and then my best suggestion is to, once you have the key, ask your hosting provider how to install it, or have them help you install it. I’ve never installed one by myself. I’ve always had the hosting provider help, or even just recommend, like, “Hey, where should I purchase this, and how do I get it set up and running?”

If you don’t go with a Let’s Encrypt or one of the other ones that are out there, normally about $50.00 per year, and it gets up a little bit more expensive if you want the green checkbox, and you want your name in the verified area of the browser. So, it really just depends on your level of comfort or how much you want to spend on a certificate.

But, once you get that certificate installed, now we’ve got to start massaging our website to make sure that our pages are being served over this secure connection. So, the first place we want to do it is the WP dashboard, and we want to make sure that our dashboard is secure. And, this is really simple. You add one line of code to your wp-functions.php file. Wp-config.php. I’ll get it right. And, it basically is defining that forced SSL on the admin is true. There’ll be link to the show notes to all this code so you don’t have to remember it. And then basically, you go to your dashboard, and it’s set and you’re ready to go.

This is all Flywheel did for my site. They added it as one line of code, and now my dashboard is fully secure, and I get the green little padlock that’s happening in the upper left hand corner, or the right hand corner, depending on your browser.

Then, the next thing you want to do is try to get it working on one of your pages on the front-end. You can do this on a site wide basis, or you can start with a plugin called WordPress HTTPS, and then SSL in parentheses. And then with this page, with this plugin, you actually get a check box that you can add to poster pages, and you can force it to be SSL. So, you can go ahead and just do this on a post or a page or a test page or something to see if you get the check box, see if you can actually force it to be HTTPS. Something else that you can do, is you can try to view this page, and you can try to view it as an HTTP://, and then if you refresh it, see if it automatically adds the S to the HTTPS.

So once you’re doing that, once you’ve got that set up and you look at your website, you probably will no longer have that green little lock icon in the upper tool bar of your browser because you probably have mixed content on your website. And what this means is, any static content that’s on that post or page or just being served from your server, if it’s got an HTTP request, then what’s happening is you’re not going to have a fully secure page. It’s still going to say HTTPS, but it’s not going to have that green verified little lock next to it.

So, what we want to do is we want to go through our website, and we’ve got to go through and do some checks to make sure that all URLs are now relative URLs. And so, the ones that are, like, HTTPS, or HTTP://yaddayaddayadda.image.jpg or whatever, if those are not being served as secure images, then you won’t get that green padlock.

So, you want to go ahead, and you can even do some find and replace, you can do some stuff within your database, or you can just go – I mean, we’re working on just one post or one page, so we can go in and we can just manually look at the code and change anything that has a fixed URL, which is http:// to https://. And believe it or not, you can actually just go in and put //, and so that will pull in whatever type of URL you’re using. So, if you hard code in HTTPS and then you decide someday that you do not want it to be HTTPS, then you have to go back through and you have to re-change all of that. But, if you just use //yourwebsiteengineer.com/image.jpg, then it will go ahead and it will look to see what that page is telling it to do, whether to be secure or unsecure, and it’ll pull in the correct HTTP or HTTPS.

Sorry this is getting a little confusing. It’s kind of a hard thing to talk about. But essentially what we want to do is we want to run a sequel query. And we can just go real quick and, again, this code will be in the show notes for this episode. But, it basically will go through your post table, and it’ll look for anything that’s got http:// and it will just replace it with the //, so we can go ahead and just do everything on your entire site, which is really really nice to do that much much more quickly.

And so, basically what we want to do is we just have to go in, and I have a really cool tool that was very helpful to me as I was going through this process, and it’s called Why No Padlock. Whynopadlock.com. And, you can go there and you can put your site URL and you can go Why No Padlock, and you can see exactly why the padlock isn’t showing up. And so if I go to – I’m going to go right now, live, while we’re doing it. Whynopadlock.com and we’re going to look at Your Website Engineer. And, by the time this podcast is released, I’m hoping to have my entire site set up as secure. So, yourwebsiteengineer.com, and the website is very unaesthetically pleasing. It doesn’t look very good, but it does the job and it goes in and basically, what it’s doing is it’s going to look at your website, and it’s going to look at all the links associated with your website, and it’s going to come back and let you know if there’s any problems or any concerns.

I know that, in the past when I did this, it was finding – let’s see, what did it find? It found some images, it found some – I was pulling in Google fonts, and I didn’t have that as a secure URL. Some other little basic things like that, and some images that were hard-coded into my theme. Okay, so now I’ve got the results back from Why No Padlock. It says I’ve got a valid certificate, it says that it’s valid through next year, it is from Let’s Encrypt, and it says that there’s 189 items that have URLs in them, and there’s only two of them left that I need to fix. And so, those are two that I need to work on and get running before I take my entire site and turn it into an HTTPS site.

So, this is just – it’s a plug away type of a thing. You’re not going to get them all right away. Or, you could get them all right away and then when you add new content, maybe it doesn’t work out. But, you just have to take your time and go through and try to figure out how these are getting in there. And, it’s going to be a constant battle. It’s kind of like when you set up a website and then you start doing responsive stuff to it. Like, every once in a while, you’ll have to check to make sure are your images, when you’re adding them, are they still responsive on your phone, or on your tablet? You just have to keep constantly checking these types of things.

Now, once you’ve got one page set up, or a couple of pages set up, and you’re pretty confident that most of your big issues are taken care of and they’re secure, then what we want to do is you want to start forcing HTTPS everywhere. And the easiest way to do this is to write three lines of code into your HT access file. Or, you can actually do that with – I think with that plugin that I talked about earlier, you can just force https everywhere if you want to, but it’s just as easy to not use a plugin and use something like this.

So, there’s three lines of code to do that, there’s a couple of lines of code if you’re using it on an engine X server, it’s basically doing the same thing. It’s basically saying that any traffic that hits HTTP, redirect it to HTTPS. You also want to make sure that in your WordPress dashboard that your WordPress URL and your site URL are set to HTTPS://yourwebsiteengineer.com.

So, like I said, the last step is just, you’re always going to need to keep your eye on thing. You’ll find pages with mixed content and mixed warnings, and you just need to keep investigating and keep fixing things and finding things. One thing that I did note, that when I was doing this, that I had made menus on my website. I had hardcoded a menu for my webinar page because my webinar page wasn’t an actual – I guess it was kind of like a custom page that I set up. So, I tagged that as http://, and when I navigated to that, and then I navigated to the next page because I don’t have any rewrite rules on yet, then it was taking me away from an HTTPS site.

So, I wanted to make sure that that – you want to make sure that there’s no hardcoded things in any themes, or child themes, or plugins that you’re using. So, that’s another thing to look at. And, you want to check any static images in your site to make sure that those aren’t hardcoded, especially in your theme or your – just anywhere. And, you’ll find all of this with the whynopadlock.com.

And so, my recommendation is to take some time and actually install an SSL certificate now. Now, my site says SSL complaint, and maybe someday I want to actually have a Woo Commerce store on my site because I’m a support ninja for Woo Commerce, and I want to just start using the platform so that I can understand problems and concerns that customers are having, then the hardest step of getting that all set up is done. I’m going to feel a lot more secure that my website is safe and secure, that people are seeing it as it’s intended, and there’s no ads or any other pixels being added by hotel networks or internet service providers or anything like that.

And, if you are interested in making a switch, maybe you’re on a shared hosting environment like Blue Host or somewhere, and you just want to oomph your web server a little bit, I highly recommend checking out Flywheel. I’ve got an affiliate link atyourwebsiteengineer.com/flywheel, and you can get a free certificate there, and it’s basically one check box. You collect one box, and it will make your dashboard secure. And then all you have to do – I think there’s another setting inside their dashboard that says “Force all traffic to HTTPS.” So, it’s really really simple. It’s a lot less steps than my kind of talk-through, but I wanted to kind of encompass all hosting providers and all platforms that are out there.

So, that’s what I wanted to share with you today. It’s hard to believe that I’m saying that I’m excited about adding the SSL certificate because this is always something in my past that it’s like, “Nope, I don’t like SSL certificates and I’m not really interested in them in any way, shape, or form,” but now I’m excited to have a fully secure website. Now I just need to make sure that the majority of my pages have that little green box instead of the little yellow caution flag, and we’ll be all set.

So, that’s what I wanted to share with you today, and we’ll talk again soon.