Making a WordPress Theme. From Scratch.
Research + Information Architecture
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:
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)
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!
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:
We can then look at primary templates (you only really need to create these when making a new WordPress theme from scratch):
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
- Post (Post Type: ‘post’)
- Page (Post Type: ‘page’)
- Attachment (Post Type: ‘attachment’)
- Revision (Post Type: ‘revision’)
- Navigation menu (Post Type: ‘nav_menu_item’)
Attachment Mime types: WordPress also supports mime type templates:
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:
[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text _builder_version=”3.13.1″]
– css (dir)
– images (dir)
– js (dir)
– footer (dir)
– header (dir)
– navigation (dir)
– page (dir)
– post (dir)
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.
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:
featured posts slider
featured posts from each category?
featured posts from the top categories?
number of posts
hamburger menu icon
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.