Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives (https://coupleofcreatives.com) and my blog Web-Crunch (https://web-crunch.com)🤘🏻

======

Download the source code to follow along:

Start: http://bit.ly/htmltowpstart End: http://bit.ly/htmltowpend

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 it's 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 first half of 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(http://bit.ly/htmltowpend).

💻 Originally published at: https://web-crunch.com/code-html-wordpress-part-3/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever

📘 Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌 Recommended Stuff I Use to Shoot Video:

Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=1qHBLthPVQU