Theming your Website

You’ve mocked up a killer website in Photoshop, and now you are ready to dive into the wonderful world of theming. Congratulations! But before you go further, be sure to carefully consider your plan of attack.

There are several avenues to consider, each with its own pros and cons. The following overview explores several options, from highest to lowest level of customization. Each approach can be used for virtually any CMS, but always bear in mind that more popular CMSs such as WordPress offer a greater number of free and commercial themes.

The Home-Brew

If you have a high level of familiarity with your CMS, then creating a theme from scratch may be a no-brainer to you. Open up a text editor and code away! It’s always a great way to sharpen your design and development skills, but if time is a consideration (and when isn’t it?), you may wish to consider one or more of the following shortcuts.

The Starter Theme

Starter themes take you one step beyond a total custom-code job, providing you with just a few basic files an a bare minimum of code to get you started. Every last bit of styling will remain up to you, but the grunt work will be taken care of.

Googling “WordPress starter theme” brings up myriad options, but a great place to start is Underscores. Starter themes are also conveniently available for Drupal, Joomla, and other platforms.

If you are retro-fitting a blog onto a preexisting static website, Underscores is indispensable. Just split your design into header, footer and (if needed) sidebar regions, and you’re off to the races.

The Framework

If you’r reading this post, you are probably familiar with frameworks like Bootstrap, which provide nifty elements like mobile-formatted menus and responsive grid systems. Bootstrap has become so ubiquitous that it has contributed to the web design monoculture, so if you are looking to stand out from the crowd, this may not be the best option – or else, factor in time for substantial customization.

The Reverse-Engineered Angle

It goes like this: before getting too far into your mock-up, explore the endless variety of free and commercial themes available, pick one that best suits your needs, then dive into the code to make it yours. Commercial themes often include simple customization support, but options are typically limited to superficial aspects like fonts and colors. Beware: it can be extremely difficult to reverse engineer complex themes. Be prepared to make liberal use of !important declarations in your CSS, and pull out a few hairs along the way. When going this route, a simple free theme can sometimes be the better choice – more robust themes can be a bear to pull apart.

Set It and Forget It

The simplest option of all: find the perfect theme, install it, and limit any customization to built-in theme options. Your finished website might look oddly familiar, but it will have been completed with a minimum of effort.

The Last Word

There is no right or wrong here, but be sure to choose your path carefully. Reverse engineering a custom theme into something totally different is a nightmare (ask me how I know sometime), and recreating an existing theme from scratch is a dispiriting waste of time. By taking a few moments to consider the right approach before embarking upon theme development, you can make the process that much smoother.