WordPress Theme Design Resources

March 15th, 2014 8 minute read

WordPress is by far the most popular content management system for websites1. Even if you are new to code, there is plenty of documentation to get started. It makes sense to start with one of the most used open source platform2. The large community of WordPress users and developers ensures that the project will keep moving forward. Plus, it is relatively easy to use and starter-friendly.

Choosing a theme

Still, the profusion of themes and plugins available for WordPress can be confusing. Most themes, whether free or commercial, offer little guarantee about future updates. Yet when you chose a theme, code maintenance is an important consideration. Especially for a site that needs more than blogging. Finding the perfect match for a specific online project is difficult. Even more so if you are looking for functions specific to your project. A theme is an aesthetic choice: how it looks and feels. But each theme’s own logic: how it works is more important. A theme’s functions will affect what a site can do, but also its speed, security, and user convenience. Users, of course, include visitors, the site owner and the admin who will maintain the site. Just because something is convenient for you as a site admin doesn’t mean it will help your users. A lot of themes have cool, complex functions built-in, it doesn’t mean they will suit your needs out of the box.

Custom Themes

Once you found a good theme, you will likely want to make some adjustments. You can change pretty much everything. WordPress was build in a way that content is not design-dependent. Yet the more you customize your site, the less this is true. So chances are you’ll want to change how your site looks, but also how it works. One way to modify an existing theme style is to write a mirror theme that lives in a subfolder within your parent theme. You can then change the CSS style in the so-called child-theme. That way you won’t lose your modifications when the parent theme is updated. For minor cosmetic changes, using a child-theme is an option. But if you want something more, and for the sake of learning, you might as well write your own theme. Chances are it will suit your needs better. Tweaking a theme only to find afterward that it does not serve your site’s purpose is a poor option. Whichever way you chose, you might need a lot of edits in CSS, PHP, JavaScript, and HTML to suit your project. Below are some useful links to learn how to design a theme for WordPress.

Start development on a local server

To start prototyping your website, theme or plugin, setting up a local server with a program like MAMP will help. MAMP is a virtual server that emulates a hosting environment on your computer. That enables you to go through various design iterations and test a site offline. This approach is better than working on a remote server, or on your live hosted site, where you don’t want changes to appear until your design is ready3.

A Local Test Server: XAMPP or MAMP an article by Ian Stewart from ThemeShaper.

Installing WordPress Locally on Your Mac With MAMP - WordPress Codex

Modern WordPress Development

Use Trellis, Bedrock and Sage in combination or separately.

General WordPress resources:


Starting at the source, the WP codex documentation and the newer code reference are the most complete documentation you will find. The WordPress Codex - Theme Development and WordPress Codex - Using themes are good starting points.

ThemeShaper articles

Automattic’s Theme Division writes plenty of useful articles on the ThemeShaper blog, beginning with The ThemeShaper WordPress Theme Tutorial: 2ND EDITION. Beside WordPress.org’s own support forum, ThemeShaper Forums answer specific questions. The official WordPress IRC channel has a live chat help.

WordPress StackExchange

WordPress StackExchange is a well curated Q&A site for WordPress developers and administrators. wpseek.com, is a WordPress-centric search engine for developers and theme authors.

https://websitesetup.org - free, step-by-step guide on how to create a website using WordPress, by Robert Mening.

https://www.youtube.com/watch?v=1ETN9H9DnSg - Video on how to make a website, by Robert Mening.

→ If you are going to delve into how PHP works with WordPress, http://docs.webingenia.com/wordpress/ is helpful.

→ Keep an eye on QueryPost, Better WordPress code reference, by Rarst.

Digging Into WordPress a site by Chris Coyier & Jeff Starr that also expands into a book.

Learning Books

There is an excessive amount of books about WordPress. How do you know if they are any good and current, thus helpful? Here are just two, recent, well documented and comprehensive manuals to circle the topic. Both available as e-books and print copies.

WordPress: The Missing Manual, 2nd Edition by Matthew MacDonald, O’Reilly Media, June 2014

This book details WordPress features, as a blogging platform, and goes on to slightly more advanced topics.

