WordPress themes and GitHub go hand in hand. This online course uses a GitHub repository and branches to organize the project. Learn how to get the correct files and use them in your local development environment.
- [Lecturer] To be comprehensive and cover as much ground as possible, this course is part instruction, part example base, and part play along, with some challenges added for good measure. To help you follow along I've created two sets of exercise files. Downloads available from the course page and a GitHub repository. You can follow along using either. On the course page you'll find the downloadable exercise files that contain the starting point for each movie, as well as the GULP process we'll be working with throughout the course. There are also some other useful reference materials in the folder, including an elements map you can check out at your own leisure.
To use the downloadable exercise files, simply open the folder for the movie you are currently watching, then grab the Humescores folder inside and pull it into the themes folder in your local WordPress install. This will bring you to the same starting point as me as the movie begins. If you're of the GitHub persuasion, you can find a movie by movie process of the course in separate branches at github.com/moreton/humescores. This repo has a long list of branches and each branch is labeled with the movie it belongs to.
So chapter three movie three is 0303. To use this setup, sync the entire repo to a folder named Humescores in the themes folder of your local WordPress install and check out the branch for the current movie you are watching. In some cases I've provided both the beginning and end stage of the code for a particular movie. This is usually because we built something in the movie and I add more content to the theme between the current movie and the next one. When this happens, the end stage folder is named for example, 0308-end.
I created this course and the lesson files to give you options. You can either follow along with me by using the exercise files for each movie, or you can use the exercise files for reference in one folder, and build your own theme in another. It's entirely up to you. Because WordPress theme development requires writing a lot of code, there are many times throughout the course where I've added code to the project in between movies. When this happens, I'll let you know, and I'll explain what I've added. But it's a good rule to always start with the exercise files for the movie you're currently watching.
After watching each movie I recommend you take the time to explore the new code and experiment on your own to make sure you get a solid understanding of what's going on. My goal here is for you to build your understanding of WordPress theme development and I can't do that without your help. As a point of reference, the first movie where we use the exercise files is chapter one, movie two, get and install underscores.
Author
Released
2/6/2017- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer
Skill Level Advanced
Duration
Views
Related Courses
-
Introduction
-
Welcome58s
-
-
1. Set Up a WordPress Development Environment
-
Get and install _s3m 48s
-
2. The Design to Development Process
-
Modular, mobile-first design2m 19s
-
Underscores: An overview1m 50s
-
-
3. Set Up the Basic Theme
-
Configure the theme info5m 32s
-
Create responsive typography6m 19s
-
-
4. Build the Header
-
Style the default header8m 3s
-
-
5. Create Menus
-
Apply styles to the menu6m 33s
-
6. Configure the Single Post Template
-
Apply CSS to the post header6m 25s
-
Style image galleries1m 56s
-
Configure post navigation6m 19s
-
7. Create Conditional Layouts
-
Planning an unusual layout1m 49s
-
-
8. Work with Comments
-
Apply CSS to comments5m 41s
-
9. Work with Featured Images
-
10. Work with Widget Areas (Sidebars)
-
11. Work with Index templates
-
Customize the excerpt output3m 51s
-
Highlight sticky posts4m 57s
-
Customize archive pages5m 51s
-
12. Work with Static Pages
-
13. Advanced Features
-
Add SVG icon functionality9m 16s
-
14. Adding Features to the Customizer
-
Get to know the Customizer4m 20s
-
-
15. Back-End Customization
-
Add a screenshot2m 44s
-
Conclusion
-
Going further with WordPress2m 15s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: How this course and the lesson files will work