I have had the intention of making a ‘personal’ site for some time now—where ‘sometime’ can probably be counted in years. This post acts as a broad overview of the steps I went through to build the falcon theme, which is the theme this site is running. Hopefully it’ll be useful for someone else building a WordPress theme from scratch. If not it should at least serve as a reminder for me on future theme builds.

Start without a theme

I had the loose design in my head for the falcon theme for sometime, plus an idea of how I thought the site would work on small viewports. Before committing to the process of building a theme create a quick HTML/stylesheet combination to have a play with in the browser. This will help show if the concept works. For the falcon theme this lead to some minor design tweaks, after which I neatened up the code ready for the start of .

Quick-start ‘flat HTML to WordPress theme’ steps are:

• Split the sample HTML file into a header.php, footer.php and index.php.
• Remove your sample content from index.php and add some code to handle the WordPress loop.
• If you have a sample menu in your header.php file then pull it out for a WordPress driven version. For example, wp_list_pages. Remember this is a quick and cheap method, you’ll probably want to use menus later on in which case wp_nav_menu is the way to go.
• Rename your stylesheet to style.css and add a stylesheet header, adjusting the name/description etc. accordingly.

With the above bundled into a folder in your wp-content/themes directory you already have enough code for WordPress to use your theme. Sure it won’t be packed with features but it’ll work on a basic level nevertheless.

Theme features

I tend to make extensive use of menus within a theme. The falcon theme only has two though, one either side of the site icon which together form the primary navigation for the main ‘sections’ of the site. Setting this up means creating a functions.php file. At this point I’d also set some other basic features of the theme. For example, widget areas, loading the stylesheet and other frontend assets.

Improving the CSS

I am a big fan of the CSS framework inuit.css, created by Harry Roberts. It has a whole load of really useful CSS abstractions but leaves the default design well alone. At this point I would import the framework in to my theme. Note that being a SASS framework it needs to be compiled into CSS code. From this point on our theme effectively needs a build process.

Next steps

From here things can be as simple or as complicated as you’d like. In the case of the falcon theme there isn’t a great deal of additional style elements required beyond those used on the front page. Putting together a page.php template for static page content and also considering how listings of posts vs single posts will appear will usually cover all the essential use content display cases required of a theme.

Make sure whatever code you produce is tested to ensure it will work on future (and potentially older) WordPress versions. A good checklist of test points can be found on the WordPress Theme Development page.

Faster theme creation for next time

There is a great starter WordPress theme called ‘_s’ (pronounced underscore s) which creates a solid, and fully working, WordPress theme to then be customised. I’ve used it a bunch of times before as a reference and the code is really well put together. Likely the easiest way to start building a theme in the future would be to base it on this. Instructions for doing that are here. Having said that, I don’t think there is a substitute for going through the process of building a WordPress theme from scratch at least once for the WordPress developer. Programming needs practice and building from scratch gives you a good understanding of the mechanics of a theme.

Dev