Building Web Apps with WordPress — WordPress as an Application Framework by Brian Messenlehner, Jason Coleman, O’Reilly Media, April 2014.

This book dives deeper into how you can build web apps on top of WordPress infrastructure. It gives you the keys to unleash a powerful content management system.

Non Commercial Starter themes for WordPress

Starter themes or frameworks are great for the novice and developers alike, because they are time-saving. They are also ideal to learn because they are not stuffed with all the superficial stuff, so it is easier to understand. If you start from scratch, it’s good to piece things together to see how they work.

underscores _s

I settled for underscores or _s, a starter theme by Automattic. It contains just the right amount of lean, commented, modern, HTML5 templates.

underscores _s Repository on Github

→ To keep it simple, you can head over to http://underscores.me and generate your _s based theme.

Components is an extension of underscores _s, a starter theme that includes reusable components tailored to different theme types.

Automattic retired Components in June 2017


Sage is a WordPress starter theme with a modern development workflow, developed by Roots (see above).


Bones - WordPress development theme by Eddie Machado is a lean theme to start building upon, adding or removing functionalities as needed. Speed efficient with its mobile-first logic, the theme is updated on a regular basis, well commented. It’s great to start working with Sass.


StartBox, is a framework maintained by WebDevStudios

Practical learning:

Theme Shaper tutorial, the accompanying 16 day lessons to build a theme from scratch with _S:

Tutorials (Bones):

Making a Theme With Bones: Getting Started

Making a Theme With Bones: Cleaning Up

Making a Theme With Bones: Finishing Off

Commercial frameworks for WP

Genesis Framework

Learning from existing themes

All the free WordPress.com themes are hosted on Automattic’s SVN. Here are a few minimalistic ones:


Ryu WordPress Theme by Takashi Irie

This theme looks nice and simple. Since it is based on _s, the learning curve from underscores was a logical step. It uses the Frameless Grid which seemed a good option to work with.

Ryu Demo

Behind the Design of the Ryu Theme

Twenty Seventeen

Each year the WordPress team collectively develop a theme. Following its development on GitHub is a good way to learn.

twentyseventeen repo


Keep it simple, use as few plugins as possible. Using no or very few plugins will prevent speed, maintenance (upgrades!) and security issues. Plugins can be vulnerable to attacks, so update to the latest version whenever a vulnerability is found. When searching for a plugin, use common sense, look for things like code stability, maintenance rate and clear documentation. Good indicators are the number of downloads and favorable reviews a plugin received.

Here is a list of WP plugins that I use(d) and tested thoroughly.

PHP resources

PHP The Right Way http://www.phptherightway.com PHP The Right Way as an online ebook

Javascript resources

You Don’t Know JS, by Kyle Simpson, available as ebook.

WordPress code snippets

More testing

If you tested a theme or plugin locally, it might still be a good idea to test it online. You could use a temporary site before deploying your website. Unlimited WordPress test installs are available at the weird domain Poopy.life, a service offered by Soflyy, the creators of Oxygen and WP All Import.

Use poopy.life/create to start an install.


Speed and optimization for WordPress

→ A good web host is important.

→ Minify CSS, and compress images

→ Use web caching to reduce bandwidth usage, server load, and perceived lag (.htaccess methods, plugins…)

These articles are more specific to WordPress optimization:

How To Speed Up WordPress

Theme performance

Cutting response time

13 Ways to Speed Up your WordPress Site


Set-up WordPress to run on HHVM: Steps to install HHVM (HipHop Virtual Machine).


WordPress using PHP7 can result in about 2-3x speed improvement compared to PHP5.6. Unfortunately not many hosts support PHP7 yet but things are moving in the right direction.

WordPress News

WP Tavern publishes articles on web development, with specific resources and news for and from the WordPress community.

Post Status, Reader validated, curated WordPress news.

wpMail is another weekly WordPress newsletter.

  1. As of early 2019, WordPress powers over 33% of all websites that use various content management systems, according to CMS usage statistics

  2. A lot of people say WordPress was their gateway drug of web development

  3. Browsersync is an even better approach to modern development 

Leave a comment