Podcast Episode

459 – Creating a WordPress Theme out of HTML – Part 4


Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

New Tab Redirect Plus will allow you ta have your comment visitors link open in a new tab or windows so your site remains open, when someone clicks on a link in a comment.

Creating a WordPress Theme out of HTML – Part 4


  • page.php couldn’t be a template
  • Forgot wp_head() in the header
  • Didn’t use the coupon code when testing
  • Needed two menus
  • Date of the event was never on the website!

Things to improve on the site

  • Fix a few Javascript reloads in certain areas
  • Make the speakers section a custom post type, with custom fields that hold social accounts
  • New colors
  • AutomateWooa
  • Change notification emails and where they go
  • Make the schedule easier to enter. It’s not accessible in the WordPress Dashboard as of yet
  • Set up git and GitHub

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today’s episode, we are going to wrap up the series on how to create a WordPress theme out of HTML, and we’re going to talk all about some of the gotchas, some of the things that I didn’t really expect when I was launching and a few things I still need to improve and still need to fix right here on Your Website Engineer podcast episode number 459.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited here with you today because of course we are wrapping up this series, and it’s been a good one. I’ve had a lot of fun building a website from an HTML template and turning it into a WordPress theme, and I’m really excited about the process and just continuing to evolve and build the website so that it works better and that it is more functional if you will

So, we’ll talk about that in just a couple minutes. I've got some announcements and a Plugin to share. The first thing, I'm back from the Automattic Grand Meetup, was in Orlando for the last week, and it was just an incredible time.

It was really encouraging to see old colleagues, meet new people, meet new folks, and every time that I go to one of these things, I am always impressed with how diverse of a community there is inside of Automattic, how much talent is involved, and just the good nature of people. The talent is amazing. There're always people that know so much more than what you know and creating amazing things and whatnot.

I took a class, a Zero to JavaScript class. This is a three-hour workshop one day, and man I learned what I didn’t know about JavaScript, and we built a little application and continued to evolve on that application. I think I’ve got a couple more features that I want to do just to kinda work on my skills, but I think I’m ready to dive into JavaScript. I know that I’ve probably said this 17 times in the last four years, but I feel like I understand what I didn’t know.

You know, when you start to learn something, you don’t know what you don’t know, and so I started with this class, and I learned a lot of things, and then I added some new improvements and was able to add some features without I guess any help, which was pretty encouraging to me. So, yeah, that’s a little bit about the Automattic Grand Meetup.

We spent some time – Matt, in front of the stage, did the keynote, and he did an Ask Me Anything Townhall like he does every single year, and then he also had arranged – or not specifically him, but rearranged some of the best speakers that were out there. One of the guys’ name was Matthew Luhn, and he is an animator for Disney, and he worked on some of the Pixar films and whatnot, and it was just really cool some of the stories.

And there was a guy named Jim Quick who had a keynote that talked about learning something fast and just how to learn and really even to – when you shake somebody’s hand at a WordCamp like you can remember that name, and you can remember them from hours to days and to every time you see them at a WordCamp. So that was good.

There was one that was all about breathing. We did this breath work exercise, and we had 300 plus people lying on yoga mats inside of the ballroom and just working on breathing and kind of calming ourselves, and that was really cool, just an overall amazing event.

It was my sixth Grand Meetup, and I’m excited to kind of get back home and get back in the swing of things as now we got to get back into ticket work and continue to develop skills and to make me a better developer and a better happiness engineer.

So, that’s a little bit about the Grand Meetup. If you want more information, I’m sure you can search for the #A8CGM, and you can find that on Twitter and Instagram and all those places, and happiness engineers and developers and designers alike are all commenting on that.

All right. Let’s go ahead and dive right into the announcements. The first one is something that was on WP Tavern this week, and it was called Yoast to reward contributors with the Yoast Care Fund. And so Yoast is well known for the Yoast SEO plugin, and they announced a program earlier this month called Yoast Care, and it aims to reward volunteers in the WordPress community.

