getting to know underscores
TRANSCRIPT
![Page 1: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/1.jpg)
Getting to Know Underscores
Jason YinglingRed8 Interactive@jason_yingling
[ ]
![Page 2: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/2.jpg)
What We’ll Cover
What _s (underscores) isStructure of _sFunctionality of _sHow to get started with _s
![Page 3: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/3.jpg)
Who am I?IntroductionWho am I?What is _s?What _s isn’tWhy 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
FunctionalityGetting Started
![Page 4: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/4.jpg)
What is _s?IntroductionWho am I?What is _s?What it isn’tWhy use _s?
Template Structure
@jason_yingling
FunctionalityGetting Started
• Released in 2012 by Automattic
• Maintained on Github• Collective knowledge of the
WordPress.com Theme Team• 1,000 hour head start
![Page 5: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/5.jpg)
Without _s
![Page 6: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/6.jpg)
With _s
![Page 7: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/7.jpg)
What it isn’tIntroductionWho am i?What is _s?What it isn’tWhy use _s?
Template Structure
@jason_yingling
FunctionalityGetting Started
• Not a plug and play theme• Not a parent theme
![Page 8: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/8.jpg)
Why use _s?Less overhead than a full theme
_sCSS 921 lines
twentysixteen3,924 lines
Transfer 136kb 331kb
![Page 9: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/9.jpg)
Why use _s?Learn the best practices
![Page 10: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/10.jpg)
Why use _s?Get to this faster
![Page 11: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/11.jpg)
Template StructureIntroduction Hierarchy
Hierarchy_s structure_s templates
@jason_yingling
FunctionalityGetting Started
How WordPress determines which template files to use when displaying a post or page.
“
![Page 12: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/12.jpg)
Template HierarchySingle Post within _s
![Page 13: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/13.jpg)
Template HierarchyStatic Page within _s
![Page 14: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/14.jpg)
Template StructureIntroduction _s structure
Hierarchy_s structure_s templates
@jason_yingling
FunctionalityWhere to Get _s
• inc• js• languages• layouts• sass• template-parts
![Page 15: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/15.jpg)
_s templates
![Page 16: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/16.jpg)
Template StructureIntroduction Template Tags
Template TagsTheme 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
![Page 17: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/17.jpg)
Template StructureIntroduction Theme Support
Template TagsTheme 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.
![Page 18: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/18.jpg)
Template StructureIntroduction Where to Get _s
Where to Get _sFind & ReplaceSassify!Components
@jason_yingling
FunctionalityGetting Started
• Github – https://github.com/Automattic/_s
• Underscores.me - http://underscores.me/
• Components - http://components.underscores.me/
![Page 19: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/19.jpg)
Template StructureIntroduction Find & Replace
Where to Get _sFind & ReplaceSassify!Components
@jason_yingling
FunctionalityGetting Started
• Why?– Prefix your theme to avoid
conflicts with other themes or plugins
![Page 20: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/20.jpg)
Find & Replace
@jason_yingling
Getting Started• When you download _s
change the theme directory name to something new
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 21: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/21.jpg)
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 StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 22: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/22.jpg)
Replace Text Domain: in style.css
@jason_yingling
Getting Started• Search for: Text Domain: _s• Replace with: Text Domain:
theme
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 23: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/23.jpg)
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 StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 24: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/24.jpg)
@jason_yingling
Getting Started
Replace _s- to get prefixed handles• Search for: _s-• Replace with: theme-
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 25: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/25.jpg)
@jason_yingling
Getting Started
Change style.css, footer links, and readme• Update the information in
these theme files to personalize your theme
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 26: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/26.jpg)
@jason_yingling
Getting Started
Sassify!• Underscores also comes
with sass built-in• Easy to setup to compile
with grunt, gulp, or Codekit
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 27: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/27.jpg)
@jason_yingling
Getting Started
Components• Get started even faster• Choose from:• Portfolio• Modern Blog• Classic Blog• Business• Magazine
Template StructureIntroduction
Where to Get _sFind & ReplaceSassify!Components
Functionality
![Page 28: Getting to Know Underscores](https://reader035.vdocument.in/reader035/viewer/2022062900/58ec90d01a28ab534f8b46a7/html5/thumbnails/28.jpg)
Questions
@jason_yingling