Last active
June 13, 2023 08:03
-
-
Save krystyna93/6c52c6eeba03fc87361ba02e0a42ab95 to your computer and use it in GitHub Desktop.
Custom WordPress Displaying Different Banner Images on Pages
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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. */ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment