Appearance Customize – WordPress theme Quick Start

There’s a lot of detailed information on how to add settings under the WordPress Appearance Customize menu. It’s far too detailed if you just want to add a couple of settings.

In this example I just wanted to add some simple fields. One for the company title, which differs from the site title. And another for their logo which appears in the WordPress header.

Modifying Appearance Customize with functions.php

add_action('customize_register', 'yourtheme_customize_register');

function yourtheme_customize_register( $wp_customize ) {

	//first we create a section
	$wp_customize->add_section( 
		'yourtheme_theme_options', 
		array(
			'title'       => __( 'Theme options', 'yourtheme' ),
			'priority'    => 1000, //(probably) make it the last item
			'capability'  => 'edit_theme_options'
		) 
	);


	/* Logo */

	$wp_customize->add_setting( 'header_logo' );

	// image field:
	$wp_customize->add_control( new WP_Customize_Media_Control ( 
		$wp_customize, 
		'theme_logo_control',
		array(
			'label'    => 'Header logo',
			'section'  => 'mytheme_theme_options',
			'settings' => 'header_logo',
			'priority' => 10,
			'mime_type' => 'image'
		) 
	));


	/* Company name, used in footer */
	$wp_customize->add_setting( 'company_title' );

	//text field:
	$wp_customize->add_control( 'company_title_control', 
		array(
			'label' => 'Organisation name',
			'section' => 'mytheme_theme_options',
			'settings' => 'company_title',
			'priority' => 20,
			'type' => 'text'
			)
	);

} //mytheme_customize_register()

Once you add this, check under Appearance > Customize. If all is well you’ll see your logo and title field.

If you’re really adventurous you could create an array of social media sites. Then loop through that array to create a field for each:

/* Social media links */
foreach( array('Facebook', 'Twitter', 'LinkedIn') as $s ) {
	$wp_customize->add_setting( $s.'_link' );

	$wp_customize->add_control( $s.'_link_control',
		array(
			'label' => $s.' account URL',
			'section' => 'mytheme_theme_options',
			'settings' => $s.'_link',
			'type' => 'text',
			'priority' => 100
			)
		);
} //end foreach social media

Displaying the values in the theme

This is the easy part! In your theme file, you can do this:

//get the logo
$logo = wp_get_attachment_image_src(get_theme_mod('header_logo'), 'full');

//get the company title
$title = get_theme_mod('company_title');

You can now echo these variables as you usually would.

I think this makes for a much nicer experience for the end-user. It allows you to make absolutely everything in your theme editable through wp-admin. This means I spend less time on the little updates and more time on the meaty stuff.