WordPress is awesome. Seriously.
In my last entry, I gave an overview about what WordPress is, options for themes and a couple of methods on how to get started. It was important to set some basic understanding of how WordPress works before discussing the inner workings of a theme. While most people can get their first website or blog together in under an hour using WordPress.com or a WordPress install on their personal host, you are stuck with the free themes or whatever premium themes fit your budget.
It feels a little bit limiting if you have a specific layout in mind. Perhaps none of the themes you saw online quite fit the color scheme you wanted or maybe the font was not a good fit for your brand. This is where creating custom themes from scratch shines.
For this entry, I want to talk about custom WordPress themes, also known as WordPress Theme Development.
Before you get started with WordPress theme development, you do need to know a few front end technologies first. These technologies are pretty common and if you don’t know these yet, then I recommend learning them before considering creating custom themes.
When I first got started with WordPress, I thought there was another box of “magic” technologies I had to pick up to make all those really cool themes. As it turned out, I already knew most of them.
So what should you know?
- Bootstrap (similar responsive design framework or custom media queries will work here too!)
I do want to make one note about PHP.
Also, ignore the chatter about PHP being a good or bad language. It works, it’s built into WordPress, WordPress powers 27% of the web so that means PHP is going be around for a very long time. It’s got some kinks, but you’re rarely going to come across it.
Design Your Theme
As with any good UX/UI designer, web developer or both, you should always begin your theme with a concept sketch. This “sketch” is called wireframing or wireframes. By creating a wireframe first, you work out the page’s layout, navigation menu and structure for the site’s content.
Sure, you can start by coding immediately, but it’s often harder to come up with a polished out design if you’re making it up as you go. It’s much easier just following your wireframe almost as a template for you model your code on.
Keep in mind that wireframing doesn’t mean you have all your colors, images, logos and icons ready. It just a bunch of boxes on a screen, or piece of paper, laying out the components for you.
An example of a wireframe. Image courtesy of Wikipedia.
You can choose to wireframe your design using professional software like Photoshop, Illustrator or Balsamiq or you can simply draw the wireframes on a piece of paper. I personally use the latter since I enjoy hand drawing my ideas and it takes me less time to draft up a concept on paper than it does to wireframe on the computer. It’s also more cost effective too!
Once the wireframe is done, start adding the colors, images and content that’s supposed to go into the design and start polishing out the final look. Once you’ve decided that the design is final, you can now begin coding the website in your editor.
Coding the Design
If you’re like me, then you probably thought that after you completed your design, you would just somehow magically turn it into a WordPress theme using some new programming language or framework. Seriously… I thought there was some much more complicated route beyond my development skills that I have yet to learn.
In actuality, it turns out that the front end technologies we discussed earlier are the magic tools that will drive the coding portion of creating a theme.
Once your static website is complete, test all the libraries for bugs and errors. Handle this now as opposed to later, since you want to catch errors while they’re easy to manage. Once you start converting the static site to a WordPress theme, things may get a little hairy.
Also, be sure to design all necessary pages for the site. Most sites, or blogs, will need a homepage, a contact page, some custom pages for additional content, a blog roll and archive. Also, having a 404 page design will help too. Check out some 404 page ideas on Google if you’re not sure what I’m talking about.
Tip: If you are building a custom theme for a client, you may want to check with them if a design is already available. Save yourself some time from having to start from scratch by requesting the designs before you start coding. Some clients already have a designer working with them.
In the next entry, I want to explore how conversion process and I’ll share some other cool resources for making WordPress themes awesome.