My presentation from WordCamp Orange County 2012. Will post resources on my website eventually, need to re-code a design due to license issues I did not think about upon writing the presentation, d'oh!

1. Let’s Build
A
Custom Theme
WordCamp Orange County 2012
#wcoc
@theandystratton

2. Plan Your Work.
Work Your Plan.

3. Stay Organized.
What needs to be dynamic?
Organize assets: HTML/CSS/JS/images.

4. Static HTML/CSS.
Highly recommended.
Great reference point for possible browser
bugs you may find later.
Keep in a separate folder, use as starting
point.

5. Our Home Page...

8. Our Interior Page...

11. Our Blog Page...

14. Planning our work.

16. Link to home page

17. Link to home page
WP Nav Menu

18. Link to home page
WP Nav Menu
Custom Post Type (slide)
Includes title and featured image.

20. Home Page Title/Content

21. Home Page Title/Content
Custom field for
anchor text and URL

23. Widgetized Sidebar for Footer

25. the_title()

26. the_title()
the_content()

27. the_title()
Custom call to
wp_list_pages()
(followed by
widgetized sidebar)
the_content()

29. the_date()
and
comments_number()

30. the_date()
and
comments_number()
Featured Image, the_title()
and the_excerpt()

31. the_date()
and
comments_number()
WP Nav Menu
& Widgetized Sidebar
Featured Image, the_title()
and the_excerpt()

32. BREAK DOWN
your design into
MANAGEABLE
WordPress components.

33. Let’s dive into some
<code/>

34. Let’s Review.

35. Stay Organized.
Plan your work, work your plan.
Organization & planning are key to
effective & efficient coding.

36. Isolate HTML/CSS.
Fastest starting point.
Focus on user experience, not dev
experience.
Best way to troubleshoot browser bugs
later.

37. Chunk Things.
Dissect markup into manageable pieces.
Header, Footer, Sidebar(s), etc.
Most can be done with copy/paste and
replacing static functions with WP functions.

38. Doing It Right.
Are you doing it wrong?
Enqueue scripts/styles. Use hooks.
Avoid hard-coding anything that can be
dynamic, hooked or a widget when
possible.

39. Optimized &
Secure.
Escape your output.
Scrub your input.
Use core WordPress API’s/functions

40. Steal Borrow.
Refer to TwentyTen/TwentyEleven
View other themes.
Re-use your code & refine when
appropriate.

41. Context Is Queen.
What functionality do they need?
Some pieces may not need to be
implemented (e.g. some sites do not have
blogs)

42. Maintain
Experience.
Design for the user, code for the admin.
Maintain the WordPress admin UI when
adding options/settings screens, etc.

43. Thanks ;]