On today’s episode we are going to continue to talk about how to turn an HTML theme into a WordPress website. Right here on Your Website Engineer Podcast Episode Number 458. Hello and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler, and I’m excited to be here with you today, as I’m recording a few days early as I’m getting ready and set to head off to the Automatic Grand Meet-Up. That’s happening this week. We’re in Orlando, Florida for a weekend just getting together with about 800 of my closest colleagues.

Actually, there’s a whole bunch of people that I don’t know. But enjoying some time spending the time with the 12 people that I work with on a day-to-day basis and then the overall support team. And just as many people as I can get to hang out with and say hello to. That’s what I’m doing this week when it comes to what’s in my world. And so today we’re going to talk about – we’re going to continue, we’re going to talk about what happened this week when I launched a website; the one that we’ve been talking about for the last couple of weeks.

But before I do that, I do have two or three announcements and a plug in to share. The first announcement is all about the new default theme on 2020. That will be shipping in WordPress 5.3. And so that’s happening very soon actually. It doesn’t say here in the article when that it. But it’s going to be within the next month or so. We’ll get to that. But the cool thing is that Anders Noren is one of the most well-respected theme authors in the community. And he is an early adopter of Guttenberg and will be leading the design of the upcoming 2020 default theme.

He’s working together with one of the theme wranglers from Automatic and a whole bunch of other folks to make this new theme happen. And so, as you know, when a new version of WordPress comes out, there’s always a 20 – well I guess there wasn’t always. There wasn’t a 2018. But 2013, 2014, 2015, 2016. And that’s the default theme that gets installed when you install WordPress. And so, there are some links in the show notes where you can look at this in kind of the preview.

And it’s going to be really cool, I think. So, that is the first announcement that I want to share with you. The second one is WordPress 5.2.3 Security Release and Maintenance Release was released just a couple days ago. That was the day of the release. That’s a lot of releases in that statement. But it fixes 29 things and adds some enhancements, and then it adds a number of security fixes. So, there’s a link in the show notes if you want to read through the whole thing. Otherwise just update your site or use the auto update feature and allow you to have the latest and greatest when it comes to WordPress.

And then also Jetpack 7.7 is now out. It’s a better experience from the start. They’ve improved the user experience when connecting your site to WordPress.com. It’s faster, more reliable and helps you diagnose and fix issues quickly – as quickly as possible. And there’s also some new tools that will allow you to transfer a connection to a different admin of your site if that’s something that you need. They also included a better video blog. And so that allows you to upload videos and host them on WordPress.com rather than your own host server.

And then once you have uploaded the videos, you can add them to your posts and pages using the video blog. There’s a lot of other things that’s happening in the Jetpack space. But you can read all about that over on the link in the show notes or just search for the blog at JetPack.com. All right, moving on to, “Is there a plug in for that?” section today. What I want to talk about is called, “Buy X, get Y free.” Or actually the name if it is, “Buy one, get one free WooCommerce.”

And it’s a plug in that’s brand new on the WordPress market. And it basically will allow you to create a few deal on your WordPress or your WooCommerce based websites. So, you can set a global of how much of a product needs to be bought in order to set a free quantity or you can specify the amount of a free product given on a global level. And it adds the same products as free products. So, you can enable Buy One, Get One Free deal on specific products as well.

So, if you wanted to kind of get away from some advance configuring or maybe even a preview or plug in that you need to do the Buy One, Get One Free, you can check out this plug in, in the WordPress repository. You can find it in the show notes for Episode Number 458 or search for Buy One, Get One Free in the WordPress repository. All right, let’s go ahead and talk about part three of this series, Creating a WordPress theme out of HTML. Let’s say it’s a launch day.

This actually happened on Friday. My wife was going to a conference – a pharmacy conference that was a Friday afternoon/evening and then all day Saturday. And the goal was to have this website live so that she could start promoting it and talking about it and then actually getting sales when it comes to figuring out and starting to promote the second part of her business. And so, what I wanted to do – I ended up – I was driving to my parents, and I was at my parent’s house. And the kids were still asleep, and I got up early in the morning.

