Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Custom WordPress Theming with Underscores

Introduction to Custom WordPress Theming with Underscores

Heather Acton

June 13, 2014
Tweet

More Decks by Heather Acton

Other Decks in Programming

Transcript

  1. 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
  2. What is _s? • Starter theme for WordPress • By

    Automattic’s WordPress.com theme team
  3. Why Start with _s? Code should be: • Small •

    Fast • Secure • Maintainable
  4. Why Start with _s? Because most commercial themes and frameworks

    suck. And you can do better. You really can.
  5. 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
  6. 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
  7. 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’ );
  8. 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.
  9. 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
  10. 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
  11. 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)