On today’s episode, we are going to talk about how to launch a new WordPress theme when you already have a WordPress theme, right here on Your Website Engineer podcast, episode number 490. Hello, and welcome to another Your Website Engineer Podcast. my name is Dustin Hartzler, and I’m excited to be here with you this week because, well, I’m always excited to be here. And, this week is especially exciting because we don’t have any kids this week. We have dropped the kids off at my parents for the next couple days, and my wife and I are working on projects. So, I’ve got some home projects I’m working on, and of course, I’m working on some web projects.

If you don’t know or haven’t heard, my wife has a couple online business, and we’re revamping some websites and working through getting some new things on the websites and whatnot. So, that was part of my weekend. So, I’ve got to spend some time working on house projects. And, a much larger time this week working on things for her, mainly because it just takes a long to do some of the things I’m looking for, and if I don’t have a full dedicate couple hours to sit down and work, things don’t get done. So, today, I’m going to talk about how I launched a new website for her just the last couple days, and we’ll talk about that.

But, first, let’s go ahead and talk about the couple announcements that I found. The first one is all about WordPress’s 17th birthday. It’s really hard to believe that we’re right between that sweet 16, and that incredible 18-year-old version of WordPress. So, I found an article over on the WP Tavern, and it just talks a little bit about some of the things that are going on in the WordPress space, about the birthday, and whatnot. Currently, WordPress powers 36.7% of the top 10,000,000 websites, which is just crazy. It just blows my mind. But, the first official lease was landed in May 27, 2003. So, it just continues to get better.

The only downfall on the birthday is it’s one of those ones that you cannot celebrate together. There is no way to celebrate that together because, well, you can’t really get together with groups more than 10 or so. So, that is a little bit about the WordPress and its birthday. If you want to read more about that, you can find it in the show notes for episode number 490. And, also, I have a post on the WP Tavern about WordCamp Europe and the 2020 schedule announcements. It plans to debut networking rooms and virtual sponsored booths.

It's just nine days away, and I’m sure that we will talk about this in the upcoming weeks, just to let you know how it goes, and how the online conference is. It’s scheduled for a Friday and Saturday. It’s split into two tracks. The tracks will run 30 minutes of talk simultaneously, and then each talk is followed by 10 minutes of Q&A. The schedule mixes in a few 10-minute lightning talks, and with 15-minute breaks every hour. So, it’s a neat thing. It’s a way to continue to keep the community together even though we can’t be physically together. So, it has even the session in there with Matt Mullenweg. There’s a conversation with him right before the closing remarks. And there’s an online schedule that you can get to from the article and see what’s happening.

It looks like that you can favorite your sessions that you want to go to, and then you can send your favorite sessions to you via email. So, that’s kind of a neat feature. And, I’m really interested in how this will work because now that WordCamp US is now going to be a virtual event, it’s going to take some of the learnings, and some of the things that have been seen with WordCamp Europe and continue to do those things. Hopefully, it’s not a thing of the future where it’s always virtual. I think that we’ll still get to the point where we will have in-person events, and probably, in 2020.

So, those were the announcements that I wanted to share with you this week, and then the plug-in that I wanted to talk to you about is one called Carbon Offset. And, the 1.0 version of this, it’s a brand-new plug-in, and it calculates the greenhouse emissions from your website visits and integrates them with Cloverly for offset and payments. It’s a neat plug-in, and a neat idea, so I thought I’d highlight that one, and you can find a link to that in the show notes for episode number 490.

All right, today, let’s talk about a few things about launching a new website. So, we’ll talk about the Functional Medicine CE website, and that’s the one that you can visit at fxmedce.com, or functionalmedicinece.com. Either of those will take you there. And, that was a website that I purchased a theme from ThemeForrest. And, I had completely used – I bought the theme, and then I just changed it into a WordPress site. I basically took all the header content and put it in header.php.

I talked about this a few episodes back. This was something that we launched, probably, back in September of 2019. I’m looking here in the show notes to see if I talked about it. Creating the WordPress Theme back to August 27, episode number 456. It was when I started this, and it was like a four-part series. So, 456, 457, 458, and 459 talk all about what I did to take this HTML theme and turn it into a WordPress site, and launch it, and get ready to take online sales.

Well, I had been having problems. And, if you had looked at the website at that point, it was basically a landing page where people could buy three different packages: a silver, a gold, and a platinum for actual live events that were coming up. It had a countdown timer. It had the speakers. It had all that good information, but I didn’t have a good way to sell replays.