And I was like, “Okay, I’m going to get this thing launched.” And everything that I had been doing to this point on my server or my local computer. And so, when my wife wanted to look at a few things and she wanted to take some screenshots to do a few things, I was like, “There’s nothing really to see.” So, the first thing that I needed to do was get it so she could start seeing some of the responses and some of the things that were going on, on the website.

So, the first thing that I did – and this was probably earlier than what you would normally do if you were deploying a site for a client to look at – maybe if you are ready to go live. But this was kind of to the point where the client – the client, aka my wife, needs to see what I’ve been doing. And she needs to be able to see and make some adjustments and suggest changes and whatnot. So, the first thing that I did on that Friday morning was I connected each site, the local and the live, to wpmigratedbpro. And why I did this is this is probably the most fantastic plug in.

But it will basically allow me to push data back and forth between the WordPress database without actually having to go and export data from the database and then import into the database. And so, I installed it on both sites. I added my license key to both sites. And then it made the connection to both sites. I was able to talk to each site individually. So, then what I did was I pushed everything that was on the development site to the live site. And so that was everything. That’s the post, the pages – everything that’s in the WordPress database was copied over.

And it has the ability to do a find and replace while at it. So, it took my test domain, and then it moved it to the live URL which worked really well, almost flawlessly to be sure. And it was real easy to go from that point to – from having nothing online to having actually something to look at. Well, I didn’t have the theme uploaded, and I didn’t have any of the plug ins. So, that was the next thing I needed to do. I opened up an FTP editor and I ended up – I drug all the plug ins that I was using on my local site – I drug them to the FTP server to the live site.

I waited for all that to happen. And then I did the theme. Now I have a workflow that allows me to set up a Get Repository. And then I can monitor the changes. And then I can push them. And I was having a heck of a time trying to do that on Friday morning. So, I just kind of skipped that step. At some point I want to do that so whenever I make changes locally, I can just save a version of Get, and then I can push it right to the server. And I don’t have to really duplicate my efforts.

I worked on it for like 15, 20 minutes. And I was like, “Okay, I don’t really have time for this, this morning. I want to keep moving on the project.” So, I just kind of aborted that. But I was able to get all of the plug ins and the themes. And then I did kind of a refresh on both sites, and everything looked the same. That’s when I told my wife she could start looking at it. And then there was time to do all of the changes, all of the things that I hadn’t gotten done yet I had to start working on.

And like I said, if this was a deploy to a live site, I would have been way better prepared. And I would have had the dev site almost completely done before I did this first step. But sometimes you just have to get it moving. And that was the case on that Friday morning. She had some errands and some things she was doing later in the morning. So, I had to have it at least to a point where she could see it and do the things she needed to get ready for her presentation and what not.

All of those changes were made on my local site. And then I would push the changes to my live site. And so especially if I was making theme edits or CS edits or changes or things like that, that was all done locally. I saved them. I liked them, and then I pushed them by basically going to the FTP editor again and dragging and dropping those files. And one of the things that I did that made it a little bit easier to find what I did – or what I was doing, I actually rearranged, or I clicked on the date timestamp inside of the FTP editor.

And from there, I was able to see the files that were most recently changed. So, anytime I made a change I could see, “Oh, it was 6:59 in the morning or 7:02 in the morning.” Those were the ones I just changed. And then I could drag those over much, much easier. That made things a lot simpler. Once I was happy with the visuals, then I had to make sure that actually the WooCommerce piece of it worked. And this was really exciting for me because I work on WooCommerce all day, and I don’t ever get to build in my own store.

And what I wanted to do was I wanted to have this very simplistic website. I wanted to have three products, maybe a silver, gold, and a platinum. But I didn’t want to have to have the people add them to the cart manually or look at a product page. So, the template that I used had a – it had a pricing table. So, it shows all three different packages and all three of the different plans and whatnot. And so, I had that, and I did that, and I launched that. And basically, what I did was I just took the URL for the button and instead of making it go to a product page or whatnot, I just basically used – there’s a URL scheme that you can use with WooCommerce.

