getting to know underscores
TRANSCRIPT
Getting to Know Underscores
Jason YinglingRed8 Interactive@jason_yingling
[ ]
What We’ll Cover
What _s (underscores) isStructure of _sFunctionality of _sHow to get started with _s
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
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
Without _s
With _s
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
Why use _s?Less overhead than a full theme
_sCSS 921 lines
twentysixteen3,924 lines
Transfer 136kb 331kb
Why use _s?Learn the best practices
Why use _s?Get to this faster
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.
“
Template HierarchySingle Post within _s
Template HierarchyStatic Page within _s
Template StructureIntroduction _s structure
Hierarchy_s structure_s templates
@jason_yingling
FunctionalityWhere to Get _s
• inc• js• languages• layouts• sass• template-parts
_s templates
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
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.
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/
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
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
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
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
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
@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
@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
@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
@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
Questions
@jason_yingling