Demystifying WordPress Theme Development 

No content

It’s not about creating page templates, but instead creating a collection of reusable components. 

The Advantages of Atomic Design ‣ Promotes consistency within the user interface ‣ Establishes a design language ‣ Keeps the code DRY, maintainable, and more performant 

The keys to implementing Atomic Design in a theme ‣ Well organized styles ‣ Template parts ‣ Page templates 

Establish organization for your styles ‣ sass ‣ config ‣ base ‣ modules ‣ layout ‣ theme (optional) ‣ state (optional) 

Template Parts >



Page Templates 

So, what is atomic design? Graphic modified from Atomic Design by Brad Frost 

Atoms 

Atoms & Style Organization ‣ sass ‣ config ‣ base ‣ modules ‣ layout ‣ theme The config & base folders are where most styles will live in the atom phase. 

A config example: _colors.scss //-------------------------------------------------------------- // COLORS //-------------------------------------------------------------- $theme-colors: ( palatinate-blue: #0038e3, black: #222, aluminum: #999, gainsboro: #ddd, white-smoke: #f5f5f5, alabaster: #fbfbfb, white: #fff ); //----------------------------------------- // Global Elements //----------------------------------------- $color__body-background: color(white); //------------------------------- // Buttons //------------------------------- $color__button-background: color(palatinate-blue); $color__button-background-hover: rgba(color(palatinate-blue), 0.7); $color__button-text: color(white); //------------------------------- // Forms //------------------------------- $color__forms-text: color(black); $color__forms-border: color(aluminum); $color__forms-border-focus: color(palatinate-blue); //----------------------------------------- // Tables //----------------------------------------- $color__table-border: color(gainsboro); //------------------------------- // Typography //------------------------------- $color__body-text: color(aluminum); $color__hr: color(aluminum); $color__link: color(aluminum); $color__link-hover: color(palatinate-blue); $color__link-visited: color(aluminum); $color__ins: rgba(color(palatinate-blue), 0.3); $color__pre-border: color(aluminum); 

A base example: _typography.scss // Headings #{headings(1, 6)} { color: $color__heading-text; font-family: $font__heading; font-weight: $font__heading-weight; } // Inline Elements a { border-bottom: $border__link; color: $color__link; text-decoration: none; &:hover, &:focus { color: $color__link-hover; } &:visited { color: $color__link-visited; } } blockquote { color: color(black); margin: 0; padding-left: rem(60); position: relative; &:before { @include position(absolute, rem(-24) null null 0); color: color(palatinate-blue); content: '\201D'; font-family: $font__heading; font-size: em(80); } } 

Molecules 

Molecules + template parts = ❤ >



Molecules & Sass //-------------------------------------------------------------- // CARD //-------------------------------------------------------------- .card { max-width: 100%; position: relative; text-align: center; width: rem(442); > a { @include position(relative, 0 0 0 0); display: block; &:before { @include position(absolute, 0 0 0 0); content: ''; transition: $transition__background-color; } &:hover { &:before { background-color: rgba(color(white), 0.9); } } } } .card__header { @include position(absolute, 50% 0 null 0); font-family: $font__heading; opacity: 0; overflow: hidden; transform: translateY(-50%); transition: $transition__opacity; a { text-decoration: none; } .card:hover & { opacity: 1; } } .card__title { color: color(black); } .card__tags { font-size: 14px; } ‣ Partials generally live within the modules folder ‣ Each molecule / template part should have its own partial (with the exception of modifiers) 

Organisms 

Headers, Footers, Sidebars, Oh my! 

Styling organisms ‣ Keep layout styles (header, footer, sidebar, content) within the layout folder ‣ All other organisms styles can live within the modules folder 

Templates 

Setting up page templates 

Pages 

Atomic design provides a solid framework for development 

Resources ‣ Atomic Design by Brad Frost
 http://atomicdesign.bradfrost.com/ ‣ SMACSS by Jonathan Snook
 https://smacss.com/ ‣ Create & Use Template Parts by Lisa Sabin-Wilson
 http://www.dummies.com/web-design-development/wordpress/templates-themes-plugins/ create-and-use-wordpress-template-parts/ ‣ The WP Template Hierarchy by WP Shout
 https://wphierarchy.com/ 

Hi, I'm Carrie " ‣ Front-end engineer currently heads down learning JavaScript ‣ Silicon Valley & the SF Bay Area are my playground ‣ ‣ I consider Sass a love language, and really love refactoring front-end code 

Questions? http://bit.ly/2hkj76s @CarrieForde [email protected]