Podcast Episode

456 – Creating a WordPress Theme out of HTML – Part 1

Announcements

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.

WP Restaurant Price List is a simple plugin that helps you show the price list of your business thanks to its visual interface you can enter both the titles of the categories (of sales items), and the name and description of the items in addition to the price.

Creating a WordPress Theme out of HTML

Reasons to do this:

  • Make the code smaller / light weight
  • Don’t have to use required plugins
  • Don’t need to learn new plugins (Elementor / Advanced Custom Fields)
  • Make it work exactly as you’d like

The steps:

  • Find or design an HTML theme that you like
  • Set up a development site locally
  • Open a text editor and create the following files
    • style.css
    • index.php
    • header.php
    • sidebar.php
    • footer.php
  • Copy the theme’s CSS to the WordPress Stylesheet
  • Start divvying up the HTML into PHP files
  • Change the link to your header for the stylesheet to <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
  • Use <?php echo get_template_directory_uri(); ?> as the prefix for all images, CSS and JS files
  • Create a functions.php file to use for custom code
  • Add the necessary code for adding menus to a WordPress theme
  • Create a new menu in WordPress and add code to display menu, next to the current menu
  • Add appropriate classes to make the menu function the same as the HTML version

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 start a series on how to create a WordPress theme out of an HTML template or out of HTML itself, and we’re gonna dive in and talk about some of the steps, and it’s kind of a lengthy process, so it’s gonna take a couple episodes to do that. So, that’s what we’re gonna start today, right here on Your Website Engineer Podcast, episode No. 500 – or, 456.

Jumping the gun just a little bit with the 500 – we’re not quite there. Fifty episodes or so to go to get to 500. But, welcome to Your Website Engineer Podcast. My name is Dustin Hartzler, and I’m excited to be here with you today because we’re going to start talking about WordPress, and we’re gonna get heavy into just a little bit of the technique. I’m obviously not gonna talk about code on a podcast because that would be kind of silly. You’ll have to refer to the show notes, and you can always find those at yourwebsiteengineer.com, slash, and then the number of the episode. So, in this case, it’s yourwebsiteengineer.com/456.

Today, there’s one announcement and one plugin that I wanna share with you, and then we’ll dive right in. The first announcement is – it’s been kind of a slow news week, so I could only find one real thing, and this makes me very happy. It says, “Popular WordPress themes to remove intrusive admin notices to conform to the new theme directory requirement.” And so, this was something that happened last month – the theme review team for WordPress took action on – they’re trying to curb obtrusive admin notices, trying to require all themes to use a special admin notice API and follow core design patterns.

Before this rule went into effect, many themes would use just big, branded notices upon activation, and sometimes, it had people trying to prompt them to install more plugins or instructions for getting started. So now, they’ve come up with a guideline to make sure that all theme reviews – all themes are doing the same thing, and this really makes me happy because those obtrusive notices can be a huge, huge deal.

The interesting thing is even Storefront, which is the flagship theme for WooCommerce, actually was in violation of this. You installed Storefront, and then just had this huge banner, and it says, “Install WooCommerce,” or “Learn more,” and it has all this information. The team has finally made it a little bit better. They’ve made it a lot smaller and very much less obtrusive. And, I believe one of the qualifications, too, is it has to be dismissible. You don’t wanna have to have somebody look at that all the time unless they take action or whatnot.

And, this is importantly true – I had a use case this week when I was working with someone in WooCommerce, and they had a question – I think it was on live chat – and they couldn’t figure out why their payment gateway wasn’t working. One of the 18 notices that were across the top said, “This specific thing is wrong,” and they couldn’t see it because of all those other notifications. So, this makes me really happy. I’m really excited to see it. It makes it consistent and makes it easier for people to get rid of them and not see those notices on the top of their WordPress dashboard.

Moving on to a plugin this week is a plugin called WP Restaurant Price List. This allows you to create a restaurant menu for your either pub, brewery, restaurant, ice cream shop, whatever. It’s one of those ones that looks really nice, and it has the ability to – you can put both – so, you can say the title of the entrée, and then you can have a little description underneath that you can say the price, and it’s really nice, and it has a great interface to allow you to add those details.

