One of the questions asked at the WordPress meetup was how to create a WordPress theme. I couldn’t imagine that there weren’t tutorials online for this already, but we didn’t have web access, so I couldn’t check. But upon my arrival home, a brief search expedition led me to a curious find: The “Make a Theme” tutorials that are online seem to dissect the Default theme. That’s crazy.
If you begin the journey into for-hire web design with WordPress, one of the first conclusions you will come to is this mantra: “Kubrick sucks.” Let me spare you gentle novice theme developers the pain. Don’t do it. You will spend so much time being confused by Kubrick’s idiosyncracies that you will become discouraged from something that is fundamentally very simple.
Instead, we’re going to start with something much simpler, especially if you’re coming from the Blogger world, or one of the other blog/CMS systems that are abundant on the net these days: HTML.
One thing that I will tell you even before we begin is that all of this info is available online already. I’m just going to put some of the best of it directly in front of you, along with some advice on how to proceed. This information isn’t new, and I’m not promoting this as “Check out my new great method for making themes!” I’m simply offering a beginner’s view into what people have doubtless been confused by far too often.
Let’s look at a very, very simple two-column HTML layout first. What I suggest is a layout from 456 Berea Street, and is actually the lucky Google result for “two column css layout”. They’ve done a very good job of descrbing what HTML and CSS does what on their page, so I won’t duplicate that here.
What’s nice about this layout is that it provides a clean starting point in HTML for what you can make look spectacular with CSS. Most blogs on the web use some variant of the two-column layout (although that is slowly changing…), and this layout is probably the least bit of code you need to make it work.
You will note that this layout offers five content areas: The header, menu, main content, sidebar, and footer. In the HTML that they offer at 456 Berea Street, these areas are filled in with content that we will replace when making our theme.
If you have been poking at the WordPress themes, you have undoubtably noticed the different files within a theme. Some of them share names with the parts of the HTML template we’re working with, such as “sidebar.php”. You should ignore this for now because it just makes things more complicated when you’re starting than they need to be. First, we’re going to look at the anatomy of a bare-bones WordPress theme – the minimum you need to make your theme go.
This is another page.
