Successfully reported this slideshow.
Your SlideShare is downloading. ×

Getting to Know Underscores

Ad

Getting to Know
Underscores
Jason Yingling
Red8 Interactive
@jason_yingling
[ ]

Ad

What We’ll Cover
What _s (underscores) is
Structure of _s
Functionality of _s
How to get started with _s

Ad

Who am I?Introduction
Who am I?
What is _s?
What _s isn’t
Why use _s?
Template Structure
Director of Development, Red8 Int...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Web 101  intro to html
Web 101 intro to html
Loading in …3
×

Check these out next

1 of 28 Ad
1 of 28 Ad
Advertisement

More Related Content

Advertisement
Advertisement

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

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

×