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

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

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

MPLATES & 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 Hunt

November 02, 2019
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. @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
  2. @marktimemedia SUPPORT ALL CONTENT • Content is meant to change

    • Content will never be perfect • Themes should account for any future decision that is possible
  3. @marktimemedia SUPPORT ALL DEVICES • Design breakpoints/context changes based on

    screen size, not device • Keep accessibility in mind (contrast, resizing, navigation, focus, semantics, etc)
  4. @marktimemedia SUPPORT ALL ELEMENTS • All semantic HTML should be

    styled • All WordPress content types should be styled
  5. @marktimemedia reset > global variables > html elements > utility

    classes > block-level classes > template-level classes > overrides
  6. @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/
  7. @marktimemedia UNIVERSAL VARIABLES • Color values • Neutral values •

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

    ul/ol/li dl/dt/dd blockquote sub/sup strong small HTML ATOMS
  9. @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/
  10. @marktimemedia CUSTOM UTILITY CLASSES • Button classes • Heading classes

    • Reverse Text • Current/Selected Item • Highlighted or Sticky item • Read More • Animations/Interactions CUSTOM ATOMS
  11. @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
  12. @marktimemedia CORE MOLECULES • media • alignment • embeds •

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

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

    • editor alignment classes alignwide, alignfull CORE MOLECULES
  15. @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
  16. @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
  17. @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
  18. @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
  19. @marktimemedia QUESTIONS TO ASK • Am I using my atom

    styling as a baseline and only overriding when necessary? WORDPRESS MOLECULES
  20. @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/
  21. @marktimemedia BLOCK STYLE OVERRIDES • Drop Caps • Text Color

    Settings • Text & Font Size • Background Colors • Images • Custom CSS Classes • Alignments
  22. @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
  23. @marktimemedia EDITOR OPTIONS • Disabling/enabling Block Editor on a per-template

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

    outline • Editor width (to match website with) • Using your own grids/media queries THEME OPT-INS
  25. @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
  26. @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
  27. @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/
  28. @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
  29. @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/
  30. @marktimemedia ARCHIVE CONTENT • index.php • archive.php • taxonomy.php •

    category.php & tag.php • author.php • date.php • search.php • front-page.php? CORE TEMPLATES
  31. @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
  32. @marktimemedia REPEATABLE TEMPLATE PARTS • headers • footers • sidebars

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

    • Custom Page/Post Templates • Third party/plugin custom post types & templates CUSTOM TEMPLATES
  34. @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/
  35. @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
  36. @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/
  37. @marktimemedia CORE CUSTOMIZER SETTINGS • Site Title, Tagline, Icon •

    Custom Logo, Custom Header, Header Text Color (optional) • Menus & Locations • Widgets • Homepage Settings
  38. @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?
  39. @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
  40. @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
  41. @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
  42. @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)
  43. @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
  44. @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
  45. @marktimemedia WHEN TO MAKE A CUSTOM BLOCK? • No core

    blocks • No common third party blocks • Custom or unique functionality • Automating content (decisions not options)
  46. @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
  47. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    [email protected] @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!