And, I started to pull in the information and create products, and the styling was just horrendous. It was going to take me hours of creating custom CSS to get the WooCommerce styling to stick out. That’s all I wanted. I just want the regular, what a normal page looks like with Storefront, or just WooCommerce. That’s what I wanted. And, the cart and the checkout page looked okay, but the other pages were just atrocious. So, it was like, let’s go ahead, and let me see if I can fix this. Well, I worked and worked and worked, and I spent way too many hours trying to fix and get the CSS working properly. It was one of those things that it’s just like, well, maybe this is better if I just restart.

So, what I wanted to do – and this was the first time, I believe, that I’ve done this. I don’t remember ever doing this before. But I created a child theme on Storefront. So, Storefront is the theme that we support. At WooCommerce, it’s the free theme that’s offered on WooCommerce.com. So, I’m like, well, I really like how the pages look when it is the – the product pages, the cart, the store, I liked the way that that looked. So, I’m like, well, what if I just add my styles and my things to it. And, so, that’s what I wanted to do.

So, I did a lot of prep work. I did some homework to try to figure out if this was possible, and it was. I had to have some custom templates to keep that landing page exactly as I liked it, and then add a bunch of custom CSS into the child theme. But I ended up, I did it, and I was really with the results. I still got some tweaks and some things to do, but that’s one of the things that I want to talk about today.

So, How to Launch a New WordPress Theme, and this just takes a lot of prep work. And, so, what I ended up doing was, I spent a lot of time just debugging and building it on a local environment. The great thing about doing it on a local environment was I was able to keep the main theme live on the live site, and so I could compare. Okay, this is what it looks like on my DevSite. Okay, this is what I want it to look like on the live site, and then I would just compare and contrast. And, I would need to bring some custom CSS from the theme that I had created before. I had to do just a bunch of rearranging and getting things to work right.

One of the cool things – and I don’t think I’ve ever done this before either in a theme – is I was able to use the hooks. And, Storefront comes with a bunch of hooks. So, if you wanted to display some content before breadcrumbs, or after breadcrumbs, or before the title, or before the header, all this, there’s different areas where you can hook into and display your custom content, which was super cool and gave me a lot of flexibility, and I could do a lot more things. So, I ended up doing all that. I did all of that, and I worked tirelessly, getting that all done.

And, I was doing all this prep, and I was just continuing to think, okay, how am I going to launch this? What am I going to do? And, of course, you’re like, oh, I can do this today. And then, eight hours later, you’re still doing little snippets and little pieces just to make it right and to get it to work properly. And, so, after I prepped, and I figured out what I needed, then what I needed to do is I needed to add product. So, on my current live site, there were no products really that were visible. So, I could go in, and I could customize all the products.

So, these products are – there’s two different video replays for on-demand content, and I wanted a way to highlight the speakers and put the learning objectives and a summary of what it was that they were going to get. And, so, I found a plug-in. It’s a WooCommerce tab manager, so I can put each of the sessions in its own tab. It worked really, really well. And, it looks really great. So, I was able to do all of that. I could add products. I could add image to the products, and nobody was going to see it because there wasn’t a store. So, I didn’t have to worry about, okay, people are going to stumble upon this page.

So, I did that, and then I added custom post types for all the speakers. The speakers are on the site, and it’s a constantly revolving, there’s going to be two conferences per year. There’s always going to be new speakers. And they were just cluttering up the page sections. And, I wanted to have a custom – I was gonna do a custom template anyways for the speakers. So, it’s like, okay, well, why don’t I just make a custom post type for the speakers, and so I created a custom post type and put them – so, there’s post, and then pages, and I have one called speakers now.

And, the problem was all the content was in pages. So, then I had to copy all of the content from the page into the custom post type, which worked well, and I could do that before launching the theme because I had created the custom post type. Code was in a plug-in, so I enabled that plug-in on my live site. And, again, nobody saw this because it wasn’t displayed anywhere live on the website, so that was all good. I did all of that. The step that I missed and the stuff that somebody reminded me of because they lost access to content was make sure that you copy all the stuff from your functions.php file.

