What is a recommended folder and file structure to use when working with Timber?

Question

I recently started learning to build webpages and custom themes with Wordpress using Timber, twig and Advanced Custom Fields and I don't really know how to organize everything. So far I've been tinkering with everything in the same place (.php and .twig separated) but I can really see that becoming a mess.

Answer 1

So the answer to this is obviously very subjective. There is no convention for how best to organize your folder, files and project/theme. A great starting point is the Timber Starter theme, which is made by the people who make Timber. You can find that here: https://github.com/timber/starter-theme

I am also going to share with you a project I recently completed with Timber and show you how it is organized. Unfortunately, I cannot share the repo with you as it was for work and the repo is private, however the file and folder structure is all that really matters here.

I started this project, and all Timber projects with the Timber starter theme, so that is my starting point. Inside of the Templates folder, I have the following

CPT = stands for Custom Post Types. Each CPT has its own folder inside of this folder and all of my .twig files for that specific CPT go there. For example: CPT > Staff > image.twig, biography.twig, etc.

components = this file contains things like the header, footer, navigation, mobile navigation, etc. These are all .twig files that are used throughout various pages on my site.

pages = this folder contains folders for each page. I like to break each page specifically into "components" and place each page specific component into its page specific folder.

For example, inside of this pages folder I have a folder called "home-page." This contains all of the components for the home page. So I might have a hero.twig, home-page-slider.twig, mission-statement.twig etc. I break each piece/component of the home page down and create a specific .twig file for each and place them within this folder.

I repeat this process for each and every custom page/template I am making.

That is about it, at least for this project anyways. I hope this gives you a general idea about how best to organize your files. The key, is to do whatever makes sense to you, and if you are working as a team, whatever you and your fellow team members agree upon.

For example you might want to rename what I called my "components" folder to "partials" as you might be more familiar with that terminology. It honestly does not matter what you do as long as it makes sense to you and whomever is going to be in this code base. Remember, what makes sense right now, may not make sense 6 months to a year from now. So think ahead too.

The way I approach all of this is what is the simplest way to convey what each file's role is. I shouldn't have to think or look at a readme. The filenames, folder names and structure should be as self explanatory as possible. I like to remind myself of the KISS principle in these situations... "Keep it simple stupid!"

https://en.wikipedia.org/wiki/KISS_principle

Hope that helps.