Once the majority of the graphics and layouts have been designed, it’s time to start building the WordPress theme.
This post tells you everything you need to quickly set up a WordPress theme.
Note: Make sure to read to the end for a handy tool to set up a WordPress theme in seconds!
Give it Structure
Starting with a good directory structure keeps a theme organized and easy to work with. This will make the theme easier to maintain so that it can be updated quickly and painlessly in the future.
The is a good directory structure for WordPress themes:
lib templates client |_ fonts |_ images |_ sass |_ css |_ js |_ dev |_ prod
lib— PHP libraries for the theme. Splitting your theme’s code into separate files based on functionality makes it easier to find and update specific features.
templates— Layout templates. Think of templates as the building blocks for a theme’s various pages. From displaying posts to building a sidebar’s modules, templates are reusable chunks of code that you can use throughout your theme.
client— Front-end assets. Each type of asset gets its own sub-directory:
fonts— Font files
images— Image files
sass— Sass-based stylesheets
css— Compiled stylesheets
dev— Development code
prod— Production (minified) code
Add Baseline Files
These are the baseline files you need for a WordPress theme:
style.css screenshot.png functions.php header.php footer.php sidebar.php comments.php index.php base.php home.php page.php single.php attachment.php archive.php date.php author.php 404.php search.php
Additional files can be created to further customize specific pages as per WordPress’ template hierarchy (see link below).
Define Theme Properties
You might think that the
style.css file in the list above should be in the
client directory with the other front-end assets, but in actuality, this file is not a front-end asset. In fact, despite its name,
style.css contains no styles at all.
WordPress looks in
style.css for a theme’s properties which is all this file is used for in my themes.
Here are the properties for Archetyped’s theme in
/* Theme Name: Archetyped Theme URI: https://archetyped.com Description: Theme for Archetyped.com Version: 2.0 Author: Archetyped Author URI: https://archetyped.com */
There are other properties you can add if you’re creating a public theme, but these are the basic properties WordPress needs to recognize the theme.
Display a Screenshot
The same goes for
screenshot.png. This image is not a front-end asset, but rather is displayed on WordPress’ Themes page as a thumbnail for your theme.
WordPress Theme Quick-Start
This is the basic setup when starting a new WordPress theme. Doing this every time is tedious, so I’ve created a quick-start bundle to set up a theme in seconds.
I think it’s pretty useful, so I’m making my Theme Quick-Start bundle available to you. Just for fun, I’m letting you decide how much the quick-start bundle is worth. It’s as cheap as free, but if spending less time setting up themes and more time hugging your cat is worth the price of a cup of coffee to you, I’m happy to serve.
The theme is now ready to be customized according to the design!
Your turn: How do you set up your WordPress themes? Do you have any tips for quickly getting a new theme up and running? Would you rather hug a cat or a dog (koala bear is a valid answer as well)? Join the conversation and let us know!