You can use a short code to put those in in the right area on the website, so that’s one interesting one that I found this week. So, if you’re running a brick-and-mortar restaurant, or maybe you have a restaurant that you allow people to order from online, and they can take their orders to go or whatnot, then this can be a plugin for you. It’s called WP Restaurant Price List, and you can find that in the WordPress repository by searching for that, or as always, there’s a link in the show notes for episode No. 456.

All right. Moving right along here to the favorite part of the show, the part that we’re gonna talk about WordPress today, and this all stems on the fact that I am building a website for my wife, and she is looking to put on a virtual conference for pharmacists, and it’s one of those things that…yeah, I can definitely help out. I work with WordPress all the time, but I don’t get to do the fun stuff sometimes.

Helping people is fun, enjoyable, and very rewarding to help somebody figure out a problem that they may be stumbling with WordPress, but sometimes it’s just good to start from scratch and build out something. So, we kind of had an idea of what we were looking for. We wanted to get a theme that was all set up for WordPress, and it was ready for an event, and we just had to plug in the information and we were ready to go.

Well, the thing is, I started looking for these types of WordPress themes, and they just didn’t make me happy. There were some things where I was like, “Oh man, if it didn’t have this,” or “I don’t really like the way this does this.” So, I decided to buy an HTML theme, and then turn it into my own WordPress site.

So, some of the reasons behind this decision and some of the reasons that you might wanna do this is to make the code a little bit smaller or lighter weight. I don’t know if you’ve ever seen WordPress plugins before – sometimes, you’re watching the demo, and you click from page to page, and there’s this weird spinning icon, or sometimes they’ve got – up in one of the corners, it has “Change the colors,” and you can press a button and it changes the colors throughout the entire site, or it has 42 different template pages or whatnot.

There’s a lot of stuff in there that you just don’t really need once you get it set up. There’s a bunch of what I like to call bloat; there’s a lot of extra stuff in themes because they wanna make sure that it’s easy to use for as many people as possible. So, that was one of the things – one that was really nice, and I was like, “Oh, I don’t like how that looks.” Every time you click a page, there’s a spinning icon, an animation thing, and it just slowed the whole thing down.

The other thing that I didn’t like – there was a handful of them that we were like, “Oh, let’s buy this one, let’s do this one,” and it said, “You need this plugin, this plugin, and this plugin in order for this theme to work.” I was like, “I don’t really want to use this plugin.” Maybe it said to use Contact Form 7 for the contact form to work right, and I would rather use Ninja Forms. I didn’t wanna spend all this time trying to figure out how to make one work versus the other. So, that was another reason that played into “Oh, I should probably just build this myself.”

Another one was the need to learn new plugins. A lot of them were like, “In order to use this, you need to use Beaver Builder, Elementor, Divi,” or any of these other page builders that I’ve never used before, and it was just like, “Oh, this would take me more time to learn this, and really unnecessary.” Or, advanced custom fields – that was another one. “You have to use advanced custom fields for this theme to work.” I was like, “Well, I can write my own custom fields. Why do I need a plugin to do that? What kind of issues am I gonna run into if I don’t use advanced custom fields?”

And so, that struck off a whole bunch more off my list, and then, I wanted to make it – one of the other reasons is you can make it work exactly as you like, and so, what I mean by that is if you wanted to have a special area on the back end to list all your speakers for an event or a conference, you could do that, or maybe if you wanted to – you could just really customize that back end experience, really customize those templates, and all that kind of stuff.

Being kind of a control freak, I was like, “I really just wanna do that all myself.” I wanna have it exactly as I like, and then, I can go through, and the HTML does have – it’s got a bunch of different style sheets and whatnot, and I can strip out a bunch of stuff that’s not needed, and I can get rid of that stuff.

But then, I am basically left with a WordPress theme that’s got about eight pages, eight templates, and a CSS page, so it’s very lightweight, and it will load really quick, so that’s kind of where I went. I wanted to use somebody else’s theme because I didn’t have time to design one of my own. I’m terrible at designing, and I don’t like to test all kinds of different browsers, and so, buying an HTML theme – and, the one that I ended up buying was one from Theme Forest.

