Therefore, I want to demonstrate how to leverage modern technologies like Gulp and Twig so that WordPress Theme development is cleaner and smoother.
Note that I am definitely not an expert here. I am only trying to explain my experiences in becoming a better WordPress developer. Reading documentation is crucial, but almost equally as important accounts from people who tried similar things as what I’m trying to do, even if the post is a few years outdated and/or not the best solution. For me, its all about perspective!
Ultimately, I want to do less PHP and focus more on front end development, usability, and Even though WordPress is PHP based, I am going to use NodeJS and Gulp to compile and manage my CSS and JS assets. I will use Zurb’s Foundation for my front end framework to assist in my layout and presentation, and Timber, which will let me create Twig templates.
I am assuming anyone reading this post is familiar with SASS, Twig, and the importance of modular web design.
First, lets make HTML development easier with Timber and Twig. Twig is whats called a Template Engine, and its a way to marry the structure of a webpage to it’s data, or content. Timber is a plugin that allows Twig to be used with WordPress.
See WordPress Development with Twig and Timber
Then I’ll show how I organize and isolate my styles, and use Gulp and a CSS preprocessor (like SASS) to compile those styles into a single CSS file. Also, I’ll demonstrate how to use SASS to customize a CSS Framework like Bootstrap or Foundation.
See Leveraging SASS in WordPress Development and Customizing Foundation for a WordPress Theme
(Blog post coming soon)
My motivation here is to demonstrate how I use the work of others to improve my own WordPress development and create some sense of modularity. I haven’t discovered anything unique here, I am simply showing how to use existing tools like Gulp and Twig to improve my WordPress development.