WordPress Theme Design Resources

7 minute read

WordPress is by far the most popular content management system for websites1. Even if, like me, you know nothing about code, there is plenty of documentation to get started. It makes sense to start with one of the most used open source platform2. Its large community represents a solid powerhouse that is set to keep moving forward. But 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 does more than blogging. Finding the perfect match for a specific online project is difficult. Even more so if you are looking for a simple design with functions specific to your project. A theme is an aesthetic choice: how it looks and feels. But underneath, each theme has its own logic: how it works. A theme’s functions will affect what a site can do, but also its speed, security, and user convenience. Users of course include visitors and site owner. 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. Once you find 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 customise your site, the less this is true. So chances is you’ll want to change how your site looks, but also how it works. One way to customise an existing theme is write a mirror theme living in a subfolder within your parent theme. You can then add changes, for instance in 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 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 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 CSS, PHP and HTML edits to suit your project. Theses are useful link to learn how to design a theme for WordPress.


Start development on a local server

To test your prototype website, themes and plugin, setting up a local server with a program like MAMP will help. A virtual server emulates an hosting environment on your computer, so you can test a site offline. This approach is better than working on a remote server, or on your hosted site, until your design is ready.

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

Installing WordPress Locally on Your Mac With MAMP - WordPress Codex

General WordPress resources:

Documentation

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.

→ 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

Practical learning:

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

Bones

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.

Bones - Github repository

Bones - Issues

Tutorials (Bones):

Making a Theme With Bones: Getting Started

Making a Theme With Bones: Cleaning Up

Making a Theme With Bones: Finishing Off

Roots

Roots another WordPress starter theme, with HTML5 Boilerplate, Bootstrap, and Grunt.

StartBox

StartBox, is a framework maintained by WebDevStudios

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

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

Plugins

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.

Validation

Speed and optimization for WordPress

→ A good web host is important.

→ Minify CSS, 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

HHVM

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

PHP7

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. In 2017, WordPress powers 27.7% of all websites, according to CMS usage statistics

  2. Some say WordPress is the gateway drug of web development, an experience shared by many. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Loading...