Some basic Customizer examples

customizer-preview.js

/*
Include this file in your theme and enqueue it like this in PHP:

	function my_customize_preview_js() {
		wp_enqueue_script( 'customizer-preview', get_template_directory_uri() . '/path/to/customizer.js', array( 'customize-preview' ), '20170422', true );
	}
	add_action( 'customize_preview_init', 'my_customize_preview_js' );

*/

( function( $ ) {

	// Site title and description.
	wp.customize( 'blogname', function( value ) {
		value.bind( function( to ) {
			$( '.site-title a' ).text( to );
		} );
	} );
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( to ) {
			$( '.site-description' ).text( to );
		} );
	} );

	// Update footer address live
	wp.customize( 'footer_address', function( value ) {
		value.bind( function( to )  {
			$( '#js-footer-address' ).text( to );
		})
	} );
	
	// Update header colour live
	// Adjust the selector and styles according to your theme markup.
	wp.customize( 'header_color', function( value ) {
		value.bind( function( to )  {
			$( '.site-header' ).css( 'background', to );
		});
	} );

} )( jQuery );

customizer.php

<?php
/*
Include this file in your theme functions.php
*/

function my_customizer_controls( $wp_customize ) {

	// Add support for instant previewing of the built-in 'blogname' and 'blogdescription' options
	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	
	//
	// RELATED POSTS: allow changing the number of related posts
	//
	// Create a section for related posts
	$wp_customize->add_section( 'related_posts_section', array(
		'title' => __( 'Related posts' ), // required
		'priority' => 160, // optional (default is 160)
		// Display this only on single posts
		'active_callback' => function() {
			return is_single(); // is_single(), is_page() type checks need to be inside a callback function
		}
	) );

	// Add the setting for the number of related posts
	$wp_customize->add_setting( 'related_posts_number', array(
		'transport' => 'postMessage', // required for selective refresh, default is 'refresh'
		'sanizite_callback' => 'absint', // this can be the name of a function or an anonymous function	
		'default' => 3,
	) );
	
	// Add a control for the related posts setting
	$wp_customize->add_control( 'related_posts_number', array(
		'type' => 'number', // any HTML5 input type, select, textarea, dropdown-pages
		'section' => 'related_posts_section', // Required, core or custom.
		'label' => __( 'Number of posts to show' ),
	) );
	
	// Register a partial for selectively updating the related posts component
	$wp_customize->selective_refresh->add_partial( 'related_posts_number', array(
		'selector' => '.related-posts-container',
		'container_inclusive' => false,
		'render_callback' => function() {
			my_display_related_posts(); // you can use this same function in your template
		},
	) );

	// 
	// ADDRESS IN THE FOOTER
	//
	$wp_customize->add_section( 'footer_address_section', array(
		'title' => 'Footer address',
	) );

	$wp_customize->add_setting( 'footer_address', array(
		'transport' => 'postMessage', // required for live updating via JS
		'sanizite_callback' => 'esc_html',
	) );

	
	//
	// CHANGE HEADER COLOUR
	//
	
	$wp_customize->add_setting( 'header_color', array(
		'default' => '#ffff00',
		'transport' => 'postMessage',
	) );

	// This is a core custom control, you can also make your own by extending WP_Customize_Control
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize, // WP_Customize_Manager
			'header_color', // Setting id
			array( // Args, including any custom ones.
				'label' => __( 'Header Color' ),
				'section' => 'colors', // built-in
			)
		)
	);
	
	//
	// Want to learn more? Head to https://developer.wordpress.org/themes/customize-api/
	//
	
}
add_action( 'customize_register', 'my_customizer_controls' );

/**
 * Hook into wp_head to dynamically set the background color of our heading.
 * Adjust the selector and styles according to your theme markup.
 */
function my_custom_header_color() {
	$header_color = get_theme_mod( 'header_color' );
?>
<style type="text/css">
	.site-header {
		background: <?php echo esc_html( $header_color ); ?>;
	}
</style>
<?php
}
add_action( 'wp_head', 'my_custom_header_color' );

example_footer.php

<?php

// Copy paste this code somewhere into your theme footer.php to show the address

?>
<p id="js-footer-address"><?php
	$address = get_theme_mod( 'footer_address', '' );
	echo esc_html( $address );
?>
</p>

related-posts.php

<?php
/*
Include this file in functions.php
*/

/**
 * Displays a list of related posts. Should be called in single.php within the loop
 */
function my_display_related_posts() {

	$number_of_posts = get_theme_mod( 'related_posts_number', 3 );

	// Get the categories for this post
	$post_categories_query = get_the_category();
	$post_categories_ids = wp_list_pluck( $post_categories_query, 'term_id' );

	// Get three posts with the same category
	$related_posts = new WP_Query( array(
		'posts_per_page' => absint( $number_of_posts ),
		'category__in' => $post_categories,
		'ignore_sticky_posts' => true,
	) );

	// Loop over posts and display them
	if ( $related_posts->have_posts() ) {
	?>
	<div class="related-posts-container">
		<h2><?php esc_html_e( 'Related posts', 'customizer-test' ); ?></h2>
		<ul class="related-posts-list">
	<?php
		while ( $related_posts->have_posts() ) {
			$related_posts->the_post();
	?>
		<li>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
	<?php
		}
	?>
		</ul>
	</div>
	<?php
	}
	wp_reset_postdata();

}