Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting to Know Underscores

552 views

Published on

This presentation covers the WordPress underscores (_s) starter theme's template structure, functionality, and how to get it.

Published in: Technology
  • Be the first to comment

Getting to Know Underscores

  1. 1. Getting to Know Underscores Jason Yingling Red8 Interactive @jason_yingling [ ]
  2. 2. What We’ll Cover What _s (underscores) is Structure of _s Functionality of _s How to get started with _s
  3. 3. Who am I?Introduction Who am I? What is _s? What _s isn’t Why use _s? Template Structure Director of Development, Red8 Interactive 3 plugins on WordPress.org repo 3 time WordCamp Speaker Meetup and WordCamp organizer @jason_yingling Functionality Getting Started
  4. 4. What is _s?Introduction Who am I? What is _s? What it isn’t Why use _s? Template Structure @jason_yingling Functionality Getting Started • Released in 2012 by Automattic • Maintained on Github • Collective knowledge of the WordPress.com Theme Team • 1,000 hour head start
  5. 5. Without _s
  6. 6. With _s
  7. 7. What it isn’tIntroduction Who am i? What is _s? What it isn’t Why use _s? Template Structure @jason_yingling Functionality Getting Started • Not a plug and play theme • Not a parent theme
  8. 8. Why use _s? Less overhead than a full theme _s CSS 921 lines twentysixteen 3,924 lines Transfer 136kb 331kb
  9. 9. Why use _s? Learn the best practices
  10. 10. Why use _s? Get to this faster
  11. 11. Template Structure Introduction Hierarchy Hierarchy _s structure _s templates @jason_yingling Functionality Getting Started How WordPress determines which template files to use when displaying a post or page. “
  12. 12. Template Hierarchy Single Post within _s
  13. 13. Template Hierarchy Static Page within _s
  14. 14. Template Structure Introduction _s structure Hierarchy _s structure _s templates @jason_yingling Functionality Where to Get _s • inc • js • languages • layouts • sass • template-parts
  15. 15. _s templates
  16. 16. Template Structure Introduction Template Tags Template Tags Theme Support @jason_yingling Functionality Getting Started Template tags are used within your blog's Templates to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are. “ - WordPress Codex
  17. 17. Template Structure Introduction Theme Support Template Tags Theme Support @jason_yingling Functionality Getting Started add_theme_support() Allows a theme or plugin to register support of a certain theme feature. If called from a theme, it should be done in the theme's functions.php file to work.
  18. 18. Template Structure Introduction Where to Get _s Where to Get _s Find & Replace Sassify! Components @jason_yingling Functionality Getting Started • Github – https://github.com/Automattic/_s • Underscores.me - http://underscores.me/ • Components - http://components.underscores.me /
  19. 19. Template Structure Introduction Find & Replace Where to Get _s Find & Replace Sassify! Components @jason_yingling Functionality Getting Started • Why? – Prefix your theme to avoid conflicts with other themes or plugins
  20. 20. Find & Replace @jason_yingling Getting Started • When you download _s change the theme directory name to something new Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  21. 21. Replace The Text Domain @jason_yingling Getting Started • Search for: ‘_s’ • Replace with: ‘theme’ • Include the single quotes Replace Function Names • Search for: _s_ • Replace with: theme_ Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  22. 22. Replace Text Domain: in style.css @jason_yingling Getting Started • Search for: Text Domain: _s • Replace with: Text Domain: theme Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  23. 23. Replace _s to capture doc blocks @jason_yingling Getting Started • Search for: _s – Note: there’s a space in there! – ‘ _s’ without the quotes • Replace with: theme – Space is needed here too – ‘ theme’ with no quotes Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  24. 24. @jason_yingling Getting Started Replace _s- to get prefixed handles • Search for: _s- • Replace with: theme- Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  25. 25. @jason_yingling Getting Started Change style.css, footer links, and readme • Update the information in these theme files to personalize your theme Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  26. 26. @jason_yingling Getting Started Sassify! • Underscores also comes with sass built-in • Easy to setup to compile with grunt, gulp, or Codekit Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  27. 27. @jason_yingling Getting Started Components • Get started even faster • Choose from: • Portfolio • Modern Blog • Classic Blog • Business • Magazine Template Structure Introduction Where to Get _s Find & Replace Sassify! Components Functionality
  28. 28. Questions @jason_yingling

×