Demystifying WordPress Theme Development

Everyone is talking about atomic design these days, but how can we implement this into our workflows? In this session, you will learn the basics of atomic design, and how Photoshop / Sketch mockups can be broken down into the atomic parts. Once we’ve fleshed out how the design breaks down into its atomic parts, we’ll apply atomic design methodologies to our theme development strategy. At the end of this session, you’ll walk way with organizational strategies that not only improve your development time, but strategies that will make your codebase more robust and easier to manage.

Transcript

1. Demystifying WordPress Theme Development
3. It’s not about creating page templates, but instead creating a collection of reusable components.
4. The Advantages of Atomic Design ‣ Promotes consistency within the user interface ‣ Establishes a design language ‣ Keeps the code DRY, maintainable, and more performant
5. The keys to implementing Atomic Design in a theme ‣ Well organized styles ‣ Template parts ‣ Page templates
6. Establish organization for your styles ‣ sass ‣ config ‣ base ‣ modules ‣ layout ‣ theme (optional) ‣ state (optional)
7. Template Parts <?php /** * Template for Speaking cards. * * @package carrieforde3 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'card card--talk' ); ?>> <header class="entry-header card__header"> <h2 class="entry-title card__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> </header> <div class="entry-content card__content"> <?php the_excerpt(); ?> </div> <footer class="entry-footer card__footer"> <a href="<?php the_permalink(); ?>" class="button button--text color-white"><?php esc_html_e( 'Get Details', 'carrieforde' ); ?></a> </footer> </article>
8. Page Templates <?php /** * Front Page template. * * @package carrieforde3 */ get_header(); ?> <div id="primary" class="content-area"> <?php do_action( 'alcatraz_before_main' ); ?> <main id="main" class="site-main" role="main"> <?php do_action( 'alcatraz_before_main_inside' ); ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'template-parts/content', 'front-page' ); ?> <?php endwhile; ?> <?php do_action( 'alcatraz_after_main_inside' ); ?> </main> <?php do_action( 'alcatraz_after_main' ); ?> </div> <?php get_footer(); ?>
9. So, what is atomic design? Graphic modified from Atomic Design by Brad Frost
10. Atoms
11. Atoms & Style Organization ‣ sass ‣ config ‣ base ‣ modules ‣ layout ‣ theme The config & base folders are where most styles will live in the atom phase.
12. 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);
13. 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); } }
14. Molecules
15. Molecules + template parts = ❤ <?php /** * Component - Card * * @package Frey */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'card' ); ?>> <?php if ( has_post_thumbnail() ) : ?> <div class="post-thumbnail"> <?php the_post_thumbnail( 'card' ); ?> </div> <?php endif; ?> <header class="card__header"> <h2 class="card__title"><?php the_title(); ?></h2> </header> <div class="card__content"> <?php the_excerpt(); ?> </div> <footer class="card__footer"> <p class="tags"><?php frey_display_tags(); ?></p> </footer> </article>
16. 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)
17. Organisms
18. Headers, Footers, Sidebars, Oh my!
19. Styling organisms ‣ Keep layout styles (header, footer, sidebar, content) within the layout folder ‣ All other organisms styles can live within the modules folder
20. Templates
21. Setting up page templates
22. Pages
23. Atomic design provides a solid framework for development
24. 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/
25. 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
26. Questions? http://bit.ly/2hkj76s @CarrieForde carrie@carrieforde.com