Care stands for community appreciation rewards, and so, thousands of people contribute to WordPress. Some choose to contribute to code. Others do support every day. Many people spend their free time running or helping various WordPress teams. Most people do it because they love WordPress, and so they are – Yoast Care is granting $500 to around 50 volunteers per year. So, they have set aside $25,000 for the first year as an open source – for an open application process for nominating contributors.

So, there’s a whole bunch more in the article over on WP Tavern. It’s linked in the show notes for episode number 459. So, you can read it there.

The next article is also on WP Tavern about WP Tavern, a little on the meta side, but Justin Tadlock enjoins WP Tavern. He is a guy out of Alabama, and he has a website over at JustinTadlock.com, and just has a ton of knowledge, just has a lot of WordPress snippets on his website. He co-authored The Professional WordPress Plugin Development book, and he has been an avid reader of WP Tavern since its inception, and he has a background in creative writing and whatnot, so he’s excited to join the team over at WP Tavern.

So, if you remember a few weeks ago we talked about Jeff Chandler stepping down, and now Justin Tadlock will be filling his shoes and his role. So, that is the second news item that I want to share.

Then the third one is something called Local Lightning is now in public beta with major performance improvements. So, this is the Local by Flywheel Software is now – and they have something called the Local Lightning, and it is an improved version of the previous that’s called Local by Flywheel, and it gives you the ability to directly port your files to Flywheel, and it’s really kind of a cool thing. I don’t have a Flywheel account right now, and so I can’t really check it out myself.

But it is – Local Lightning and Local by Flywheel have been developed as two separate applications in order to allow users to migrate their sites at their own pace. So, they run alongside of each other and they’re named different, and the Local by Flywheel is the old version, and the new Local Lightning app is simply known as just Local.

So, users can migrate their sites, exporting from the old version and dragging them into the new app for works, and so it’s under beta, and you can find more information right under the Local Lightning announcement post that I’ve linked in the show notes. And so, those are the news things for the week.

The plugin that I found in the Is There a Plugin for That section, and this is a simple one. It’s probably – I didn’t open it up to see how many lines of code it is, but I doubt it’s very many, but it is a plugin called New Tab Redirect Plus. And basically what this plugin does it allows you to have links inside your comments so when a visitor comes to your website and they leave the link in their comment, it will open in a new tab or new window. And so that way, it keeps your website open and then it launches a new tab so your readers can go to well, a new tab.

It’s a pretty simple plugin. It just adds that extra code needed to turn a link to – instead of opening in the same browser, opening into a new browser, and that’s all it does. And so if you’re interested in adding that feature to your website, I recommend checking out New Tab Redirect Plus. It is a theme in the WordPress repository or you can find it in the show notes for episode number 459.

All right. Today, let’s go ahead and talk about some of the gotchas, some of the things that I wasn’t really expecting and some of the errors that I ran into, some of the issues that I kind of stumbled upon when launching this new website of my wife’s, and then we’ll talk about some of the things that I want to continue to work on.

And so, one of the things that I stumbled upon right away was the page.php template couldn’t be a template page. And so for some reason when I created the page.php page that I created it and I put a template – the little template block at the top, so I called it – you know, it was the, you know, such-and-such page. I forget what I even named it, but because of that, WooCommerce, it thought that that was like a custom template page.

And so, what happened when I created an order and I was testing the checkout flow, instead of taking me to the thank you page like thank you for your order, here’s the information, here’s your order summary, yada, yada, yada, instead of seeing all that, it took me back to the homepage, which was really abrupt. You know, you just paid for something, you hit submit, and now you’re back to the homepage with no confirmation whatsoever that you've made a purchase.

And so, because I had not a default page.php template fit page, that kinda messed a few things up and caused a little bit of issues.

The other thing I find out while testing WooCommerce is when I got to the cart page, it was styled all wonky. It was just like this weird table in the wrong format, and the checkout page was in much better, and I was like well, why isn’t the CSS loading, and I was trying to find a custom CSS to pull in so I could make just WooCommerce look nicer.

