1 of 21

Color Palette Implementation

for WordPress Themes

WordCamp Minneapolis / Saint Paul

Friday, August 21, 2020

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

2 of 21

Hello!

Welcome!

#WCMSP

YOU

THANK

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

3 of 21

Some Background

Professional web developer since 2006.

Contract; LLC; FTE.

Hosted ecommerce app dev; FED; digital marketing.

Currently at a marketing/strategy firm;� Production Lead / Developer;� countless custom WordPress builds.

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

4 of 21

What is the problem?

Photo by Dee @ Copper and Wild on Unsplash

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

5 of 21

What is the problem?

Photo by Dee @ Copper and Wild on Unsplash

PALETTE SYSTEMS ARE (generally)

RIGID AND/OR OPINIONATED.

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

6 of 21

Monochrome Pro

by StudioPress

Limiting and position-specific.

7 of 21

Astra

by Brainstorm Force

This is starting to make sense...

8 of 21

WP Rig

Theme Boilerplate

by Morten Rand-Hendriksen,

et al.

“Daylight” and “Sun”.

9 of 21

What is the approach?

Photo by Mike Petrucci on Unsplash

BUILD A PALETTE SYSTEM THAT IS

Comprehensively-Integrated

& Intent-Focused

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

10 of 21

Progressive Code Demo Agenda

Add ONE color to the theme.
Apply our ONE color to the block editor content.
Include our ONE color in the block editor palette.
Iterate using an array; add ANOTHER color.
Extend the array to TWELVE total palette colors.

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

11 of 21

Progressive Code Demo Agenda

Add ONE color to the theme.
Apply our ONE color to the block editor content.
Include our ONE color in the block editor palette.
Iterate using an array; add ANOTHER color.
Extend the array to TWELVE total palette colors.

QUESTIONS BREAK

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

12 of 21

<?php

/** here we go **/

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP

13 of 21

https://getbootstrap.com/docs/4.0/utilities/colors/

14 of 21

https://themestr.app/theme

15 of 21

https://material.io/design/color/the-color-system.html

16 of 21

https://material.io/resources/color

17 of 21

https://webaim.org/resources/contrastchecker/

18 of 21

http://colorsafe.co/

19 of 21

What now?

20 of 21

THANK YOU

#WCMSP

James Voss Grumish

https://jamesvg.com

@jamesvg

Windmill Strategy — https://www.windmillstrategy.com

21 of 21

THANK YOU

#WCMSP

James Voss Grumish

https://jamesvg.com

@jamesvg

Windmill Strategy

Questions?

Slides: https://go.jamesvg.com/palette-wcmsp

Code: https://git.io/JJjtP