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
   

   View Slide

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
   

   View Slide

3. @marktimemedia
   WHAT THIS TALK
   WILL NOTBE
   

   View Slide

4. @marktimemedia
   VISUAL
   DESIGN
   LESSONS
   

   View Slide

5. @marktimemedia
   THEME
   CODING
   LESSONS
   

   View Slide

6. @marktimemedia
   WHAT THIS TALK
   WILL BE
   

   View Slide

7. @marktimemedia
   HOW TO
   PLAN FOR THE
   UNKNOWN
   

   View Slide

8. @marktimemedia
   HOW TO STYLE
   THE MOST CONTENT
   WITH THE LEAST
   WORK
   

   View Slide

9. @marktimemedia
   WHAT SHOULD
   A THEME DO?
   

   View Slide

10. @marktimemedia
    SUPPORT ALL
    CONTENT
    

    View Slide

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
    

    View Slide

12. @marktimemedia
    SUPPORT ALL
    DEVICES
    

    View Slide

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)
    

    View Slide

14. @marktimemedia
    SUPPORT ALL
    ELEMENTS
    

    View Slide

15. @marktimemedia
    SUPPORT ALL ELEMENTS
    • All semantic HTML should be styled
    • All WordPress content types should be styled
    

    View Slide

16. @marktimemedia
    IDENTIFY THE
    EXTREMES
    & THE
    FALLBACKS
    

    View Slide

17. @marktimemedia
    HOW CAN WE
    DO ALL THIS?
    

    View Slide

18. @marktimemedia
    EMBRACE THE
    CASCADE
    

    View Slide

19. @marktimemedia
    Style cascade:
    LEVERAGING CSS
    

    View Slide

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

    View Slide

21. @marktimemedia
    reset >
    global variables >
    html elements >
    utility classes >
    block-level classes >
    template-level classes >
    overrides
    

    View Slide

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/
    

    View Slide

23. @marktimemedia
    Template cascade:
    LEVERAGING THE
    HIERARCHY
    

    View Slide

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

    View Slide

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

    View Slide

26. @marktimemedia
    Structural cascade:
    LEVERAGING
    ATOMIC DESIGN
    

    View Slide

27. @marktimemedia
    THINKING
    ATOMICALLY
    

    View Slide

28. @marktimemedia
    ATOMIC DESIGN
    BRAD FROST
    

    View Slide

29. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS
    

    View Slide

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

    View Slide

31. @marktimemedia
    MOLECULES
    UNIQUE COMBINATIONS
    OF ATOMS
    

    View Slide

32. @marktimemedia
    

    View Slide

33. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION
    

    View Slide

34. @marktimemedia
    

    View Slide

35. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS
    

    View Slide

36. @marktimemedia
    

    View Slide

37. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT
    

    View Slide

38. @marktimemedia
    

    View Slide

39. @marktimemedia
    

    View Slide

40. @marktimemedia
    WORDPRESS
    ATOMS
    

    View Slide

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/
    

    View Slide

42. @marktimemedia
    CSS RESET
    box-sizing
    margins
    padding
    display
    font-size
    line-height
    text-decoration
    *
    html
    CSS ATOMS
    

    View Slide

43. @marktimemedia
    UNIVERSAL VARIABLES
    • Color values
    • Neutral values
    • Breakpoints & max-width
    • Universal margins/paddings
    • Grids & Columns
    CSS ATOMS
    

    View Slide

44. @marktimemedia
    TEXT
    h1
    h2
    h3
    h4
    h5
    h6
    p
    a
    ul/ol/li
    dl/dt/dd
    blockquote
    sub/sup
    strong
    small
    HTML ATOMS
    

    View Slide

45. @marktimemedia
    INTERACTIVE
    button
    form
    fieldset
    input
    label
    option
    select
    textarea
    details
    progress
    HTML ATOMS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

50. @marktimemedia
    CUSTOM UTILITY CLASSES
    • Button classes
    • Heading classes
    • Reverse Text
    • Current/Selected Item
    • Highlighted or Sticky item
    • Read More
    • Animations/Interactions
    CUSTOM ATOMS
    

    View Slide

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
    

    View Slide

52. @marktimemedia
    WORDPRESS
    MOLECULES
    

    View Slide

53. @marktimemedia
    CORE MOLECULES
    • media
    • alignment
    • embeds
    • galleries
    • typography
    • pagination
    • navigation
    • comments
    • alerts
    • core widgets
    

    View Slide

54. @marktimemedia
    MEDIA & EMBEDS
    • post thumbnails
    • embedded images
    traditional & aspect ratio
    • inline images/floats
    • galleries
    traditional & block based
    • captions
    • alt text
    • descriptions
    CORE MOLECULES
    

    View Slide

55. @marktimemedia
    ALIGNMENT
    • media alignment classes
    alignleft, alignright, aligncenter, alignnone
    • editor alignment classes
    alignwide, alignfull
    CORE MOLECULES
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. @marktimemedia
    QUESTIONS TO ASK
    • Am I using my atom styling as a baseline and only overriding
    when necessary?
    WORDPRESS MOLECULES
    

    View Slide

61. @marktimemedia
    TOOLS TO TEST
    • Chrome contrast checker
    https://chrome.google.com/webstore/detail/wcag-color-
    contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en
    

    View Slide

62. @marktimemedia
    WORDPRESS
    ORGANISMS
    

    View Slide

63. @marktimemedia
    CORE EDITOR
    BLOCKS
    

    View Slide

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/
    

    View Slide

65. @marktimemedia
    BLOCK STYLE OVERRIDES
    • Drop Caps
    • Text Color Settings
    • Text & Font Size
    • Background Colors
    • Images
    • Custom CSS Classes
    • Alignments
    

    View Slide

66. @marktimemedia
    THEME OPT-INS
    FOR BLOCKS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

70. @marktimemedia
    PREVIEW IN THE
    BLOCK EDITOR
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

75. @marktimemedia
    WORDPRESS
    TEMPLATES
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

79. @marktimemedia
    REPEATABLE TEMPLATE PARTS
    • headers
    • footers
    • sidebars
    • widget areas
    • comments
    • menus
    • archive post content
    grids, lists, etc.
    CORE TEMPLATES
    

    View Slide

80. @marktimemedia
    CUSTOM & THIRD PARTY TEMPLATES
    • Custom Post Types
    • Custom Page/Post Templates
    • Third party/plugin custom post types & templates
    CUSTOM TEMPLATES
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

84. @marktimemedia
    CUSTOMIZER
    SETTINGS
    

    View Slide

85. @marktimemedia
    CORE CUSTOMIZER
    SETTINGS
    • Site Title, Tagline, Icon
    • Custom Logo, Custom Header,
    Header Text Color (optional)
    • Menus & Locations
    • Widgets
    • Homepage Settings
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

88. @marktimemedia
    PLUGINS & THIRD
    PARTY CONTENT
    

    View Slide

89. @marktimemedia
    COMMON
    PLUGIN
    CONTENT
    

    View Slide

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
    

    View Slide

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
    

    View Slide

92. @marktimemedia
    THIRD PARTY
    BLOCKS
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

96. @marktimemedia
    CUSTOM BLOCKS
    

    View Slide

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)
    

    View Slide

98. @marktimemedia
    KEY TAKEAWAYS
    

    View Slide

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
    

    View Slide

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!
     

     View Slide