Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Templates & Plugins & Blocks, Oh My! Designing the Theme that Thinks of Everything

Michelle Schulp
November 02, 2019

Templates & Plugins & Blocks, Oh My! Designing the Theme that Thinks of Everything

When designing WordPress themes, one of the biggest challenges stems from a core component of WordPress itself: the ability for site owners to change, modify, and build new content themselves. This simple yet powerful capability was a driving force behind the adoption and popularity of WordPress, but theme designers are faced with a difficult task: designing for content and functionality that doesn’t yet exist.

As content and functionality become even more modular thanks to advances like the Gutenberg editor, theme designers will have to accommodate even more flexible ways of visualizing and presenting information. How do we anticipate and accommodate the needs of a constantly evolving website while providing visual solutions that are clean, thoughtful, and consistent?

We will walk through the entire design thinking process as it relates to themes, and you’ll leave with a thorough checklist of steps and tools for designing themes that support WordPress core functionality, custom templates and content, common plugins, and an array of standard and custom Gutenberg blocks. This process is useful both for custom theme builds, and designing themes for sale as a product.

Michelle Schulp

November 02, 2019

More Decks by Michelle Schulp

Other Decks in Design


  1. TEMPLATES & PLUGINS & BLOCKS, Oh my! Designing The Theme

    That Thinks Of Everything
  2. @marktimemedia I Design & Build DIGITAL INTERFACES HI, I’M MICHELLE.

    Rockstar at saying stuff. Adorable badass. Carefully curated spontaneity. Master suitcase packer. Accidental fitness buff. actually not coffee
  3. @marktimemedia WHAT THIS TALK WILL NOTBE

  4. @marktimemedia VISUAL DESIGN LESSONS

  5. @marktimemedia THEME CODING LESSONS

  6. @marktimemedia WHAT THIS TALK WILL BE

  7. @marktimemedia HOW TO PLAN FOR THE UNKNOWN


  9. @marktimemedia WHAT SHOULD A THEME DO?

  10. @marktimemedia SUPPORT ALL CONTENT

  11. @marktimemedia SUPPORT ALL CONTENT • Content is meant to change

    • Content will never be perfect • Themes should account for any future decision that is possible
  12. @marktimemedia SUPPORT ALL DEVICES

  13. @marktimemedia SUPPORT ALL DEVICES • Design breakpoints/context changes based on

    screen size, not device • Keep accessibility in mind (contrast, resizing, navigation, focus, semantics, etc)
  14. @marktimemedia SUPPORT ALL ELEMENTS

  15. @marktimemedia SUPPORT ALL ELEMENTS • All semantic HTML should be

    styled • All WordPress content types should be styled

  17. @marktimemedia HOW CAN WE DO ALL THIS?

  18. @marktimemedia EMBRACE THE CASCADE

  19. @marktimemedia Style cascade: LEVERAGING CSS

  20. @marktimemedia Abstract your styling for the broadest use case

  21. @marktimemedia reset > global variables > html elements > utility

    classes > block-level classes > template-level classes > overrides
  22. @marktimemedia ITCSS https://www.creativebloq.com/web-design/ manage-large-css-projects-itcss-101517528 https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

  23. @marktimemedia Template cascade: LEVERAGING THE HIERARCHY

  24. @marktimemedia Abstract your structure for the broadest use case

  25. @marktimemedia blocks & template parts > core templates > page

    & block templates > custom templates
  26. @marktimemedia Structural cascade: LEVERAGING ATOMIC DESIGN

  27. @marktimemedia THINKING ATOMICALLY

  28. @marktimemedia ATOMIC DESIGN BRAD FROST


  30. @marktimemedia http://zqsmm.qiniucdn.com/data/20110511083224/index.html


  32. @marktimemedia


  34. @marktimemedia


  36. @marktimemedia


  38. @marktimemedia

  39. @marktimemedia

  40. @marktimemedia WORDPRESS ATOMS

  41. @marktimemedia HTML & CSS ATOMS • CSS Reset • universal

    variables • text • interactive • media • tables & structure • special elements • states • custom utility classes https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://htmlreference.io/
  42. @marktimemedia CSS RESET box-sizing margins padding display font-size line-height text-decoration

    * html CSS ATOMS
  43. @marktimemedia UNIVERSAL VARIABLES • Color values • Neutral values •

    Breakpoints & max-width • Universal margins/paddings • Grids & Columns CSS ATOMS
  44. @marktimemedia TEXT h1 h2 h3 h4 h5 h6 p a

    ul/ol/li dl/dt/dd blockquote sub/sup strong small HTML ATOMS
  45. @marktimemedia INTERACTIVE button form fieldset input label option select textarea

    details progress HTML ATOMS
  46. @marktimemedia MEDIA img picture figure figcaption embed audio video area/map

  47. @marktimemedia TABLES & STRUCTURE table tbody thead tfoot tr th

  48. @marktimemedia SPECIAL code pre cite address hr time del/ins HTML

  49. @marktimemedia STATES & PROPERTIES hover visited active focus disabled ARIA

    checked expanded selected current HTML ATOMS https://css-tricks.com/so-many-states/ https://a11yproject.com/posts/ARIA-states/
  50. @marktimemedia CUSTOM UTILITY CLASSES • Button classes • Heading classes

    • Reverse Text • Current/Selected Item • Highlighted or Sticky item • Read More • Animations/Interactions CUSTOM ATOMS
  51. @marktimemedia QUESTIONS TO ASK • Have I made purposeful styling

    decisions about all my HTML elements? • Have I written my styling rules in the broadest (least specificity) way possible? • Do I have fallback styles declared for elements that aren’t wrapped in the expected tag? WORDPRESS ATOMS
  52. @marktimemedia WORDPRESS MOLECULES

  53. @marktimemedia CORE MOLECULES • media • alignment • embeds •

    galleries • typography • pagination • navigation • comments • alerts • core widgets
  54. @marktimemedia MEDIA & EMBEDS • post thumbnails • embedded images

    traditional & aspect ratio • inline images/floats • galleries traditional & block based • captions • alt text • descriptions CORE MOLECULES
  55. @marktimemedia ALIGNMENT • media alignment classes alignleft, alignright, aligncenter, alignnone

    • editor alignment classes alignwide, alignfull CORE MOLECULES
  56. @marktimemedia CONTENT • post titles, page titles, archive titles •

    post metadata publish date, author, updated • post taxonomies categories, tags, etc • excerpts • article archive headings • pagination numbered & paged CORE MOLECULES
  57. @marktimemedia NAVIGATION • nested lists primary, secondary, tertiary… • large

    and small screens • hover and click states • toggles and reveals • current_menu_item • current_menu_parent & current_menu_ancestor CORE MOLECULES
  58. @marktimemedia COMMENTS • submission form inputs • comment section header

    • comment author metadata avatars, name, date & time, link • nested comments • paginated comments • disabled comment section CORE MOLECULES
  59. @marktimemedia CUSTOM & THIRD PARTY CLASSES • custom: utility classes

    for the end user – menus, buttons, media – anywhere there is a GUI for adding classes • libraries: icons, select2, other libraries you’re including • third party: plugins adding custom elements, embeds, or widgets CUSTOM MOLECULES
  60. @marktimemedia QUESTIONS TO ASK • Am I using my atom

    styling as a baseline and only overriding when necessary? WORDPRESS MOLECULES
  61. @marktimemedia TOOLS TO TEST • Chrome contrast checker https://chrome.google.com/webstore/detail/wcag-color- contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en

  62. @marktimemedia WORDPRESS ORGANISMS

  63. @marktimemedia CORE EDITOR BLOCKS

  64. @marktimemedia CORE BLOCKS • core/paragraph • core/image • core/heading •

    core/gallery • core/list • core/quote • core/audio • core/cover • core/file • core/video • core/preformatted • core/code • core/freeform • core/html • core/pullquote • core/table • core/verse • core/button • core/columns • core/media-text • core/more • core/nextpage • core/separator • core/spacer • core/shortcode • core/archives • core/categories • core/latest-comments • core/latest-posts https://gogutenberg.com/blocks/
  65. @marktimemedia BLOCK STYLE OVERRIDES • Drop Caps • Text Color

    Settings • Text & Font Size • Background Colors • Images • Custom CSS Classes • Alignments
  66. @marktimemedia THEME OPT-INS FOR BLOCKS

  67. @marktimemedia BLOCK OPTIONS • Default block styles • Color Palette

    & Custom Colors • Font Size Palette & Custom font sizes • Responsive Embeds • Dark Mode • Wide/Full alignments THEME OPT-INS
  68. @marktimemedia EDITOR OPTIONS • Disabling/enabling Block Editor on a per-template

    basis • Disabling/enabling Classic Editor on a per-template basis THEME OPT-INS
  69. @marktimemedia ADDITIONAL CORE OPTIONS • Gutenberg buttons - regular, rounded,

    outline • Editor width (to match website with) • Using your own grids/media queries THEME OPT-INS
  70. @marktimemedia PREVIEW IN THE BLOCK EDITOR

  71. @marktimemedia LOADING ADMIN CSS • width, grids, and structure •

    color and typography • inputs, buttons, and forms • images, embeds • do you need JavaScript? PREVIEWING IN THE EDITOR
  72. @marktimemedia GUTENBERG CSS OVERRIDES • Overriding Gutenberg styles to match

    your theme styles • Only targeting the elements you want with .editor-styles-wrapper PREVIEWING IN THE EDITOR
  73. @marktimemedia TOOLS TO TEST • Block Unit Test https://wordpress.org/plugins/block-unit-test/ •

    Gutenberg plugin - for latest versions before they launch https://wordpress.org/plugins/gutenberg/
  74. @marktimemedia QUESTIONS TO ASK • Does my theme allow (or

    disallow) the settings necessary to output core block content as expected? • Does the preview of the elements resemble the final output? • Do my styles account for placing blocks on different template layouts (sidebar vs full width, etc)? • Do my styles account for placing blocks in a different order? WORDPRESS ORGANISMS
  75. @marktimemedia WORDPRESS TEMPLATES

  76. @marktimemedia CORE TEMPLATES • content - page, post, archives, home,

    index, blog • special - 404, search, author, attachment, sticky • repeatable - headers, footers, comments • aside - sidebars, widget areas https://developer.wordpress.org/themes/basics/template-hierarchy/ https://wphierarchy.com/
  77. @marktimemedia ARCHIVE CONTENT • index.php • archive.php • taxonomy.php •

    category.php & tag.php • author.php • date.php • search.php • front-page.php? CORE TEMPLATES
  78. @marktimemedia SINGLE CONTENT • singular.php • single.php • page.php •

    single-post.php • attachment.php • 404.php • sticky • single post type • front-page.php? CORE TEMPLATES
  79. @marktimemedia REPEATABLE TEMPLATE PARTS • headers • footers • sidebars

    • widget areas • comments • menus • archive post content grids, lists, etc. CORE TEMPLATES
  80. @marktimemedia CUSTOM & THIRD PARTY TEMPLATES • Custom Post Types

    • Custom Page/Post Templates • Third party/plugin custom post types & templates CUSTOM TEMPLATES
  81. @marktimemedia BLOCK TEMPLATES • populate a page or post with

    initial blocks • give those blocks initial default content/styles • allow or disallow removal/reordering of blocks BLOCK TEMPLATES https://www.billerickson.net/gutenberg-block-templates/
  82. @marktimemedia QUESTIONS TO ASK • Did my styling of atoms,

    molecules, and organisms account for new content types? • Did my styling of atoms, molecules, and organisms account for being used within different page template or layouts? • Do my templates allow for unexpected (non-ideal) content? • Do my templates allow for no content or content errors? WORDPRESS TEMPLATES
  83. @marktimemedia TOOLS TO TEST • Unit Test https://codex.wordpress.org/Theme_Unit_Test • Validating

    your theme https://developer.wordpress.org/themes/advanced- topics/validating-your-theme/
  84. @marktimemedia CUSTOMIZER SETTINGS

  85. @marktimemedia CORE CUSTOMIZER SETTINGS • Site Title, Tagline, Icon •

    Custom Logo, Custom Header, Header Text Color (optional) • Menus & Locations • Widgets • Homepage Settings
  86. @marktimemedia CUSTOM CUSTOMIZER SETTINGS • Header/background images • Header/Footer Text

    • Social URLs • Default post image • Any custom global settings you want! • Third Party - plugins adding customizer settings?
  87. @marktimemedia QUESTIONS TO ASK • Is my theme properly displaying

    in the customizer window? • Are settings from the customizer properly displaying in my theme? • Do third party settings display appropriately in my theme? CUSTOMIZER SETTINGS
  88. @marktimemedia PLUGINS & THIRD PARTY CONTENT

  89. @marktimemedia COMMON PLUGIN CONTENT

  90. @marktimemedia COMMON PLUGIN CONTENT • typography sizes/colors • buttons &

    links • metadata (price, times, dates, etc) • alerts/errors/notices • custom widgets • custom templates • grid system and media query/breakpoints
  91. @marktimemedia QUESTIONS TO ASK • Does the plugin come with

    any special styling classes? • Does the plugin come with any custom templates or blocks? • Does the plugin come with any custom widgets? • Does the plugin come with any customizer/settings pages? • Do I need to override any of the plugin’s styles? PLUGIN CONTENT
  92. @marktimemedia THIRD PARTY BLOCKS

  93. @marktimemedia THIRD PARTY BLOCK TYPES • testimonials • sliders •

    accordions • tabs • social sharing • custom galleries • features • author/team/people • call to action • grids and lists • custom buttons • custom columns • downloads • advanced functionality (events, ecommerce, forms, maps, etc)
  94. @marktimemedia THIRD PARTY BLOCK EXAMPLES • https://wordpress.org/plugins/advanced-gutenberg-blocks/ • https://wordpress.org/plugins/stackable-ultimate-gutenberg- blocks/

    • https://gutenberghub.com/blocks/ • https://wordpress.org/plugins/coblocks/ • https://wordpress.org/plugins/atomic-blocks/ • https://github.com/marktimemedia/acf-component-blocks
  95. @marktimemedia QUESTIONS TO ASK • Am I explicitly supporting any

    third party content (e.g. WooCommerce Blocks, Atomic Blocks, etc)? • Have I accounted for overriding any default styles that come bundled with the third party content? • Are there any editor styles that are conflicting with your editor styles? THIRD PARTY/PLUGIN BLOCKS
  96. @marktimemedia CUSTOM BLOCKS

  97. @marktimemedia WHEN TO MAKE A CUSTOM BLOCK? • No core

    blocks • No common third party blocks • Custom or unique functionality • Automating content (decisions not options)
  98. @marktimemedia KEY TAKEAWAYS

  99. @marktimemedia KEY TAKEAWAYS • Leverage the power of Atomic Design

    atoms > molecules > organisms > templates > pages • Leverage the power of Cascading Styles reset > global variables > elements > utility classes > block-level classes > template-level classes > overrides • Leverage the power of the Template Hierarchy template parts > core templates > specific templates > custom templates • Test your styles with extreme content
  100. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    michelle@marktimemedia.com @marktimemedia michelleschulp.pink bit.ly/theme-for-everything WHERE TO FIND ME NEXT: NOW: SiteGround, sessions, hallway track, exercising ONLINE: Fitness & Freelance, Various podcasts, Posting food photos on Instagram IN PERSON: Staying in Minneapolis for a while!