You add a slash – so you put the domain name, slash, add dash cart – or add dash to dash cart. And then you put the ID of the product. And when you click that button it automatically adds it to the cart and redirects you to the cart page. And so, once they decide, “Yes, this is what I wanted to purchase,” they click the button, and then it goes to the cart page. And then from the cart page they could add a coupon code if a coupon code was necessary and then go to the checkout and checkout.

Speaking of coupons, I had to create some coupon codes. There was one for the event that I wanted to give everybody 10% off if they made the purchase during the weekend. And then I also started making some coupon codes for myself so I could use that checkout process, and I could test that whole process of putting something in the cart and then moving it through the checkout. And I also had to set up Stripe – Stripe with a live key so I could take a payment from Stripe.

That was the payment processor that we used. So, we had to log into my wife’s Stripe account, and I had to find the public and the private keys and all the stuff that you need there. I plugged it into WooCommerce, and then I created a coupon code so I could save my – so I wouldn’t have to be charged the full $169.00 for the plan or the package the session that they are buying the digital product. So, I didn’t have to do that. And then I could say that I wanted $168.00 off.

Well I did all of this, and then I ran my first transaction. And I ended up – I didn’t use the coupon code. So, I charged myself $169.00. And then I got to use the refund button and make sure that all the refunds worked. So, it actually worked out. But I wish that I wouldn’t have charged my credit card quite as much. So, I ended up doing that. And I got that all working. I tested the Stripe payment, so that was good. And once I was done with that and I made sure that process worked, I ran it through a few more times with that coupon code that I created that was 100% free.

And then from there, I used that coupon code to test the email flow and what did that look like. So, I made some adjustments. I probably made 10 samples orders or so going through and just making sure that all the thank you messages were right. So, I customized all that I could inside of WooCommerce. And then I needed to add some additional text. And then I wanted to do that. And so, I created a duplicate template inside of WooCommerce, inside of the template folder inside of my child theme.

And then from there, I ended up added all the text. And of course, it was not styled right the first couple of times. And it took me a little bit. And then I finally got that. I ran a few more tests to make sure that’s what I liked. And then I was all set. Then it was time to tell you client – or in this case, my wife, that is was launch time, to start promoting. There were some small things that I could do. There’s tons of things that I can continue to do and continue to improve on and work through.

And we’ll talk a little bit more about that next week. Some of the things I would like to improve and change and whatnot. And so, it was launch time. We started promoting. We actually made five sales in the first couple days. And so that was really exciting. And it was one of those things that I set up WooCommerce then on my phone. They have an iOS and an Android app. And then I just turned on push notification so anytime a new purchase came in I got a buzz on my phone.

And I got dinged when a new thing came in. And so that was really exciting to be going about my day and all of a sudden, my phone vibrated, or my watch buzzed. And I looked at it, and it said, “Hurray, you have a new order.” And so that was really exciting. So, if you’re interested in checking out what the website looks like and you can see all of the things that I need to do yet. Hopefully you can’t see them all. But there are a few things that I do want to talk about next week and preparing to get ready for that to be “officially done.”

But you can go to functionalmedicinece.com. And that’s where you can actually purchase a ticket to the live symposium if you are interested in functional medicine. But if you just want to see what a website looks like that was preprogrammed with HTML and I turned it into a WordPress theme in just a couple days – or I probably have, I don’t know, 15 hours into the project, maybe 20 hours in the whole thing. And I’m really pleased with the way it turned out. I really like the way it works and looks. But there are some small tweaks that I still need to do and some adjustments that need to be made.

So, that’s what I’ll be working on over the next week when I’ve got a little bit of downtime after Grand Meet-Up. And next week we’ll talk about some of the gotchas and a-ha things that I was like, “Oh, man. I wish I had remembered that. Or I wish I could have done that.” And a few other things when it comes to launch. Like the things that I want to tweak, some of the changes that I need to make and whatnot. So, we’ll talk about those next week as we kind of wrap up the four-part series.

Until next week, you can take care. And we’ll talk again soon. Bye-bye.