I’m not ashamed to say that. I do like their HTML themes there. I’m not a huge fan of the WordPress themes over there at Theme Forest just because there are so many different variations, there are so many different designers and developers there that every theme could be completely different, and that makes it really hard to do multiple projects if you’re buying individual one-offs from Theme Forest.

So, I ended up buying it. It was, like, $20.00, so it was a good investment, and I went ahead, and I actually started yesterday. I started building this, and we’ll see how far I can get. We wanna launch it by next weekend, and so, that’s the ultimate goal, is to get it done by then. I’ve made a really good start, and we’ll go ahead and talk about what I’ve done so far, and then, next week, we’ll continue with the journey and see how far I get by next weekend. Hopefully, I’ll say, “Oh, it’s all done, and here’s what I’ve done between releasing this show and the next one.”

All right, the steps: The first one is you find or design an HTML theme. If you are into HTML and you wanna design something really cool, you can go ahead and do that. I have no skill, no talent in that way, shape, or form, so I went ahead and I just purchased one, like I said. Then, the next step was to set up my development site, and I do this because it just makes it easier and faster to do some testing, and so, what I did there was I created a site locally. You can use Local by Flywheel, there is Desktop Server. I’m using Valet Plus and do a bunch of stuff via the command line.

Honestly, I had to refresh my memory. I haven’t done this for probably four months – create a new site via the terminal and command line – so I had to look all this stuff up again. I was looking up a lot of things, believe it or not, that I kind of remember how to do a lot, but then, not doing it for quite a while, I had to refresh my memory on a lot of things.

So, I got my local site set up, and then I created – basically, I created a folder inside the WP-Content folder, and under “Themes,” I created one, and I called it the name of my theme. You can call it “Dustin” or whatever you want. And then, inside of that, I opened up my text editor, and then I made a few pages. A WordPress theme has to have at least two pages in order for it to work. It needs to have a style – that’s CSS – and it needs to have an index.php. Those are the minimum requirements that you need. So, I created both of those, and I also did a header, a sidebar, and a footer, and those all have the extension .php because I know that I’m gonna need those as I continue to build out this website.

So, I created all of those, and then, the next thing is you have to create a comment block at the top of your theme of the CSS page, and it basically is the instructions to tell WordPress that it is the – what the theme is, what the version number is, who the author is, all that kind of good stuff, and you can see all these snippets of code in the show notes for episode No. 456.

So, I went ahead and I put that at the top, and then I dug into the files. It basically – what I bought from Theme Forest was just one folder, and it had all of the – everything – all the CSS, JavaScript, images and stuff were in an assets folder, and then, it had just a bunch of HTML pages inside of the – or, it was HTML text documents, if you will, and those were all in one folder.

So, I went in, I found the main default CSS page, and I copied the whole thing. There’s something like 5,000-8,000 lines of CSS in there. I forget. I scrolled for a really long time to highlight it all, just to see how big it was. Again, that’s different optimizations for different-sized browsers and whatnot, and I’m sure there’s stuff I will eventually cut out of there. But, I went ahead and copied all of that, and then I pasted it all into this CSS page inside of the WordPress theme.

The next thing you do is you have to start divvying up your HTML and putting it in these PHP files. What do I mean by this? You have to go in and – so, the header.php – I normally make everything that is below – or, from the top of the page or the top of the index, that HTML, and I basically used the index.html that came with the theme – that’s kind of the main home page – I take everything that goes from the menu, and then I go all the way up from there.

That includes all the header information, that pulls in the style sheet, that pulls in the favicon, that pulls in – this one actually had a Twitter card and a Facebook card, all referenced there in the header – all that good stuff, and then, all the menus, all the header, and all that kind of stuff. It all comes – and, I put into the header.php file. This basically – whatever content that you want to show up on every single page is going to go into the header.php.

And then, what you do is you take that index.html, that template that you’ve purchased or that you have, and you go all the way to the bottom, and what I typically do is I look for the start of the footer, and whatever that looks like on your theme, and so, I found the start of the footer, and then I grabbed it, and I took it all the way to the bottom, and then I copied that, and I put that in footer.php. And so, then, that way, I’ve got header.php, I’ve got footer.php, and then you take everything that’s left – everything that’s in the middle – and then I grabbed that and put it in index.php.

