How to Code HTML to WordPress - Introduction

Welcome to the very first video of my new series titled "How to Code HTML to WordPress".

In this screencast series, I'll take a new approach to building WordPress themes by bypassing the design stage. For all intended purposes I will be making use of a free HTML template and translating it to WordPress.

So Why HTML to WordPress?

I received a few requests to take an HTML template and translate it to WordPress. I was told by a few fine folks in my community that they learned in such a way where the steps of their process were:

1. Design
2. Code to HTML
3. Code to WordPress

As I evolved as a frontend developer I noticed that I bypassed that second step. Being pretty familiar with WordPress has allowed me to skip what I would call the "scaffolding" stage and go straight to the dynamic parts.

I think I'm able to do this simply because I have the knowledge of the inner workings of the CMS. If you are new to WordPress and plan to use it fairly often I think you will begin to see how this is possible.

What Will I Be Building?

The free theme we are building was found on onepagelove.com (http://onepagelove.com/). It is called Resturant and was designed by Christos Pantazis and later coded by Matthew Hartman.

Source: http://onepagelove.com/ Theme: https://onepagelove.com/restaurant-template

Source Code

I have two Github repo's with the before and after code. Included in the before code is what was originally supplied by the authors. The "after" code is simply the theme as well as a folder containing data for import. There is an accompanying README.md file documenting all there is to know so be sure to scan it before jumping ahead.

Start: https://github.com/justalever/web-crunch-html-to-wp-start End: https://github.com/justalever/web-crunch-html-to-wp-end

How To Learn

I learned by actually building things. I think this is necessary and I feel to gain the most from these screencasts you'll need to follow along closely. Type the code out where possible. Avoid copy and pasting. PLEASE experiment with adding more styles, functionality, and more. If you get hung up, take to Google. More often than not you can search the issue you are having and someone out there can likely relate.

Related links that might be of some help:

1. https://web-crunch.com/getting-to-know-gulp/
2. https://web-crunch.com/current-wordpress-workflow/
3. https://web-crunch.com/how-i-use-gulp-web-development-workflow/

Previously published at: http://web-crunch.com/code-html-wordpress-introduction/

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

Need help with your next project? Hire me: https://coupleofcreatives.com

Check out Cloudways...my new hosting provider whom I love! http://bit.ly/2mfEck2 (affiliate link) ... https://www.youtube.com/watch?v=6hbJVk4Tx04