With WordPress’ release of the customize options under Appearance->Customize, many web developers learning WordPress have been asking the question of how is this done. This article will give you a step by step tutorial to achieve custom options within WordPress’ Theme Customize Options.
Step 1 Initialize Options
There are two ways to initialize your options. You can make an entirely custom option field, or you can tie in your editing modules to the current options available. Regardless of what you decide to do, the first step is to create the function below.
function init_customizer( $wp_customize ) {
}
add_action( ‘customize_register’, ‘init_customizer’);
Once you’ve created this function, we’re going to use WordPress’ add_setting method to add a setting to the color support. The below method should be added to the function above.
$wp_customize->add_setting(
‘get_text_color’,
array(
‘default’ => ‘#757575’,
‘transport’ => ‘postMessage’
)
);
If you were adding a custom section, you would first need to define a section with the add_section method, then define the add_setting method. Below is the add_section code.
$wp_customize->add_section(
‘logo’, array(
‘title’ => ‘Logo’,
‘priority’ => 38
)
);
Following the add_setting method, we then need to call the WP_Customize_Color_Control Class by using the add_control method. If you’d like to see other classes to use please refer to the add_control WordPress codex.
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
‘text_color’,
array(
‘label’ => ‘Text Color’,
‘section’ => ‘colors’,
‘settings’ => ‘get_text_color’,
‘priority’ => 1
)
)
);
Step 2 Enable Styles
Next we need to create a new function after init_customizer that will update the css styles. This will give us the ability to see the changes on page refresh.
function customizer_css() { ?>
<style type=”text/css”>
body {color: <?php echo get_theme_mod(‘get_text_color’);?>;}
</style>
<?php }
add_action( ‘wp_head’, ‘customizer_css’ );
This is a great starting point, but waiting to see your changes on page refresh just isn’t the greatest user experience. So let’s use JavaScript to make this experience even better for the user.
Step 3 Let’s Use JavaScript
The first thing we need to do to enable JavaScript is to create a function that calls a live preview.
function customizer_live_preview() {
}
add_action( ‘customize_preview_init’, ‘customizer_live_preview’ );
Inside this function we need to use WordPress’ enqueue_script method to properly call a path to our JavaScript file.
wp_enqueue_script(
‘theme-customizer’,
get_template_directory_uri() . ‘/admin/customize/customizer.js’,
array( ‘jquery’, ‘customize-preview’ ),
‘0.3.0’,
true
);
We are now done with the functions.php file and can create our JavaScript customizer.js file.
Step 4 Creating The JavaScript
Inside customizer.js we need to hook into our functions.php file by using the wp.customize call. Inside the function we then have to call ‘get_text_color’ from the add_settings method. The JavaScript code is below.
wp.customize( ‘get_text_color’, function( value ) {
value.bind( function( to ) {
$( ‘body’ ).css( ‘color’, to );
} );
});
And that’s it. You should now be able to easily change your body’s text color in live preview in WordPress’ Theme Customize Options. Enjoy creating your own custom WordPress Theme.