To place a vertical banner on the right side of a specific page in WordPress

Step 1: Add CSS for the Banner

Add the following CSS to your theme’s style.css file:

/* Style for the vertical banner */
.vertical-banner-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust the width as needed */
    background: #f8f8f8; /* Adjust background color as needed */
    border: 1px solid #ddd;
    z-index: 9999;
}

.vertical-banner img {
    width: 100%;
    height: auto;
}

Step 2: Add HTML for the Banner in functions.php

Add the following PHP code to your theme’s functions.php file to display the banner on a specific page:

function add_vertical_banner() {
    if (is_page('your-page-slug')) { // Replace 'your-page-slug' with the actual slug of your page
        echo '<div class="vertical-banner-container">
                <img src="https://example.com/path/to/your/image1.jpg" alt="Banner 1">
                <!-- Add more images if needed -->
              </div>';
    }
}
add_action('wp_footer', 'add_vertical_banner');

To insert a vertically scrolling banner on the right side of a specific page in WordPress

1. Add CSS for the Banner

Add the following CSS to your theme’s stylesheet (style.css):

/* Style for the vertical scrolling banner */
.vertical-banner-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust the width as needed */
    overflow: hidden;
    background: #f8f8f8; /* Adjust background color as needed */
    border: 1px solid #ddd;
    z-index: 9999;
}

.vertical-banner {
    display: flex;
    flex-direction: column;
    animation: scroll-vertical 10s linear infinite;
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

.vertical-banner img {
    width: 100%;
    height: auto;
}

2. Add HTML for the Banner

Create the HTML structure for the banner and add it to the functions.php file, ensuring it only appears on the specified page:

function add_vertical_scrolling_banner() {
    if (is_page('your-page-slug')) { // Replace 'your-page-slug' with the actual slug of your page
        echo '<div class="vertical-banner-container">
                <div class="vertical-banner">
                    <img src="path/to/your/image1.jpg" alt="Banner 1">
                    <img src="path/to/your/image2.jpg" alt="Banner 2">
                    <img src="path/to/your/image3.jpg" alt="Banner 3">
                    <!-- Add more images as needed -->
                </div>
              </div>';
    }
}
add_action('wp_footer', 'add_vertical_scrolling_banner');

3. Add JavaScript for Smooth Scrolling (Optional)

If you want smoother scrolling, you can add some JavaScript to control the scroll behavior. Add this to your functions.php:

function add_smooth_scroll_script() {
    if (is_page('your-page-slug')) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const banner = document.querySelector('.vertical-banner');
            let startY = banner.scrollHeight;
            banner.style.transform = `translateY(${startY}px)`;

            function scrollBanner() {
                startY -= 1; // Adjust this value to control the speed
                if (startY <= -banner.scrollHeight) {
                    startY = banner.scrollHeight;
                }
                banner.style.transform = `translateY(${startY}px)`;
                requestAnimationFrame(scrollBanner);
            }

            scrollBanner();
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_smooth_scroll_script');

To place a vertical banner on the right side of specific pages in WordPress

Step 1: Add CSS for the Banner

Add the following CSS to your theme’s style.css file:

/* Style for the vertical banner */
.vertical-banner-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px; /* Adjust the width as needed */
    background: #f8f8f8; /* Adjust background color as needed */
    border: 1px solid #ddd;
    z-index: 9999;
}

.vertical-banner img {
    width: 100%;
    height: auto;
}

Step 2: Add HTML for the Banner in functions.php

Add the following PHP code to your theme’s functions.php file to display the banner on specific pages:

function add_vertical_banner() {
    if (is_page(array('page-slug-1', 'page-slug-2', 'page-slug-3'))) { // Replace with actual slugs of your pages
        echo '<div class="vertical-banner-container">
                <div class="vertical-banner">
                    <img src="https://example.com/path/to/your/image1.jpg" alt="Banner 1">
                    <!-- Add more images if needed -->
                </div>
              </div>';
    }
}
add_action('wp_footer', 'add_vertical_banner');