And then I started looking at the source code, and there was no CSS coming in from WooCommerce. And I was like what is going on here? Why isn’t it doing it? And so of course I’m googling everything. I'm like almost about ready to ask my colleagues have you ever seen this before. It turns out I didn't have a function at the bottom of my header, and so this is in header.php. There was a – you need a wp_head. It’s pretty much the last thing before the body of the HTML starts, and if you don’t have this, then all of the CSS for your plugins won’t load properly, and that’s what was causing such the wonky issue.

So, I forgot that and spent – I don’t know, I probably spent two hours troubleshooting trying to figure out what was wrong there, and it was simply I forgot the function. And I’m pretty sure I’ve done that in the past. So, haven’t learned that lesson yet, but forgot wp_head in the header was a big gotcha. The other thing or another thing that kind of was a gotcha was I created a coupon code so I could do some testing with Stripe, and again, I actually tested without using the coupon code.

So, I charged my credit card $169 whatever the cost was, and then I had to, you know, a few hours later refund that cost. And so, one or two of those is okay when you are on your website and processing this back and forth, but Stripe doesn’t really like when you do those refund charges all the time, and so I should’ve used the coupon, so I got down to the one dollar, and then if there was some sort of issue like me charging a dollar to myself isn't as big a deal as like hitting my credit card for 100s of dollars whatnot.

So, that’s something that kinda was a gotcha that was like eh, that probably wasn’t the best, but, you know, it worked out in the end.

The next thing that was kind of a gotcha was if you looked at the website that I created and it’s at FunctionalMedicineCE.com that it has a really nice one. It’s kind of mostly a one-page site, but then there’re multiple pages like the contact form is on a separate page, and there is another page for frequently asked questions and whatnot.

So, I wanted to create – the template itself had this in a scrolling feature, so when you clicked on Speakers or on sessions or on Schedule or whatnot, it kinda did this nice scroll down the page, and the only way to do that scroll was to have to use the ID tags, and so basically inside of HTML if you create a link on your homepage and then you do a slash and you can put a pound sign and then the ID tag, then that will automatically slide you down the page, and it worked really nice and it felt really well, but when you put the full URL in the mm bar or in the menu item itself, you know, HTTP:// you know, I’ll put all of that in, then the JavaScript didn’t work right.

But when I just put pound and then the ID, it would slide down the page perfectly. And I was like what is going on. Now I could’ve dug into the JavaScript, and now that you know that I’ve taken a JavaScript class, that might be my next thing that I do and figure out what’s causing that, but I was like I need to figure this out. I need to launch it and whatnot.

So, I ended up creating two menus, and so there was a menu for the main page, and so that’s the main menu, and then any subsequent page has its own menu, and then those links take you to certain sections of the homepage.

So, I figured if you’re on the contact page but you wanted to look at the schedule, a full-page refresh was okay because you’re actually moving from the contact page to the subsection of the homepage. And so, that’s one of the things that – probably not the best to have two menus, but that was easiest way to solve the problem that I had at that time.

And the last thing that was kind of a gotcha that I had just found out right before I started recording this was the date of the event was not even on the website. It had a countdown timer, so it says 50 some days and ended up getting an email from the contact form and said, hey what is the date of the symposium? I think I know what it is based on counting backwards the 52 days or whatever, and so it’s like oh, that was a complete oversight and overlook, and so I ended up fixing that just a few minutes after I got that email. So, those are some of the gotchas that happened across my launch of my website.

Now let’s go ahead and talk about some of the things to improve on the site. And so remember I was trying to get ready for a conference my wife went to, and we were just trying to get all the pieces in a row, as much information about the event, and we wanted to make sure people could check out and they could use a coupon code. So, that was really kind of my baseline. I had to get all of that stuff done.

Well, there’s a few JavaScript reloads on certain pages of the site. If you go to the site FunctionalMedicineCE.com and if you go to the pricing section, as you hover over one of the pricing structures, it will slide up, and I don’t really like that, so I got a figure out where that code is to remove it, and there're a few other places that I’m just like mm, I don’t really need that JavaScript there for the fancy animation. So, I’m going to have to go ahead and remove some of those things. So, I’ve got some of those to – again, it’s kinda minor stuff, but it needs to be done.

