2016 WordCamp Kansas City Resources Available @ http://goo.gl/KaOIIn This presentation will show how we plan the development of custom WordPress themes at Red8 Interactive using the WordPress template hierarchy as a guide. It will also delve into tools we use, like Grunt and Git, and how they improve our development process. And we’ll take a look at the benefits of implementing coding standards for your team. This presentation is geared towards beginner developers looking to get a real world example of how these tools and processes can be put into use to plan and develop custom WordPress themes. You won’t be an expert after this presentation, it is only 40 minutes after all, but you will have a solid foundation and resources to go further explore how these tools could improve your own development workflow.

1. Putting the Develop
in Development
Jason Yingling
@jason_yingling
Resources available: https://goo.gl/KaOIIn
[ ]

2. Who am I?Introduction
Who am I?
What We’ll Cover
Organizing a Project Director of Development, Red8 Interactive
3 plugins on WordPress.org repo
3 time WordCamp Speaker
Meetup and WordCamp organizer
@jason_yingling
Developing a Project
Further Resources

3. What We’ll Cover
How we plan a project at
Red8 Interactive
How we develop projects as a team
The tools and resources we use to
improve our development workflow

4. Organizing a ProjectIntroduction
Organizing a Project
@jason_yingling
Developing a Project
Further Resources
• Understanding the WordPress
template hierarchy
– Main Templates
– Commonly overlooked templates
• Breaking down what makes a
template
• Planning a project into templates
and template parts

5. Template Hierarchy
@jason_yingling
How WordPress determines
which template files to use
when displaying a post or page.
“
Introduction
Organizing a Project
Developing a Project
Further Resources

6. Template Hierarchy
Single Post

7. Template Hierarchy
Static Page

8. The Big Three
@jason_yingling
• Index.php – everything falls
back to index. Main post loop.
• Single.php – your single posts
• Page.php – your static pages
Introduction
Organizing a Project
Developing a Project
Further Resources

9. The Forgotten
@jason_yingling
• 404 page
• Search Results
• Archives
Introduction
Organizing a Project
Developing a Project
Further Resources

10. Template Anatomy

11. Breaking it Down

12. Developing a Project
@jason_yingling
• Code to the standards
• Automate your workflow
• Version control your code
Introduction
Organizing a Project
Further Resources
Developing a Project

13. Coding Standards
@jason_yingling
• Learn the WordPress way
• Easier for others to pick up
• Easier for you to pick up others
code
• Helps make code self-
documenting
• Check the Codex
Introduction
Organizing a Project
Further Resources
Developing a Project

14. PHP Standards
@jason_yingling
• Don’t camelCase function
names. Use lowercase and “_”
for spaces
• No shorthand
• Use real tabs and not spaces
Introduction
Organizing a Project
Further Resources
Developing a Project

15. Automate It
@jason_yingling
• Problem: Doing things takes
time.
• Solution: Make the computer do
it for you!
Introduction
Organizing a Project
Further Resources
Developing a Project

16. “
Why use a task
runner?
In one word: automation. The less work you
have to do when performing repetitive tasks like
minification, compilation, unit testing, linting,
etc, the easier your job becomes.
- Gruntjs.com

17. Task Runners
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
The Battle of Build Scripts: Gulp vs Grunt
Grunt for People Who Think Things Like
Grunt are Weird and Hard

18. Some Useful Grunt Tools
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• BrowserSync
• SASS Compiling
• JS Minification
• JS Concatenation
• Lots more

19. GUI Option
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• CodeKit

20. Version Control It
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Work collaboratively
• Track what has changed
• Back everything up
• Revert if needed

21. “
What is git?
Git is known as a "distributed" (rather than
"centralized") version control system because
you can run it locally and disconnected from the
Internet, and then "push" your changes to a
remote system (such as GitHub) whenever you
like.

22. Tips for Successful Version
Controlling
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Write useful commit messages
• Implement features as they’re
ready
• Have a strategy in place

23. Basic Git Workflow
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project

24. Git Commands
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project • git clone
• git checkout
• git add
• git commit
• git merge
• git pull
• git push
• git stash

25. More Git Resources
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Git4WP – Free video course on
using git with WordPress
• A Successful Git Branching
Model
• git docs

26. Further Resources
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Plugins to help speed up
development
– Advanced Custom Fields
– Form Plugins
– Yoast SEO
– WP Pusher

27. Further Resources
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Post Status (Blog)
• WP Tavern (Blog)
• Smashing WordPress (Book)
• Up and Running (Book)
• Post Status Draft (Podcast)
• Apply Filters (Podcast)

28. Further Resources
@jason_yingling
Introduction
Organizing a Project
Further Resources
Developing a Project
• Community Events
– WordCamps
– Local Meetups
– Slack Channels
• Make WordPress
• Post Status
• STL Meetup

29. Best Resources
Go make something.

30. Questions
@jason_yingling
Resources: Google Drive