Add a Custom Header Image

To add a custom header image in WordPress, you can use the add_theme_support() function along with the custom-header feature. This will enable the header image functionality in your theme.

Here’s an example code snippet that demonstrates how to add a custom header image:

function wpsnippets_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . '/images/default-header.jpg',
        'default-text-color' => '000',
        'width'              => 1200,
        'height'             => 400,
        'flex-width'         => true,
        'flex-height'        => true,
    );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'wpsnippets_custom_header_setup' );

In this example, we define the wpsnippets_custom_header_setup() function and hook it to the after_setup_theme action. Inside the function, we set the arguments for the custom header image using an array.

The default-image parameter specifies the default header image URL. You can change it to the desired image URL in your theme.

The default-text-color parameter sets the default color for the header text. You can specify a color code or use a color name.

The width and height parameters define the dimensions of the header image. You can adjust these values to fit your theme’s design.

The flex-width and flex-height parameters allow the header image to be flexible in width and height, respectively. Set them to true if you want the header image to resize dynamically.

Once you’ve added this code to your theme’s functions.php file, you should see the “Header” option in the WordPress Customizer, where you can upload and manage your custom header image.

Examples

Example 1: Adding a Custom Header Image to a WordPress Theme

This use case demonstrates how to add a custom header image to a WordPress theme using the add_theme_support() function.

// Add support for custom header image
function wpsnippets_custom_header_image() {
    add_theme_support( 'custom-header', array(
        'default-image' => get_template_directory_uri() . '/images/default-header.jpg',
        'width'         => 1200,
        'height'        => 400,
        'flex-width'    => true,
        'flex-height'   => true,
    ) );
}
add_action( 'after_setup_theme', 'wpsnippets_custom_header_image' );

In this code example, we define a custom function wpsnippets_custom_header_image() that adds support for a custom header image using the add_theme_support() function. We specify the default image, width, height, and flexibility options for the header image. The function is then hooked to the after_setup_theme action to ensure it is executed at the appropriate time.

Example 2: Modifying Custom Header Image Parameters

This use case demonstrates how to modify the parameters of a custom header image using the custom_header_args filter.

// Modify custom header image parameters
function wpsnippets_modify_header_image_args( $args ) {
    $args['default-image'] = get_template_directory_uri() . '/images/new-default-header.jpg';
    $args['width'] = 1600;
    $args['height'] = 600;
    return $args;
}
add_filter( 'custom_header_args', 'wpsnippets_modify_header_image_args' );

In this code example, we create a custom function wpsnippets_modify_header_image_args() that modifies the parameters of a custom header image. We access the $args array passed to the function and update the default-image, width, and height values. Finally, we return the modified $args array. The function is hooked to the custom_header_args filter to apply the modifications.

Example 3: Displaying Custom Header Image in a Theme Template

This use case demonstrates how to display the custom header image in a WordPress theme template using the get_header_image_tag() function.

// Display custom header image in template
function wpsnippets_display_header_image() {
    if ( get_header_image() ) {
        echo get_header_image_tag();
    }
}

In this code example, we define a custom function wpsnippets_display_header_image() that checks if a custom header image is set using the get_header_image() function. If a header image is set, we output the HTML markup for the header image using the get_header_image_tag() function. This function automatically generates the appropriate <img> tag with the header image URL, width, height, and alt text.