So now, I’ve got three folders or three things going on here, and at the top of the index.php page, you have to write a function – it’s a WordPress function, and it says, “Get header,” and there’s one for the bottom that says, “Get footer.” So, that means once that index.php file loads, then it’s going to go out and look for header.php, and it’ll grab that and pull in that data, it’ll load index.php, it’ll go out and get the footer, and then it’ll grab and put all of that in. So, that kind of composes and comprises and makes up that main page on your WordPress site.

And, by this time, you’ve got your code in like this, you can go ahead and go into your WordPress dashboard, you can go to “Appearances,” into “Themes,” and activate your live theme. You should be able to see – if you go and you refresh and look at your homepage, you should see something that looks very similar to what you’ve got going on, what your template that you purchased is supposed to look like. But, there’s a lot of text there; it’s definitely not gonna be formatted right because the next piece of the puzzle – the next thing that we’ve gotta do is we actually have to go in and change the links in your header to add the right code for your style sheets.

And so, basically, when you have a flat HTML theme, from index.css, it’s going to be a relative URL to get to the style page, and so, in your CSS, it might just say “/style.css,” but when you are using a WordPress theme, WordPress doesn’t know that relativity, so you have to tell it – you basically have to go to wp.content/themes/nameoftheme/assets/css/style.css, or wherever you have those files stored. You have to do this for not just the CSS, then you have to go through and see if there’s any images, see if there’s any JavaScript files, all that kind of stuff. You have to give it this extra URL, and there’s a link in the show notes for what you do.

And, I basically did this just to try to – my whole goal was to get everything looking like the template, but loading within WordPress. And then, once I get things looking good, then I can go back and start customizing things. So, I did that, I got that all taken care of, and then, I needed to – the next step of my puzzle was I wanted to make menus. So, WordPress has those awesome menus, but you actually have to define the menus, you have to say in your theme settings that you want menus, and then you have to customize and use…make sure that the template of the menus is using the same CSS as what the HTML theme is. That, by far, is the hardest part of all of this that I’ve done so far.

So, first, you have to go and create a functions.php file. We didn’t create one of those earlier, but you have to add necessary code to make menus turn up and show up in the WordPress dashboard. Once that “menus” area is in the dashboard, then you can create one, and what I did is just “Home,” and then I did a drop-down menu, and then I did “About,” just so I had something that I could see.

Then, I had to go into the header.php, right in the general area where the menus were, I had to add a little bit of code to say “Display this menu right here,” and then, the hardest part was trying to find and adding the right classes to make the menu function the same as the HTML version. By default, I think the WordPress site generates the menu itself, and then it gives it a class of “main/menu,” but that’s not what my theme was doing, and then, the submenus were different, and so, that took a little bit of configuring, and I’ll just…I’ll put in the show notes exactly what I did for my site to work, but it’s going to be different based on how your HTML is set up.

And so, after that was done – and, this was probably…maybe close to two hours, an hour and a half, is how much time I did for this. And then, I’m really happy with as far as I got, and I was able to get it to the point where the website looks exactly – except for the placeholder images; they didn’t include any of the placeholder images, but all the buttons look the same, all the formatting and the style – all that looks really good. The menus look good, the drop-downs are working exactly like the other ones drop down, and so, I’m really happy with that, and I was happy that I could get all of that done in one day.

Now, looking at my schedule and looking at what else I have to do, I have to go in and start adding the images, start filling out the placeholder texts, doing all kinds of stuff, and the tricky thing is right now, this is all – it looks good, it’s in WordPress, but there’s nothing that I can do on the back end. I can go and look, and there’s – actually, the homepage is completely blank because all of this content is in the index.php file, and so, there’s nothing I can do in WordPress.

And, we’ll talk more about how to get the functionality of using the WordPress dashboard and using that for your theme. We’ll talk more about that next week. So, a little bit of a cliffhanger, and so, that’s what I’m gonna work on this week. I’m gonna try to get this whole thing done, and then you can see an example of it next week after next week’s show. That’s what I wanted to share with you this week. Take care, and we’ll talk again soon. Bye-bye.