WordCamp Minneapolis 2014

WordCamp Minneapolis 2014 is happening today! And I’m presenting! What better way to kick off this site?

I’m presenting today on Creating Color Palette options to a WordPress theme. Check out the slides below.

And here are some code snippets for those sections in the slides where I went into the code. (They have been reduced in some cases but should get the point across.)

Sass piece

/*
 * color palette vars
 */
$palette-numbers: 1 2 3;

$alpha-btn: 						#ffffff #282921 #ffffff;
$alpha-btn-bg: 					#f4b11f #f5f923 #ea7f00;
$alpha-btn-shadow: 			#954900 #b7bc2b #844d00;
@each $i in $palette-numbers {
	.palette-#{$i} {

		background: nth($body-bg, $i);

		/*
		 * Buttons
		 */
		%alpha-btn {
			@include transition(all .3s);
			box-shadow: 0 -1px 0 0 nth($alpha-btn-shadow, $i);
			color: nth($alpha-btn, $i);
			text-shadow: 0 -1px 0 rgba(0,0,0,.3);
			background: nth($alpha-btn-bg, $i);
			&:link, &:visited {
				color: nth($alpha-btn, $i);
			}
			&:hover {
				color: nth($alpha-btn, $i);
				background: darken(nth($alpha-btn-bg, $i), 5%);
			}
		}
	}
}

Theme Customizer piece

/* 1. Create the action hook callback */
add_action( 'customize_register', 'wordcamp_demo_customize_register' );
function wordcamp_demo_customize_register( $wp_customize ) {
	/* 2. Create the custom swatch control class */
	class wcd_Radio_Swatch_Control extends WP_Customize_Control {
		public $type = 'radio-swatch';

		public function render_content() {
			if ( empty( $this->choices ) )
				return;
			$name = '_customize-radio-' . $this->id;
			?>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php
			foreach ( $this->choices as $value => $palette ) :
				$color_swatch = '<div style="display:table; margin-bottom: 10px; width:100%; height: 30px;">';
				$color_width = 100/count($palette['swatches']);
				foreach ( $palette['swatches'] as $color ) :
					$color_swatch .= '<div style="display: table-cell; width: ' . $color_width . '%; height: 100%; background: ' . $color . ';"></div>';
				endforeach;
				$color_swatch .= '</div>';
				?>
				<label>
					<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
					<span> Palette <?php echo esc_attr( $value ); ?></span>
					<?php echo $color_swatch; ?>
				</label>
				<?php
			endforeach;
		}
	}

	/* 3. Add the palette_option setting */
	$wp_customize->add_setting(
		'palette_option',
		array(
			'default' => '1'
		)
	);
	/* 4. Add the control for the swatch radio inputs */
	$wp_customize->add_control(
		new wcd_Radio_Swatch_Control(
			$wp_customize,
			'palette_option',
			array(
				'label' => 'Available Color Palettes',
				'section' => 'colors',
				'priority' => '1',
				'settings' => 'palette_option',
				'type' => 'radio-swatch',
				'choices' => array(
					'1' => array(
						'swatches' => array(
							'#51535c', //header bg
							'#b5b8bf', //brand
							'#d6d6d3', //main nav bg
							'#e9e9e9', //body bg
							'#f4b11f', //alpha btn bg
							'#676970', //beta btn bg
							'#f5ac0d', //link
							'#f7dca2', //silo bg btm
							'#d1d1d1', //callout bg
							'#e8a40f', //form title bg
							'#fafafa', //pa callout bg
							'#fbeccb', //firm benefits bg
							'#616369', //bottom bar bg
							'#51535c', //footer bg
						),
					),
					'2' => array(
						'swatches' => array(
							'#618a10', //header bg
							'#d3e550', //brand
							'#f9fddb', //main nav bg
							'#282921', //body bg
							'#f5f923', //alpha btn bg
							'#f9fddb', //beta btn bg
							'#c1cb3b', //link
							'#7d9e43', //silo bg btm
							'#edf18c', //callout bg
							'#5b7d12', //form title bg
							'#f8facc', //pa callout bg
							'#f8f9d1', //firm benefits bg
							'#282921', //bottom bar bg
							'#49670a', //footer bg
						),
					),
					'3' => array(
						'swatches' => array(
							'#1d2122', //header bg
							'#ff8a00', //brand
							'#0088a5', //main nav bg
							'#dddddd', //body bg
							'#ea7f00', //alpha btn bg
							'#54c6de', //beta btn bg
							'#ed8b03', //link
							'#2498b0', //silo bg btm
							'#f4fdff', //callout bg
							'#006277', //form title bg
							'#dbf0f4', //pa callout bg
							'#f2f2f2', //firm benefits bg
							'#1b1b1b', //bottom bar bg
							'#006277', //footer bg
						),
					),
				),
			)
		)
	);
}