Better theme styling through classes. In this session, we will learn how to examine a site with the web inspector to find the classes and markup that we need to properly style a custom child theme for WordPress. We'll learn how to add custom classes to the body, menu items, and widgets. This session will also cover how to use pseudo-elements to style specific elements on a page that don't have their own classes.
####Setup
- Local WP install
- Code editor
- Chrome
- Web inspector
- Twenty Sixteen theme
- Classy child theme
- Testing content XML: https://codex.wordpress.org/Theme_Unit_Test
- Monster Widget plugin: https://wordpress.org/plugins/monster-widget/
####Why Classes?
- Classes vs IDs: https://css-tricks.com/the-difference-between-id-and-class/
- IDs are anchors
- IDs & Classes in JavaScript
- CSS Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
####Getting Classy
- Sticky posts
- Cat posts
- Archives widget
- Multiple classes
- Body class function: https://codex.wordpress.org/Function_Reference/body_class
- Body classes
####Staying Classy
- Menu editor classes
- New widget classes: https://wordpress.org/plugins/widget-css-classes/
- Adding Body classes: https://wordpress.org/plugins/custom-classes/
- Using Pseudo-Elements: https://css-tricks.com/pseudo-class-selectors/