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 build 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.

Introductions

If you're looking for more of the "design" type of videos I invite you to check out my other series called "How to Design and Code a Product Landing Page". Watch the first video here or check out the entire series on my YouTube channel. I also have more videos on the horizon dealing solely with design so stay tuned! Finally, be sure to subscribe to either my newsletter or my channel to receive notifications on future videos/content. Thank you in advance!

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:

Design
Code to HTML
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. It is called Restaurant and was designed by Christos Pantazis and later coded by Matthew Hartman. Check out the page for more information.

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.

Source Code "Start"
Source Code "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 may help you along the way: