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.

Transcript

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
8. @marktimemedia HOW TO STYLE THE MOST CONTENT WITH THE LEAST WORK
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
16. @marktimemedia IDENTIFY THE EXTREMES & THE FALLBACKS
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
29. @marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS
30. @marktimemedia http://zqsmm.qiniucdn.com/data/20110511083224/index.html
31. @marktimemedia MOLECULES UNIQUE COMBINATIONS OF ATOMS
32. @marktimemedia
33. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION
34. @marktimemedia
35. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS
36. @marktimemedia
37. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT
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 HTML ATOMS
47. @marktimemedia TABLES & STRUCTURE table tbody thead tfoot tr th td HTML ATOMS
48. @marktimemedia SPECIAL code pre cite address hr time del/ins HTML ATOMS
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!