Since WordPress 3.4 most people are happy to find a WordPress theme that they like, feel comfortable enough to use the built-in WordPress theme customize options, and design an existing theme to their liking without writing any code. This works for a large percentage of people hosting blogs and simple websites, and yields great results.
Also, a lot of people who are familiar with CSS have for years created new WordPress themes by altering or ‘hacking’ existing themes, and simply changing the CSS. WordPress allows you to do this, but a little more advanced than this is starting your own WordPress from a boilerplate or naked theme like the following:
- Bones – HTML5 theme which uses SASS
- Starkers – a popular HTML5 theme available still on GitHub
- BlankSlate – the definitive WordPress HTML5 boilerplate starter theme
However, if you are like me and you want to start a WordPress theme from scratch, develop publicly at GitHub, and eventually submit to the WordPress Theme Directory, I have put together this guide to help you with that process.
Step 1: What You Need to Know
Templates and Themes
As you probably already know a WordPress theme makes a website function, determines what it contains, how it behaves, and its appearance; however, the theme is not the content, which is in fact stored in a database, and not in your installation of the WordPress content management system (or CMS for short). Ergo, you can use the same theme on more than one website, regardless of content, because a theme consists of a number of template files. These files all exist in the theme folder, which you’ll find for any theme in the wp-content/themes folder in any WordPress installation.
Every WordPress theme has to include at least the index.php and style.css files, but often time contain more like header.php, sidebar.php, footer.php, and functions.php. For a full template files list please see the WordPress Codex, and Joost de Valk does a great job of explaining how the templates work in his blog post The Anatomy of a WordPress Theme: The Cheat Sheet for How Your Blog Works.
The loop is perhaps the most powerful part of your WordPress theme. It starts with a query, and ends with a php “endwhile” statement… everything in between is up to you. -Joost de Valk
The loop is PHP code used by WordPress to display posts, which are kind of like document types for other CMSs. Using the loop, WordPress processes each post to be displayed on the current page, and so the loop should be placed in index.php and in any other templates used to display post information. You can learn more about the loop from the WordPress Codex.
Custom Fields, Plugins, and Widgets
WordPress community designers and developers create plugins and widgets for use with the CMS, and both are developed to enhance your website’s functionality, or to add modules to various sections of your website like the sidebar and footer. Also, each post can have have multiple custom fields added, enabling you to create your own options or display data in different ways, such as within a gallery, calendar, or news item. Here are a list of plugins and widgets that I have used for years, and recommend:
- Google Analytics by Kevin Sylvestre
- Exclude Pages from Navigation by Simon Wheatley
- Akismet by Automattic
- Contact Form by BestWebSoft
- Jetpack by WordPress.com by Automattic
- Lightbox Plus ColorBox By Dan Zappone
- Camera Slideshow by Manuel Masia
- The Events Calendar by Modern Tribe, Inc.
- NextGEN Gallery by Photocrati Media
However, the following plugins actually will help you develop and document themes inside of WordPress, so I would recommend downloading them:
- Advanced Code Editor by BaInternet
- WP-Syntax by Steven A. Zahm
Step 2: Setup a Test Space
It is important that you design, build, and test your WordPress theme design in the web browser itself; otherwise, how will you know if it works or not? How will you test functionality and the user interface? To do this I recommend setting up a separate and clean installation of WordPress that will be utilized specifically for theme development.
Also, you will need to setup a database for your test environment. You can download the latest version of WordPress, and I would recommend following The Famous 5-Minute Installation, which does literally take about 15 minutes from start to finish. Finally, I would suggest creating a GitHub repository to develop your files from anywhere, have version control, and this will also enable you to have multiple contributors.
Step 3: Design
I’m lucky to have a candidate already to go, and eager for a redesign. The Burgh Bears are a non-profit social group that conducts charitable fundraising for their local community in Pittsburgh, Pennsylvania. In recent years the organization’s membership is decreasing, and with the decrease the Burg Bears’ charitable support to the community is shrinking.
The Burgh Bears membership is gradually diminishing and their funds are dwindling. The reasons for this dynamic and possible solutions to the dilemma need to be explored, and facilitating creative thinking to address the challenge would be very useful.
The Burgh Bears agreed to let me document the entire process of working with them on the redesign of their website, from initial meetings, to ongoing communication, to video recordings. The following process book, summary, and video will illustrate the creative process that I employed when working with the organization:
Going through this process allowed me to identify what was important to the Burgh Bears, and help them become aware and verbalize their organizational goals, which will greatly inform the website’s design, functionality, and usability.
Wire-framing a Theme
Based on the research gathered and information facilitated in the previous step, the following is the design they wanted to go with:
Step 4: Developing & Testing Your Theme
You can check out my github repo for the files at https://github.com/timbroadwater/burghbears.
Sign Your Theme
/* Theme Name: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. … Version: 1.3 License: GNU General Public License License URI: license.txt Tags: dark, light, white, black, … */
Submitting to the WordPress Theme Directory
This is only if you want it to be available to others.
A Guide To The Options For WordPress Theme Development by Rachel McCollin
Developing WordPress Themes Using Responsive Frameworks by Sarah Frantz
Theme Development in the WordPress Codex
The Anatomy of a WordPress Theme by Joost de Valk