HTML to WordPress Theme with Pinegrow WP

The tutorials explain how to convert an existing static template to a fully functional WordPress theme, including customization options.

Note: Instead of a voice-over, text bubbles are used. The students can pause the tutorial at that point, and follow along. It is recommended to watch the videos in full-screen.

Part 1

1. Install WordPress
2. Create new folder in wp-content/themes/ (the name of new folder should reflect client name or theme Name)
3. Create a new “dev” folder in the theme folder.
4. Copy static files to “dev” folder.
5. Rename dev files according to the WP hierarchy.
6. Activate WP theme in Pinegrow index.html root element.
7. Add screenshot.png

• Get the template (Free) from https://www.gettemplate.com/info/initio/
• Get the Gitkraken app from: https://www.gitkraken.com/ (Mac & PC)
• Get the screenshot app from: https://getgreenshot.org/ (PC only)

Part 2

1. Add main loop to blog page
2. Tag all dynamic content
3. Add links
4. Set up single.php page for single post display > Add main loop to single.html (–>single.php) and Tag all dynamic content

Part 3

1. Create header template part and assign to index.html and single.html
2. Add site title tag and tagline to header template part
3. Create main navbar template part and assign to index.html and single.html
4. Activate main menu and assign a menu linking to blog and one post.
5. Activate home page home.php
6. Assign main nav template part.
7. Activate page display
8. Assign main nav template part to page.html

Part 4. Widget areas

1. Define footer template part and assign to all pages
2. Add footer widgets
3. Define page widget area (sidebar)
4. Add page sidebar widgets

Part 5. Adding Theme Customizer Options

1. Assign a customize control to the header’s background and logo.
2. Assign a customizer page load control to control home page intro element.
3. Adding a second customizer section for the blog section’s page header background.

Author: Wim Teuling