Another thing that I want to do it to make the Speaker section a custom post type with custom fields that have social counts and whatnot. So basically, the homepage it’s just all hardcoded into the template itself for all the speakers. And I don’t want that. I want to be able to go and have a special Speakers’ area. This is all so that for the next conference in the next time and the next time like every time we run this thing, my wife can go in and add all the details, and she doesn’t necessarily need me to copy and paste all the information into the website.

And so, I want to be able to go to a certain section where there're speakers. They can put the speaker name, the speaker bio, and then put all of the social counts; Facebook, Twitter, Instagram, LinkedIn, and those will automatically populate in the right place of the theme. So, that’s something that I need to do.

There’re also a few places that need new colors that need to be worked on. There’re a few colors that aren’t quite up to snuff, a few things that haven’t pointed out to me. So, I need to spend a little bit of time going through and making the color adjustments throughout the site. Nothing major, but a few minor things that I want to fix

Also notification emails are still coming to me. That’s both for the store [inaudible] [00:15:10] and for the contact forum and pretty much everything is running through me, and then I have to for the messages to my wife. So, I need to fix all of that routing to make sure those are going to the correct place.

Also there’s a plugin as part of the Prospress acquisition inside of WooCommerce that happened a month or so ago, and they have a plugin called AutomateWoo, and that is a plugin that can do some really cool things. So if people purchase certain products, they can get emails or they can get reminders and all of that kind of stuff. I want to set up kind of that automation. It also does the cool thing if somebody gets to the checkout page and has entered their email address but they didn’t actually make the purchase, they can send emails and say hey, it looks like you left this in the cart. Would you like to actually make the purchase? And so, I want to do that and get AutomateWoo all set up.

And then also kinda going along the same lines as the speaker section, I also want to make it easier for the schedule. And I'm not sure exactly how to do that or how to program that, but right now, again it’s all kinda hardcoded right there on the template page. And so, I want to make that in the dashboard and be able to say oh, here’re the times. These are the afternoon slots. These are the morning slots, and kinda put them in order and make it easier and make it all go through the WordPress dashboard.

And so, a lot of things are basically just fixing things that are hardcoded and make them into the WordPress side of things. Nothing urgent, urgent, but you know, these are things that I want to do to make it easier for the next time that we run this conference or whatnot.

And in the last thing is I don’t have – I talked about a workflow that I have that’s basically – I can make changes locally and then I save a version of Git or in GitHub, and then I can push them life to the server and whatnot. So, I have that. I don’t have that set up for this particular site.

I was running into some errors and some issues when I originally set things up, but then I had to launch all in the same day, so I'm like ah, I’ll just manually upload the FTP files and not do it “my correct way,” and so I need to set that up and get that all working to make sure that it’s a lot easier to develop, I could make the changes and I can push them live and it just kinda speeds up though process.

All right. Well, that’s what I wanted to share with you this week. It has been so fun. I haven’t done a launch of a project and probably 8 years. Okay, maybe not quite that long. I guess I’ve been at Automattic almost 6, so it’s probably been 6 1/2 years or so since I actually took something from concept to development and then launching it.

And so, it’s been a fun project. It’s fun to kinda get back into that realm and see some of the pain points of setting of different plugins and whatnot, and so that’s what I wanted to share with you this week. Hopefully you got some insights and hopefully learned a few things, and if you ever want to try it, and I think this is a – it’s kind of a good test to see if you can develop a theme out of an HTML theme and turn that into a WordPress theme. It’s kind of a fun project. It shouldn’t take you tons and tons of time, and there’re lots of things that you can learn. So, I recommend doing it some time if you are interested in building out themes and whatnot.

So, that’s what I want to share with you this week. Next week, we’ll continue to talk about WordPress, but I’m not sure what yet, but we’ll do it. Every week there’s more WordPress information. And that’s what I wanted to share with you.

Take care, and we’ll talk to you again soon. Bye-bye.