How to Code HTML to WordPress – Part 1

Part one of the “How to Code HTML to WordPress” screencast series begins with getting WordPress installed, a starter theme activated, and copying the bundled assets to the new theme.

The free HTML template called Resturant utilizes Gulp.js to run compilations of Sass and JavaScript code. Bundled within the Gulpfile are also tasks for auto-prefixing the CSS when it’s compiled, watching files for any changes, and much more.

Studying the HTML template

The original other created a src and a dist folder. Essentially all development work takes place inside the src folder and is compiled, generated, and exported to the dist folder. For a static HTML theme like this, all is peachy. Unfortunately, introducing WordPress means more files, directories, and functionality.

I initially wanted to not worry about CSS in this series but as you’ll see in the videos to come we end up having to integrate Gulp and all the other plugins you see into our theme.

What this video covers

  • Getting WordPress installed
  • Downloading and configuring a starter theme. I make use of Underscores.me for this.
  • Copying over images, CSS, and JavaScript files to our working theme.

Following along? Download the source code:

Download Source

Get notified

Be sure to subscribe to either my newsletter or my YouTube channel to receive notifications on future videos/content. My newsletter goes out every Sunday and I try to publish new content for both the blog and YouTube channel twice a week.

Some useful links:

  • nospam nospam

    Sorry to be so ignorant, but does this mean: first insalll and learn: node, npm, bower, git, Then gulp, then sass, and “whatever”?
    Seems to me that plain ol’ css and html work fine in WP. I’m sure that someone will set me straight [no flames, please]!

    • CSS and HTML is perfectly fine. There’s a lot of setup and configurations when using npm, gulp, etc… but the time I spend setting them up proves worthy in most cases. In CSS for instance, you have to commonly repeat yourself with selectors which is time consuming so that’s ultimately why I use Sass. In the end use whatever you are comfortable with. If it gets the job done then there’s nothing wrong with that!

      Thanks for the comment

  • Pingback: How to Code HTML to WordPress - Part 8 - Ending – Web-Crunch()

  • Pingback: How to Code HTML to WordPress - Part 2 – Web-Crunch()