Last month I gave my first WordCamp presentation at WordCamp Sunshine Coast.

WordCamp Sunshine Coast 2016 was the first time the Sunshine Coast had hosted a WordCamp, and the third region in Queensland so far after the Gold Coast and Brisbane.

It was a wonderful experience to stand alongside so many people I look up to and admire within the WordPress community. We are really blessed with so many amazing contributors to WordPress here in Australia.

It was incredibly humbling to be contacted by Weston Ruter, the lead developer of the Customizer, following my presentation. I had a lot of encouragement and support from a number of the XWP team which was very much appreciated.

If you want to see where the Customizer is heading next, or want to get involved, you can check out Make WordPress Core or jump onto the #core-customize channel on the WordPress Slack team.

The recording of the session doesn’t look like it’ll be uploaded any time soon, but if it does I’ll update this post to include it.

Have a question about the Customizer? Drop me a line in the comments and I’ll see what I can do!

The Slides

The slides are available on Slideshare and Speaker Deck.

The Code

The code used in the demo is available on GitHub: https://github.com/cameronjonesweb/wordcampsc

Register a function to manage your Customizer settings

	add_action( 'customize_register', 'wordcampsc_customize_register' );
	function wordcampsc_customize_register( WP_Customize_Manager $wp_customize ) {
	// Settings etc go here
	}

view raw customizer_register.php hosted with ❤ by GitHub

Create a setting that changes the colour of the links

	$wp_customize->add_setting( 'wordcampsc_link_colour', array(
	'type' => 'theme_mod',
	'default' => '#337ab7',
	'transport' => 'postMessage',
	'sanitize_callback' => 'sanitize_hex_color',
	) );

view raw add_setting.php hosted with ❤ by GitHub

The setting is now registered, but we can’t interact with it until without a control. A control creates the interface to change the setting. In this instance we want a colour picker

Create a control to manage the setting

	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'wordcampsc_link_colour', array(
	'label' => __( 'Link Colour', 'wordcampsc' ),
	'section' => 'colors',
	) ) );

view raw add_control.php hosted with ❤ by GitHub

It won’t update unless we tell it how to

Update in the live preview

	$wp_customize->selective_refresh->add_partial( 'wordcampsc_link_colour', array(
	'selector' => '#wordcampsc_customize_styles',
	'render_callback' => function() {
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	},
	) );

view raw add_partial.php hosted with ❤ by GitHub

Some people will still be running < 4.5 (and should upgrade) but need to be catered for

	if ( isset( $wp_customize->selective_refresh ) ) {
	$wp_customize->selective_refresh->add_partial( 'wordcampsc_link_colour', array(
	'selector' => '#wordcampsc_customize_styles',
	'render_callback' => function() {
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	},
	) );
	} else {
	wp_enqueue_script( 'wordcampsc_customizer', get_template_directory_uri() . '/customizer.js', array(), NULL, true );
	}

view raw selective_refresh_fallback.php hosted with ❤ by GitHub

That’s everything for managing the setting, but we still need to actually output the styles.

Display the style tag in the head for us to target with our Customizer styles

	add_action( 'wp_head', 'wordcampsc_customize_styles' );
	function wordcampsc_customize_styles() {
	echo '<style id="wordcampsc_customize_styles">';
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	echo '</style>';
	}

view raw wp_head.php hosted with ❤ by GitHub

We’re using the code to output the style twice

	$wp_customize->selective_refresh->add_partial( 'wordcampsc_link_colour', array(
	'selector' => '#wordcampsc_customize_styles',
	'render_callback' => function() {
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	},
	) );
	function wordcampsc_customize_styles() {
	echo '<style id="wordcampsc_customize_styles">';
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	echo '</style>';
	}

view raw duplicate_output.php hosted with ❤ by GitHub

Let’s move that into it’s own function for consistency and to remain DRY.

	function wordcampsc_customize_style_output() {
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	}

view raw dry.php hosted with ❤ by GitHub

All together now

	add_action( 'customize_register', 'wordcampsc_customize_register' );
	function wordcampsc_customize_register( WP_Customize_Manager $wp_customize ) {
	$wp_customize->add_setting( 'wordcampsc_link_colour', array(
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'default' => '#337ab7',
	'transport' => 'postMessage',
	'sanitize_callback' => 'sanitize_hex_color',
	) );
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'wordcampsc_link_colour', array(
	'label' => __( 'Link Colour', 'wordcampsc' ),
	'section' => 'colors',
	) ) );
	if( isset( $wp_customize->selective_refresh ) ) {
	$wp_customize->selective_refresh->add_partial( 'wordcampsc_link_colour', array(
	'selector' => '#wordcampsc_customize_styles',
	'render_callback' => function() {
	wordcampsc_customize_style_output();
	},
	) );
	} else {
	wp_enqueue_script( 'wordcampsc_customizer', get_template_directory_uri() . '/customizer.js', array( 'customize-preview' ), NULL, true );
	}
	}
	add_action( 'wp_head', 'wordcampsc_customize_styles' );
	function wordcampsc_customize_styles() {
	echo '<style id="wordcampsc_customize_styles">';
	wordcampsc_customize_style_output();
	echo '</style>';
	}
	function wordcampsc_customize_style_output() {
	echo 'a{color:' . get_theme_mod( 'wordcampsc_link_colour', '' ) . '};';
	}

view raw functions.php hosted with ❤ by GitHub

Gallery

• 

• 

• 

• 

• 

Did you find this post useful?

YesNo