Recently, I expressed my wish for a better way to develop with WordPress<\/a>. 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.<\/p>\n Therefore, I want to demonstrate how to leverage modern technologies like Gulp and Twig so that WordPress Theme development is cleaner and smoother.<\/p>\n Note that I am definitely not an expert here. I am only trying to explain my experiences in becoming a better WordPress developer.<\/strong> 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!<\/p>\n\n\n 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.<\/p>\n\n\n\n I am assuming anyone reading this post is familiar with SASS, Twig, and the importance of modular web design.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n See WordPress Development with Twig and Timber<\/a><\/p>\n\n\n\n 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. <\/p>\n\n\n\n See Leveraging SASS in WordPress Development<\/a> and Customizing Foundation for a WordPress Theme<\/a><\/p>\n\n\n\n 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. <\/p>\n\n\n\n (Blog post coming soon)<\/p>\n\n\n\nMy Intent<\/h2>\n\n\n\n
HTML<\/h3>\n\n\n\n
CSS<\/h3>\n\n\n\n
Javascript<\/h3>\n\n\n\n
\n\n\n\n