Making a WordPress Theme. From Scratch.
Research + Information Architecture
Introduction
Making a new WordPress theme from scratch can seem daunting, but it’s pretty easy if you know the steps. This series will explore the techniques you need to employ to build a WordPress theme from scratch. In the series we will be covering:
Research
So, you want to make a WordPress theme, from scratch. There are a few questions you have to ask yourself at this stage.
- Why do you want to make a WordPress theme from scratch?
- What themes out there come close to what I want?
- What can I do thats better or different from the themes that are available?
Answering question 1)
Why Do I want to make a WordPress theme?
- I have one already, in multiloquent, but it needs a refresh
- I have a choice whether to refresh multiloquent, or to create a new theme from scratch
- There are advantages to each, but overall, I feel that making a second theme will give me more benefits
- I can use my experience making and maintaining a WordPress theme to make another
- I can also get a series of posts for my blog while I’m doing it
- I can also get a new theme for my blog once I’m finished!
Answering question 2)
What themes out there come close to what I want to do
- lots of them come close visually
- I don’t think any of them come close to what I want to achieve
- I want a minimal theme, that has a nice default set of features
- I also want to learn all the new features that have appeared in WordPress since I made the first iteration of multiloquent
- I also want the theme to contain the cleanest html code possible
Answering question 3)
What can I do thats better or different from the themes that are available
- I want the code generated by the theme to be concise, valid and lean.
- I want the code generated by the theme to be fast (in Google Pagesspeed)
- I want the theme to have every WordPress feature (tags, customising, etc)
Workflow
At this point you have a solid starting point, you have done some research, asked yourself some questions, gotten some answers and can start digging into the making of the theme.
Having the questions and answers at this stage will help you create a specification that will achieve your goals. This will help when you come to the implementation / testing stages – as you will have some conditions to test against!
Template Hierarchy
Fortunately WordPress is really well documented. We have a starting point laid out for us while we create our information architecture for our WordPress theme – the WordPress template hierarchy tells us every file we need to create for every scenario.
Starting from the right we can make the following files:
- index.php
- style.css
- functions.php
We can then look at primary templates (you only really need to create these when making a new WordPress theme from scratch):
- index.php
- home.php
- archive.php
- search.php
- singular.php
- single.php
- page.php
- 404.php
Secondary templates (if not present, the corresponding primary template will be used)
These are great if you want a different layout or components eg in your author pages from your tag pages
- front-page.php
- author.php
- category.php
- taxonomy.php
- date.php
- tag.php
- attachment.php
- single-post.php
Post types:
- Post (Post Type: ‘post’)
- Page (Post Type: ‘page’)
- Attachment (Post Type: ‘attachment’)
- Revision (Post Type: ‘revision’)
- Navigation menu (Post Type: ‘nav_menu_item’)
- single-post.php
- single-page.php
- single-attachment.php
Attachment Mime types: WordPress also supports mime type templates:
- image.php
- video.php
- pdf.php
- text.php
Our File Hierarchy.
WordPress recommend following the twentyseventeen file hierarchy.
If we add those recommendations to our template hierarchy from the previous section,
we end up with:
assets (dir)
– css (dir)
– images (dir)
– js (dir)
inc (dir)
template-parts (dir)
– footer (dir)
– header (dir)
– navigation (dir)
– page (dir)
– post (dir)
languages (dir)
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css
optional:
author.php
category.php
taxonomy.php
date.php
tag.php
attachment.php
—–
optional:
single-post.php
single-page.php
single-attachment.php
—–
optional:
image.php
video.php
pdf.php
text.php
Information Architecture.
Information Architecture is the cornerstone of any website (or digital project in general).
At this stage we know every file that we will make, and their relationship to the content inside a WordPress site. This is a very good starting point for our Information Architecture.
In your own blog you would also include the content in the Information architecture, but we can skip that as we are making templates for others to use.
Page-Level IA
What we do have to do though, is to make a list of each of the components we are looking to add to each of these pages. I like to do this part on paper (you can go back and make changes multiple times) and as part of a team (everyone has ideas to contribute) – but you can do it solo if needed)
I quickly came up with this as a starting point:
header
breadcrumb
post title
featured image
content
tags
comments
related posts
featured posts
json+ld markup
footer
header
breadcrumb
post title
featured image
content
tags
comments
featured posts
json+ld markup
footer
header
featured posts slider
featured posts from each category?
featured posts from the top categories?
recent comments?
intro text
json+ld markup
footer
header
breadcrumb
archive name
number of posts
post block
title
featured image
comments?
dates ?
tags ?
pagination
json+ld markup
footer
logo
hamburger menu icon
search field
login icons?
social icons?
recent posts
top posts
links to privacy policy, etc
author name
gravatar?
comments
Next Steps
At this stage, I have enough to start making wireframes! I also have enough to start looking into the features that WordPress has available for each of the sub-sections and the functions available to me.
