Hopefully someone finds this helpful as I’ve had to figure out some of this as I go or just from trial and error. There aren’t a lot of resources for building themes that really spell things out, so it’s good to look at what others are doing.
This post is more basic directory structure and not much code beyond organizing theme specific functions.
The whole point is to reduce bloat while increasing utility. Make it easy to develop in for yourself and for any future development to happen even if its not by you. Basically… K.I.S.S.
First I’m going to overview my directory structure of a basic theme.
Basic Theme Structure
You can definitely get further organized with this by putting your js, css, and images in an /assets/ folder. You can even drill deeper with specific folders for files like page templates and template parts.
Not all sites need that much organization, but if you’re building something with a lot of layouts that are wildly different you may want to organize better.
Used to I would dump everything in functions.php until I graduated to including them in an array, which was only slightly more helpful in terms of it was neater looking and easier to navigate. That looked something like this:
But that’s not optimal because you have to manage each file. This is all preference but what I do now is include everything from the /inc/ or /lib/ (or whatever you want to call it) folder. So my functions.php is just a few lines and grabs my entire folder:
(stolen from @theandystratton)
I’ve noticed with a lot of “off the shelf” themes each template will have a name (and therefor appear as a selectable layout), and maybe that’s for flexibility purposes, but I prefer to only have a few where needed.
Usually Full Width and any Landing pages will get a template name, otherwise I want them to auto assign appropriately. One way you can do this is by understanding proper hierarchy.
The Template Hierarchy
Generally a pretty basic site only has a few templates to consider:
- Front Page
- Interior Page
- Full Width Page
- Blog Page
- Single Blog Page
Which you should be referring to the Template Hierarchy Map. It will probably end up looking something like this:
Index.php As a Workhorse
If you look at the template hierarchy map again you’ll see everything eventually waterfalls to Index.php
It makes sense to take advantage of index for templates that are sharing a layout. I’ll have designers that want to change things on 404 pages, search results pages, etc. Generally these end up being full width pages so I can re-use my full-width layout in my index for multiple pages.
- Don’t over organize unless you have to
- Adhere to your own standards for coding and structure
- Easy on the template names in files, let the template hierarchy work for you
- Find ways to keep things lean by having utility files