Getting to Know Underscores
•Download as PPTX, PDF•
1 like•1,624 views
This presentation covers the WordPress underscores (_s) starter theme's template structure, functionality, and how to get it.
![Getting to Know
Underscores
Jason Yingling
Red8 Interactive
@jason_yingling
[ ]](https://image.slidesharecdn.com/underscores-160516144837/85/Getting-to-Know-Underscores-1-320.jpg)
Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (20)
Similar to Getting to Know Underscores
Similar to Getting to Know Underscores (20)
More from Jason Yingling
More from Jason Yingling (12)
Recently uploaded
Recently uploaded (20)
Getting to Know Underscores
- 1. Getting to Know Underscores Jason Yingling Red8 Interactive @jason_yingling [ ]
- 2. What We’ll Cover What _s (underscores) is Structure of _s Functionality of _s How to get started with _s
- 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. 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. Without _s
- 6. With _s
- 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. Why use _s? Less overhead than a full theme _s CSS 921 lines twentysixteen 3,924 lines Transfer 136kb 331kb
- 9. Why use _s? Learn the best practices
- 10. Why use _s? Get to this faster
- 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. Template Hierarchy Single Post within _s
- 13. Template Hierarchy Static Page within _s
- 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. _s templates
- 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. 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. 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. 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. 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. 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. 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. 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. @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. @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. @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. @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
Editor's Notes
- The name _s also called underscores
- The name _s also called underscores
- The name _s also called underscores
- Break out of the presentation and show folders and files contained within. Cover some of what they do. End on template parts and go back to PowerPoint
- Switch to the code for single.php Switch to next section to discuss the_posts_navigation()
- -get_header() – pulls in header.php -get_template_part() – Let’s you pull in a custom template part. -single_post_title() - Displays or returns the title of the post when on a single post page -bloginfo() – Displays info about current site. Pass it parameters like ‘name’, ‘description’, ‘template_directory’ -BUT Underscores also has it’s own that provide additional functionality. -- posted on and entry footer
- -- underscores supports things like post thumbnails, post formats -- Show how to remove support for certain post formats -- Show how to add the_custom_logo() support via WordPress 4.5
- Show how to fork form github and pull down into a site with git Show how to pull from underscores.me -Show configuration for SASS compiling Show components