In your old theme, if you have some stuff that’s in functions.php, I had to define a customary for video replays, which is the crux of the entire site. People need to get in and be able to log in and see their videos, which were housed in the video replay section. And, since I had that code in the functions.php file, which it probably shouldn’t have been there anyways – when I changed themes, we lost that functionality. So, then I moved it into a plug-in into my custom – it’s the custom post type plug-in, and then it will work now whenever I change themes, which is a good thing. So, I have to make sure that you do that. Make sure that any useful content that is not theme related is moved out of the functions.php file.

Then, I switched to the new theme. I quickly look, and there was quite a few things that were broken and didn’t really work well, but then I recommended – and, this is the next step, is to go in into the customizer and do basic customizer things. So, I uploaded the logo, which was good. And, I changed the menu, so the menu kind of worked or worked better than it should have. It actually had items on it, so that was good. And, I set the homepage as a specific page, which was good. I needed to do that. And, that basically got my site, mostly, up and running to make sure that things were okay.

I went in, and I refreshed or resaved the permalinks because that always can sometimes give you some wonky things, especially with some custom post types. And, then I started checking to see if there’s any issues. Like, let’s add a product to the cart. Oh, okay, I don’t like how this button looks. Let me change the CSS. And, this isn’t a high traffic website.

This is one that was a all-day process for me to get this to a state. It wasn’t quite ready to launch, and then to get it ready for launch, and then to actually launch it. So, it took a little while, but it was one of those things that once I hit the button and turned it on, I would say that it was in a wonky – doesn’t look the greatest for 10 minutes. And, then, I was able to get it to the point where it looked really good. Good enough that if anybody stumbled upon the site, they wouldn’t have had any problems purchasing a webinar replay, or one of the replays, or navigating and seeing what was going on on the site.

So, I was really happy with that. So, I thought that that was kind of the steps to go through. And, I wasn’t – sometimes, you launch a brand-new website, and you’re like, oh, no, it’s going to go down. Is it broken? I didn’t really have that sense of franticness, I guess, because I had tested a bunch of things on my DevSite, and then I had moved them methodically, and I did everything that I could before I could change the theme. Then I changed the theme, and then I did the menus, and the homepage, and I got that working, and then that really took a lot of the customization out of the way.

There was still a few things that – it was still broken on my test site but looked good on my live site, so I didn’t question that. I tried to figure out what was going on there. I’m still working on a few things like that. And, then, there was some plug-ins that needed to be removed. And, then, that’s probably the last step. It’s to go in, remove any unnecessary plug-ins. Can you remove the old theme? Do you need that anymore? Just get rid of the stuff that you’re not using.

So, for me, an example, I could go in and remove all the pages. Since I have that stuff in a custom post type now, there’s no reason to have it in pages. So, I can go and remove all of those pages now once I got all the links changed and whatnot. Then the last step, of course, is breathe. You’ve done it. You’ve successfully launched a new site.

And, I guess, the big thing here is, I was just launching a theme. None of the functionality changed. I didn’t have to deal with transferring any purchases, or getting people access, or doing any of those times of things because I just changed the visuals, which is one of the beautiful things about WordPress and just makes it really easy to go in and make those adjustments and make those changes. Had I been changing – I don’t know. It’s always a big pain when you’re getting – a customer’s paying for things, and you have new orders, and old orders, and memberships, and all that kind of stuff. It’s a really big hassle to try to move that from a DevServer to a live server and keep everything in sync.

So, I didn’t have to do anything. I just changed the visuals. It made it really, really nice, and really simple to do. So, that was the process. If you want to take a look head on over to functionalmedicinece.com. That’s what it looks like right now. I’m sure I’ll be making adjustments and changes and making it better as the week goes on. I’m working on another site for my wife, as well, so that one’s not getting the attention that it needs right away, but I’ve got some work to do there.

So, that’s what I wanted to share with you this week. It’s not a terrible process to launch a new theme. But the big thing is, you just got to spend a lot of time testing it on your DevSite to make that everything works. So, when you toggle it, you turn it on, you can do some adjustments. I was all ready for something catastrophic to really look bad, so that’s why I jumped into the customizer first.

If I can get the menus, and set the homepage, and do some basic customization settings to get it to look pretty decent, I’m gonna be happy with that. Then if I got in there, and those settings didn’t fix things, or things looked really, really broken, I could always change back to the old theme, and then the site would continue to work as normal. So, that was kind of my status and the plan, and I hope that this gives you some tips, and some tricks, and some ideas on how to change a theme when you’re ready to change your theme. So, that’s what I wanted to share with you this week. Take care, and we’ll talk again soon. Buh-bye.