Using WordPress ‘custom_header_options’ PHP action

The custom_header_options WordPress PHP action fires just before the submit button in the custom header options form.

Usage

add_action('custom_header_options', 'your_custom_function');
function your_custom_function() {
    // Your custom code here
}

Parameters

• None

More information

See WordPress Developer Resources: custom_header_options

Examples

Add a Custom Field to the Custom Header Options Form

This example adds a new custom field to the custom header options form.

add_action('custom_header_options', 'add_custom_field_to_header_options');
function add_custom_field_to_header_options() {
    ?>
    <p>
        <label for="custom_header_subtitle"><?php _e('Header Subtitle', 'textdomain'); ?></label>
        <input type="text" id="custom_header_subtitle" name="custom_header_subtitle" value="<?php echo esc_attr(get_theme_mod('custom_header_subtitle', '')); ?>" />
    </p>
    <?php
}

Add a Checkbox for Displaying a Call to Action Button

This example adds a checkbox to enable or disable the display of a call to action button in the header.

add_action('custom_header_options', 'add_cta_checkbox_to_header_options');
function add_cta_checkbox_to_header_options() {
    ?>
    <p>
        <label for="display_cta_button"><?php _e('Display Call to Action Button', 'textdomain'); ?></label>
        <input type="checkbox" id="display_cta_button" name="display_cta_button" value="1" <?php checked(get_theme_mod('display_cta_button', 0), 1); ?> />
    </p>
    <?php
}

Add a Color Picker for the Header Text Color

This example adds a color picker to customize the header text color.

add_action('custom_header_options', 'add_color_picker_to_header_options');
function add_color_picker_to_header_options() {
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('wp-color-picker');
    ?>
    <p>
        <label for="header_text_color"><?php _e('Header Text Color', 'textdomain'); ?></label>
        <input type="text" id="header_text_color" name="header_text_color" value="<?php echo esc_attr(get_theme_mod('header_text_color', '')); ?>" class="color-picker" />
    </p>
    <script>
        jQuery(document).ready(function($) {
            $('.color-picker').wpColorPicker();
        });
    </script>
    <?php
}

Add a Dropdown to Select Header Layout

This example adds a dropdown to select different header layout options.

add_action('custom_header_options', 'add_header_layout_dropdown');
function add_header_layout_dropdown() {
    $layouts = array(
        'layout1' => __('Layout 1', 'textdomain'),
        'layout2' => __('Layout 2', 'textdomain'),
        'layout3' => __('Layout 3', 'textdomain'),
    );
    ?>
    <p>
        <label for="header_layout"><?php _e('Header Layout', 'textdomain'); ?></label>
        <select id="header_layout" name="header_layout">
            <?php foreach ($layouts as $value => $label) : ?>
                <option value="<?php echo esc_attr($value); ?>" <?php selected(get_theme_mod('header_layout', 'layout1'), $value); ?>><?php echo esc_html($label); ?></option>
            <?php endforeach;
    </select>
</p>
<?php
}

Add an Image Upload Field for a Custom Header Logo

This example adds an image upload field to allow the user to upload a custom header logo.

add_action('custom_header_options', 'add_header_logo_upload_field');
function add_header_logo_upload_field() {
    wp_enqueue_media();
    ?>
    <p>
        <label for="header_logo"><?php _e('Header Logo', 'textdomain'); ?></label>
        <input type="hidden" id="header_logo" name="header_logo" value="<?php echo esc_attr(get_theme_mod('header_logo', '')); ?>" />
        <button type="button" class="button header-logo-upload"><?php _e('Upload Logo', 'textdomain'); ?></button>
    </p>
    <script>
        jQuery(document).ready(function($) {
            $('.header-logo-upload').on('click', function(e) {
                e.preventDefault();
                var customUploader = wp.media({
                    title: '<?php _e('Select Logo', 'textdomain'); ?>',
                    button: {
                        text: '<?php _e('Use as Logo', 'textdomain'); ?>'
                    },
                    multiple: false
                }).on('select', function() {
                    var attachment = customUploader.state().get('selection').first().toJSON();
                    $('#header_logo').val(attachment.url);
                }).open();
            });
        });
    </script>
    <?php
}