Custom WordPress Displaying Different Banner Images on Pages

header.php

<?php

<?php
// Get current page ID and sanitize the input data
$page_id = absint(get_queried_object_id());

// Define image URLs for each page ID (using HTTPS)
$banner_images = array(
    1 => 'https://example.com/banner-1.jpg',
    2 => 'https://example.com/banner-2.jpg',
    3 => 'https://example.com/banner-3.jpg',
    4 => 'https://example.com/banner-4.jpg', // Add new banner image URL for page with ID 4
);

// Check if the current page ID exists in the array and sanitize the image URL
if (isset($banner_images[$page_id])) {
    $banner_url = esc_url($banner_images[$page_id]);
} else {
    // Display a default banner image if the current page ID is not found
    $banner_url = 'https://example.com/default-banner.jpg';
}

// Output the banner image and sanitize the data
echo '<img src="' . esc_attr($banner_url) . '" alt="Banner Image">';

// Check if the current page ID matches the specific page ID and add a nonce
if ($page_id == 4 && wp_verify_nonce($_POST['my_form_nonce'], 'my_form_action')) {
    // Display additional content or custom CSS for this specific page
    echo '<style>.banner { height: 500px; }</style>';
}


/* You can put this code in a WordPress theme file such as functions.php or in a custom plugin or in your own theme header.php file.
 Test it by visiting different pages on your WordPress site to see if the appropriate banner image is displayed. 
 You can also test the form submission with the nonce validation on the specific page ID to check if the additional content or 
 custom CSS is displayed.

----- */

// Get current page ID and sanitize the input data
$page_id = absint(get_queried_object_id());

// Define an array of banner image URLs (using HTTPS)
$banner_images = array(
    'https://example.com/banner-1.jpg',
    'https://example.com/banner-2.jpg',
    'https://example.com/banner-3.jpg',
    'https://example.com/banner-4.jpg',
);

// Define an associative array that specifies which banner image URL to use for each page
$page_specific_banners = array(
    1 => 'https://example.com/page-1-banner.jpg',
    3 => 'https://example.com/page-3-banner.jpg',
    4 => 'https://example.com/page-4-banner.jpg',
);

// Check if the current page ID has a specific banner image URL assigned
if (isset($page_specific_banners[$page_id])) {
    // Use the specific banner image URL for this page
    $banner_url = esc_url($page_specific_banners[$page_id]);
} else {
    // Select a random banner image URL from the array
    $random_banner_url = $banner_images[array_rand($banner_images)];
    $banner_url = esc_url($random_banner_url);
}

// Output the banner image and sanitize the data
echo '<img src="' . esc_attr($banner_url) . '" alt="Banner Image">';

// Check if the current page ID matches the specific page ID and add a nonce
if ($page_id == 4 && wp_verify_nonce($_POST['my_form_nonce'], 'my_form_action')) {
    // Display additional content or custom CSS for this specific page
    echo '<style>.banner { height: 500px; }</style>';
}

/* ----- */

function display_banner() {

    $banner_types = array (
        'homepage' => array (
            'css' => '/css/homepage-banner.css',
            'image' => '/images/homepage-banner.jpg',
            'alt' => 'Homepage Banner'
        ),
        'about-us' => array (
            'css' => '/css/aboutus-banner.css',
            'image' => '/images/aboutus-banner.jpg',
            'alt' => 'About Us Banner'
        ),
        'single-post' => array (
            'css' => '/css/single-post-banner.css',
            'image' => '/images/single-post-banner.jpg',
            'alt' => 'Single Post Banner'
        )
    );

    foreach ($banner_types as $type => $details) {
        if (is_page($type)) {
            wp_enqueue_style( $type . '-banner', get_template_directory_uri() . $details['css'] );
            echo '<div class="' . $type . '-banner">';
            echo '<img src="' . get_template_directory_uri() . $details['image'] . '" alt="' . $details['alt'] . '">';
            echo '</div>';
            break;
        }
    }
}

add_action( 'get_header', 'display_banner' );

/* use arrays to create different header banners for different pages in WordPress. 
Using arrays can provide a more scalable and flexible solution as you can easily add or remove banner types without 
modifying the code that displays the banners. */