$30 off During Our Annual Pro Sale. View Details »

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. 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
    [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!

    View Slide