Introduction to Custom WordPress Theming with Underscores

Transcript

1. Intro to Custom Theming with _s Heather Acton @heatheracton
2. Obligatory Intro to Me • WP dev since 2008 • Organized WCCHI in 2011 and 2012 • Founded the WPLC meetup • Love my kiddos, craft beer, and live music
3. What is _s? • Starter theme for WordPress • By Automattic’s WordPress.com theme team
4. Why Start with _s? Code should be: • Small • Fast • Secure • Maintainable
5. Why Start with _s? Because most commercial themes and frameworks suck. And you can do better. You really can.
6. Now That You’re a Believer Prereqs • Decent understanding of WP theme structure • Decent understanding of WordPress as a CMS • Solid HTML & CSS knowledge (inc Inspector usage) • Can “read” PHP and know syntax • Local development experience highly preferred • Basic Photoshop skills • Be a really really good Googler
7. Let’s Roll Go to _s and generate your theme
8. What’s In the Box • Stylesheet with resets and other basic rules • Header/footer templates • Standard page template • Blog-related templates • Search & 404 templates • Little JS • inc directory Further reading: Theme Anatomy Visual
9. Let’s Have Some Fun With Styles
10. Contain & Center Add to style.css ! #page { max-width: 960px; margin: 0 auto; }
11. Content/sidebar layout Enqueue the provided stylesheet in functions.php within function yourthemename_scripts() wp_enqueue_style ( 'wcchi-cs-style', get_template_directory_uri() . ‘/layouts/content-sidebar.css’ );
12. Custom Background • Theme enabled • Appearance—>Background • Choose color or image • Set a #page background in style.css
13. PSD as Your Guide • Use ruler to measure and set widths • Use color picker to get hex or rgb codes • Use text tool to get font sizes, families, colors, weights, and styles • Crop out & trim imagery. Add canvas size as needed. Turn off unnecessary layers to make this cleaner.
14. Kick It Up a Notch With Advanced Techniques
15. Page Templates • Duplicate page.php and rename to home.php • Change first line to include template name • Change content template it pulls from • Duplicate content.php & rename to content-home.php • Set appropriate page to use Home template now available in template dropdown • Settings—>Reading set front page displays to your desired static page
16. Custom Post Types, Taxonomies, and Queries Read more: http://codex.wordpress.org/Post_Types http://codex.wordpress.org/Taxonomies http://codex.wordpress.org/Class_Reference/ WP_Query
17. Including Add’l Styles Keep your head clean. Use: wp_enqueue_style
18. Including JS / jQuery Keep your head clean. Use: wp_enqueue_script
19. Following Standards & Avoiding Pitfalls
20. Don’t Be a Noob • Style all typography • h1, h2, h3, p, ul, ol, li, etc. • Structure and style all template types • search.php & 404.php Further Reading / Exercise: Theme Unit Testing
21. Other Tips • Enable post thumbnails in functions.php (uncomment) • Move basic styles to a css directory and enqueue in functions.php • Create an img directory • Include modernizr.js • Disable post formats (delete in functions.php)
22. Required Reading Codex: Theme Development ! WordPress Theme Tutorial by ThemeShaper
23. Helpful Plugins • Developer • Quick installation of many helpful developer plugins • What the File
24. Question Time