How to Code HTML to WordPress - Part 3

Part three of my screencast series "How to Code HTML to WordPress" I opt to get our Gulp task runner plugin as a result of some CSS snags that come up.

WordPress unfortunately generates some mark up when using its built-in methods and functions. While these are configurable, they sometimes work against your workflow. I found this out first hand in Part 2 and decide I better get the Gulp.js the original author of the HTML theme created rolling.

To implement Gulp in our theme I needed to edit some files and directories to include the necessary folder paths and plugins.

The First Half

In this video, I walk you through these configurations as well as show you how to make use of Node.js and npm.

The Last Half

The last half of the video is dedicated to making the content inside the header portion of the theme dynamic. It is updated inside WordPress and configurable by the end-user.

This video is optional

If you want to bypass the Gulp.js route and write vanilla CSS that's perfectly fine. You can skip the first half of this video and just write your styles inside the style.css file. You won't be able to nest your styles like I do but feel free to experiment!

Personally, I like to write Sass and figured many others might to so I extended the theme to offer support for it. The final source code will be the result of what I have implemented in this video so if you get stumped, lost, or just want to skip ahead feel free to download it.

Installing and Using Gulp

Gulp is my go-to tool for configuring a pretty gnarly web development workflow. I use it to compile sass, minify javascript, lint code, refresh my browser automatically, and optimize images. The amount of things you can do doesn't end there. Explore all the plugins available.

If you are new to gulp check out these links:

• Getting To Know Gulp
• How I Prepare a Design for WordPress Development
• How I Use Gulp.js In My Web Development Workflow

The Series So Far

• Introduction
• Part 1
• Part 2

​