Thread by @askwpgirl

Starting a thread here on #wcus @marktimemedia workshop on designing the WordPress theme that thinks of everything. 1/

@marktimemedia What should a theme do?

- Support all possible content that could be put into the site (content is meant to change, never perfect, account for any future decision possible)
- Support all devices (break points based on size not device, accessibility) 2/

@marktimemedia - Support all elements: all semantic HTML, all WordPress content types

Identify the extremes and the fallbacks.

3/

@marktimemedia How can we do all of these things?

Embrace the cascade! Leverage CSS!
Abstract your styling for the broadest use case.
Reset > start at zero

4/

@marktimemedia Manage large CSS projects with ITCSS

creativebloq.com/web-design/man…

5/

@marktimemedia Take advantage of the WordPress Template Hierarchy:

wphierarchy.com

6/

@marktimemedia Atomic Design by Brad Frost:

bradfrost.com/blog/post/atom…

atomicdesign.bradfrost.com/table-of-conte…

7/

@marktimemedia Atoms, molecules, organisms. Organisms = templates in WordPress.

What are the Atoms? HTML Elements you should account for: htmlreference.io

8/

@marktimemedia Start with CSS Reset (most starter themes have do this already). Do some basic styling on html or body to style any content regardless of div content.

cssreset.com/what-is-a-css-…

9/

@marktimemedia If you use SASS - highly recommended - set Universal Variables: color values, neutral values, breakpoints & max-width, universal padding/margins, grids & columns.

medium.com/@ricardozea/sa…

10/

@marktimemedia Style all the text elements: h1-h6, p, a, ul/ol/li, dl/dt/dd, blockquote, etc.

Style all interactive elements: button, form, option, input, label, textarea, progress, select, etc.

Style media: img, picture, figure, figcaption, embed, audio, video, area/map

11/

@marktimemedia Style tables and structure: table, tbody, thead, tfoot, tr, th, td

Special stuff: code, pre, cite, address, hr, time, del/ins

States and properties: hover, visited, active, focus, disabled, aria, checked, expanded, selected, current

12/

@marktimemedia Custom utility classes: button classes, heading classes, reverse text, current/selected item, highlighted or sticky time, read more, animations/interactions.

Great tip! Create an .h2 class to use on an h3 you want to look like an h2 to make semantically correct.

13/

@marktimemedia Okay done with "atoms." Core molecules for WordPress:

- Media/embeds: post thumbnails, embedded images, inline images/floats, galleries, captions, alt text, descriptions.

- Alignment: alignleft, alignright, aligncenter, alignnone and Gutenberg alignwide, alignfull

14/

@marktimemedia - Content: post titles, page titles, archive titles; post meta; post taxonomies (categories, tags, etc.), excerpts, article archive headings, pagination (numbered & paged)

15/

@marktimemedia - Navigation: nested lists, large & small screens, hover and click states, toggles & reveals, current_menu_item, current_menu_parent & current_menu_ancestor

@marktimemedia - defines breakpoints as tiny, small, medium, large, etc. rather than device phone, tablet, desktop.

16/

@marktimemedia - Comments: submission form inputs, comment section header, comment author meta, nested comments, paginated comments, disabled comments section.

17/

@marktimemedia - Custom and 3rd party classes: utility classes for the end user (eg Gravity Forms utility classes), libraries for icons (eg FontAwesome), plugins custom elements, embeds, or widgets.

18/

@marktimemedia Done with molecules. Now we are moving on to WordPress "organisms" - Blocks and Templates:

- Core blocks - gogutenberg.com/blocks Gotta think about styling all of these, though many will be the same as the Atoms you already accounted for.

- Blocks have settings!

19/

@marktimemedia - Block options: default, color palette (my favorite thing to customize for my themes - billerickson.net/wordpress-colo…), font size or custom fonts sizes, responsive embeds, dark mode, wide/full alignments.

20/

@marktimemedia - Editor options - Disabling/enabling Block Editor or Classic Editor on per template basis.

Additional core options - Gutenberg buttons (regular, rounded, outline); Editor width (to match website width); Using your own grids/media queries

21/

@marktimemedia Load your own CSS into admin: width, grids, structure; color, typography; inputs, buttons and forms; images, embeds; Javascript.

Used editor-style.css and only bring your relevant partials if using SASS. davidwalsh.name/add-custom-css…

/22

@marktimemedia Ooooh so cool, see if your theme is styling Gutenberg blocks with:

Block Unit Test wordpress.org/plugins/block-…

Keep up with the latest Gutenberg blocks in progress: wordpress.org/plugins/gutenb…

/23

@marktimemedia WordPress Templates - leverage the cascade of the Template Hierarchy: wphierarchy.com

Types of templates: archives, singular (post/page), front page, blog page, 404, search results.

/24

@marktimemedia Repeatable template parts: headers, footers, sidebars, widget areas, comments, menus, content parts (archive, post content, post grids, post lists).

Custom Post Types: written by you or introduced by a plugin or theme.

/25

@marktimemedia Block templates: populate a page or post with initial blocks; give those blocks initial default content/styles; allow/disallow re-ordering. This is so cool!

billerickson.net/gutenberg-bloc…

/26

@marktimemedia Customizer settings: heading/background images, header/footer text, social URLs, default post image, custom global settings?, third-party plugins customizer settings, e.g. WooCommerce, The Events Calendar, etc.?

/27

@marktimemedia Plugins and Third Party styles:

- typography sizes/colors, buttons & links, metadata, alerts/errors/notices, custom widgets, custom templates, grid system, etc.

E.g. if you want to support WooCommerce, you might want to style the alert or the store notice banner.

/28

@marktimemedia Key takeaways @marktimemedia #WCUS designing themes for all content, leverage power of:

Atomic Design atomicdesign.bradfrost.com

Cascading Styles css-tricks.com/guides/beginne…

Template Hierarchy developer.wordpress.org/themes/basics/…

Test styles w/ extreme content

@threadreaderapp please unroll