The 3Ts: Timber, Twig, and Tailwind CSS
Even though I just moved to a brand-new domain and a new approach (somewhat), I still failed to keep up with my code studies or anything technical. I wonder if I will forever remain a student and never actually get to use all my newly-learned skills thus far into real-life action? Now that would be a shame and depressing from my part.
I re-hauled my entire blog once more, and no matter how much I try to switch to new base themes and try something new, I end up going back to my previous go-to base theme.1 There’s just way too many brand-new technologies involving WordPress that I feel completely outdated. On the other hand, this shouldn’t be as a surprise. Even blogging in general is becoming outdated somewhat. I haven’t been completely motivated in doing anything coding-wise or just technology in general.
I dropped out of my #100DaysOfCode Twitter challenge again, but guess what. I’ll be going back to that challenge once more. I conquered the challenge once (many years ago) and I’m sure I can conquer it again, even if my mind isn’t completely updated anymore.
Attempting at WordPress Theme Development Again
Sometime last year, I came across a Udemy course about a different approach to WordPress theme development – using PHP frameworks Twig and Timber. As a sidenote, I’m not very well-versed with PHP at all. I managed to learn the basics, but that’s pretty much it. All this time I’ve relied so much on the child theme system and site/page builders. It’s about time that I finally level myself up and build themes completely from scratch. Maybe.
In order to start learning and developing WordPress sites with Timber and Twig, I needed to have the following:
- A code editor – Both courses use VS Code. I use VS Code too. But you can use any code editor you’re comfortable with.
- PHP 7.4 – Although my Homebrew installed the PHP version is 8.0, a lot of the things in both courses are outdated, plus Timber doesn’t support 8.0 yet, so I had to look up Google on how to switch my PHP from 8.0 to 7.4. I even had to bug the Timber GitHub support for the help.
- Composer – The courses all used Composer 1, but because I’m in the middle of 2021 now and even got a note that Composer 1 is already deprecated, I had to update my currently installed Composer to Composer 2.
- Local Environment – I made a tutorial of sorts about local environment for developing WordPress sites some years ago. Udemy uses Local by Flywheel, BAW uses MAMP. Either one (or others like AMPPS, WAMP, etc.) would work. I had to make a few adjustments according to the environment I’m using. I’m using Local by Flywheel for both.
- Node.js – This is for the installation of Tailwind CSS. I installed Node.js in my machine some years ago for learning/studying purposes, but I’m pretty sure my version is already outdated. I’ll need to make another workaround with this one, just in case.
- For the absolute noobs, Git (and GitHub) – You can install Git in your machine here. If you don’t have a GitHub account yet and you’re interested in sharing your code projects so other developers can see it (and help you out with any mistakes you’ve made), be sure to sign up for a free account. There are other Git repo services like GitLab, but GitHub is the most widely used repo service. I thought of having a GitLab account myself, but I don’t know what I should store in there, so I’ll stick with GitHub for now.
I have dabbled with Twig before in one of my past development courses, but I can’t remember what I used Twig for. But because Timber is being powered by Twig, I have high hopes I can finally apply what I learned to an actual real-life project, and also, boost my resume and portfolio creds a little bit.
I’m still setting up right now because of the workarounds, so I’ll explain what I’ve done so far.
Using/Switching to the suitable version of PHP
During the first few lessons of setting up the local environment, I had to check my machine if I had any of the things required already installed beforehand. Luckily I did, because the first thing I checked was if I already had PHP installed. I didn’t, so I used Homebrew to install PHP. Both courses are using Windows PC, so their instructions for installation are completely different. If you’re an absolute beginner and have never really dabbled in local environment before, you’ll have to learn to be patient to look up for specific instructions for the machine you’re using. If you’re using a Mac or some other machine that’s not Windows PC, you’d have to look up for them. Luckily, I have Homebrew installed in my machine and I got PHP installed quickly.
Homebrew installs the latest stable PHP version, and when I checked it, it was 8.0. I’ve read some comments from the students in the past complaining about how outdated the course is when it turns out that the required components to set up the environment were completely outdated from each other. I had to learn that the hard way:
Using version ^1.18 for timber/timber
./composer.json has been updated
Running composer update timber/timber
Loading composer repositories with package information
Your requirements could not be resolved to an installable set of packages.
- phpunit/phpunit 5.7.16 requires php ^5.6 || ^7.0 -> your php version (8.0.8) does not satisfy that requirement.
- phpunit/phpunit[6.0.0, ..., 6.5.14] require php ^7.0 -> your php version (8.0.8) does not satisfy that requirement.
- Root composer.json requires phpunit/phpunit 5.7.16|6.* -> satisfiable by phpunit/phpunit[5.7.16, 6.0.0, ..., 6.5.14].
Although I felt desperate and Googled like crazy, even bugged Timber GitHub for some support, now that I look at this piece of the error message I got from the Terminal, I can finally see the problems I had:
- Composer 1.0 is already deprecated, but it automatically switched to 1.18 so that it will be able to install Timber.
- One component of Composer, PHPUnit, doesn’t support PHP 8.0, which was the version that Homebrew installed before.
So, based on the user comments at Timber GitHub, I looked around on how to get my machine to use the previous PHP version (7.4) to get it to download Timber. I even checked to see if I had any other PHP versions installed before 8.0. It turned out that 8.0 was the first time I installed PHP, so I went ahead and installed PHP 7.4 via Homebrew again.
# I typed this first:
brew unlink email@example.com
# Then, I typed this right after:
brew link firstname.lastname@example.org --force --overwrite
# Finally, I checked the PHP version my machine is reading after that:
# The result came out as 7.4, so now my machine is set.
Finally, I installed Timber in my development theme folder:
composer require timber/timber
And Timber is finally installed! Yay!
Why install Timber the “hard way” when there’s a WordPress Plugin for it?
The starter theme that I installed from Timber also said that I need the Timber plugin to be installed in order for it to work. However, the latest news from Timber is that as they start to upgrade their components (probably to get ready for PHP 8.0), they plan on deprecating the WordPress plugin version and just stick to using Composer. I know that’s a lot of work for a beginner and even for a hobbyist developer, but at the same time, we get to learn something new and eventually, be comfortable with.
Both courses also use Composer to install Timber, knowing this fact. But, since the WordPress plugin still exist for now, that would be the last step to do if Composer is failing in our machine. Luckily, I was able to find some workaround with my machine and get everything to work, so I won’t have to turn to the plugin installation.
The Udemy version uses Bootstrap, while the BAW version uses Tailwind CSS. I plan on using both, depending on the type of project I feel like doing. I’m also somewhat familiar with Foundation and Materialize CSS, I’ll be building themes using those as well. I even bookmarked a Youtube video for a Bulma tutorial.5
I finally got my setup ready to go. The next step would be installing Tailwind CSS for the BAW course and also setting up Bootstrap for the Udemy course. I’ll write another post for my latest updates.
I’m finally excited that I’m on my way to building WordPress themes the easier way. Let’s go!
Some Extra Notes...
- Themify Ultra
- The latter has Tailwind CSS, which is also something new to me, so I got hooked to learning that as well…
- I focused on getting serious with art and even dabbled a bit with Python, data science/analytics, and even attempted to learn both manual and automated QA
- I’m using the very old Macbook Pro on this one
- I know it’s Vegeta’s wife in DBZ, but we’re talking about the CSS framework.