Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Developing with WordPress

Part 2: Designing Custom Themes


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.

 

Getting Started

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?

  • HTML
  • CSS
  • Bootstrap (similar responsive design framework or custom media queries will work here too!)
  • Javascript
  • PHP

As you can tell, creating a theme requires front end technologies that are core to pretty much every website out there today. HTML to frame out your site’s structure, CSS to style the site, Bootstrap for mobile responsive design, Javascript for core functionalities and PHP to hook this whole thing up in WordPress.

I do want to make one note about PHP.

PHP is a back end scripting language. Don’t let this intimidate you. PHP is similar to Javascript, so if you know Javascript then picking up PHP won’t be too hard. PHP will be used to help implement WordPress functionalities into your theme and will not be used to run any fancy algorithms. You can use Javascript for that.

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.

You can’t get away from good old HTML, CSS, Javascript and PHP. Bootstrap can be substituted with Semantic UI, other mobile responsive libraries or simply custom writing some DOM manipulations and media queries.

To begin coding, think of your theme as a regular static website. Begin building out every element, styling and function as you normally would with any other static website. Create the separate CSS styling sheet and Javascript files that your project may require as well. If you’re using any additional libraries (such as jQuery, Bootstrap, Semantic UI, etc.), be sure to download the files for those libraries and save them for local use on your computer. You will need all these files to build out the assets required for running your static website, and ultimately your theme. Don’t worry… the files may seem like a lot of code but it’s all text and really tiny in the scheme of theme building.

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.

Coming next: Converting Static Websites to WordPress Themes