Redesigning Archetyped: WordPress Theme Setup

By Sol in Know

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
    • js — JavaScript files
      • 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 style.css:

/* 
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.

Theme Details

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.

Get the Theme Quick-Start Now

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!

Resources