Recently, I expressed my wish for a better way to develop with WordPress. I tried my best to give constructive criticism of WordPress because essentially, it is a great tool. But as a front end developer, I want a way of developing a WordPress site that makes it easy to build HTML, CSS, and Javascript creatively end efficiently.
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!
My Intent
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.
HTML
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
CSS
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
Javascript
Finally, I’ll use Gulp again to manage, compile, and minify my Javascrript assets. I like having separate Javascript files for each widget / component found on the site, then compiling those files into a single scripts file.
(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.