WordPress Trending Posts | Popular Posts Ticker Shortcode

/* 

Showcase your trending content with this scrolling WordPress ticker. 

Shortcode: [trending_postss count=5]

Can change count as per your needs.

Note: This shortcode requires the "Post Views Count | Post Views Tracking with Shortcode and Admin Column" snippet to be active, as it orders posts based on the "post_views_counting" meta key. This key is created by snippet mentioned above. if this key does not exist this code would not return the posts. You can configure the number of posts and CSS inside the snippet. Includes user-friendly hover and drag controls.

*/

function wpp_trending_posts_shortcode($atts) {

    $atts = shortcode_atts([

        'count' => 5,

    ], $atts, 'trending_posts');

    $count = intval($atts['count']);

    ob_start();

    $trending_query = new WP_Query([

        'posts_per_page' => $count,

        'meta_key'       => 'post_views_counting',

        'orderby'        => 'meta_value_num',

        'order'          => 'DESC',

        'post_type'      => 'post',

        'post_status'    => 'publish',

    ]);

    if ($trending_query->have_posts()) {

        $i = 1;

        echo '<div class="ticker-container" id="trendingTicker"><div class="ticker-track"><ul class="ticker-list">';

        while ($trending_query->have_posts()) {

            $trending_query->the_post();

            echo '<li class="trending' . $i . '">

                    <a href="' . get_permalink() . '"><i class="fas fa-chart-line"></i> ' . get_the_title() . '</a>

                  </li>';

            $i++;

        }

        echo '</ul></div></div>';

        // Styles

        echo '<style>

            .ticker-container {

                width: 100%;

                overflow: hidden;

                position: relative;

                cursor: grab;

            }

            .ticker-track {

                display: flex;

                width: max-content;

                animation: none;

            }

            .ticker-list {

                display: flex;

                gap: 10px;

                list-style: none;

                margin: 0;

                padding: 10px;

                white-space: nowrap;

            }

            .ticker-list li {

                flex: 0 0 auto;

                border-radius: 40px;

                background: #777;

            }

            .ticker-list li a {

                display: block;

                padding: 10px 15px;

                font-size: 14px;

                line-height: 1.2;

                color: #fff;

                white-space: nowrap;

            }

            .ticker-list li a:hover {

                color: #fff;

            }

            .ticker-list li a i {

                margin-right: 8px;

            }

            li.trending1 { background: #C68585; }

            li.trending2 { background: #DCC08E; }

            li.trending3 { background: #E7C8C8; }

            li.trending4 { background: #FF9632; }

            li.trending5 { background: #8ed2d9; }

        </style>';

        // JavaScript

        $js = <<<JS

document.addEventListener("DOMContentLoaded", function () {

    const container = document.getElementById("trendingTicker");

    const track = container.querySelector(".ticker-track");

    const list = container.querySelector(".ticker-list");

    // Duplicate items for infinite scroll effect

    list.innerHTML += list.innerHTML;

    let scrollPos = 0;

    let speed = 1; // Slower speed for readability

    let isHovered = false;

    let isDragging = false;

    let startX, scrollLeft;

    function animateScroll() {

        if (!isHovered && !isDragging) {

            scrollPos += speed;

            if (scrollPos >= list.scrollWidth / 2) {

                scrollPos = 0;

            }

            container.scrollLeft = scrollPos;

        }

        requestAnimationFrame(animateScroll);

    }

    animateScroll();

    // Hover pause

    container.addEventListener("mouseenter", () => isHovered = true);

    container.addEventListener("mouseleave", () => isHovered = false);

    // Drag events (mouse)

    container.addEventListener("mousedown", (e) => {

        isDragging = true;

        startX = e.pageX - container.offsetLeft;

        scrollLeft = container.scrollLeft;

        container.style.cursor = "grabbing";

    });

    container.addEventListener("mousemove", (e) => {

        if (!isDragging) return;

        e.preventDefault();

        const x = e.pageX - container.offsetLeft;

        const walk = (x - startX) * 2;

        container.scrollLeft = scrollLeft - walk;

    });

    function resumeScrollAfterDelay() {

        setTimeout(() => {

            if (!isHovered && !isDragging) {

                scrollPos = container.scrollLeft;

            }

        }, 2000);

    }

    container.addEventListener("mouseup", () => {

        isDragging = false;

        container.style.cursor = "grab";

        resumeScrollAfterDelay();

    });

    container.addEventListener("mouseleave", () => {

        isDragging = false;

        container.style.cursor = "grab";

        resumeScrollAfterDelay();

    });

    // Drag events (touch)

    container.addEventListener("touchstart", (e) => {

        isDragging = true;

        startX = e.touches[0].pageX - container.offsetLeft;

        scrollLeft = container.scrollLeft;

    });

    container.addEventListener("touchmove", (e) => {

        if (!isDragging) return;

        const x = e.touches[0].pageX - container.offsetLeft;

        const walk = (x - startX) * 2;

        container.scrollLeft = scrollLeft - walk;

    });

    container.addEventListener("touchend", () => {

        isDragging = false;

        resumeScrollAfterDelay();

    });

});

JS;

        echo '<script>' . $js . '</script>';

        wp_reset_postdata();

    } else {

        echo '<p>No trending posts found.</p>';

    }

    return ob_get_clean();

}

add_shortcode('trending_posts', 'wpp_trending_posts_shortcode');