Latest News Ticker

custom.css

/* Ticker */

@-webkit-keyframes ticker {
	0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; }
	100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
}
@keyframes ticker {
	0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; }
	100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
}
.ticker-heading {
	position: absolute;
	background: #80cdb9;
	display: block;
	left: 0;
	top: 0;
	height: 2.5rem;
	padding: 11px 40px;
	z-index: 2;
	color: white;
	text-transform: uppercase;
	font-size: 0.875rem;
	line-height: 1.4em;
}
.ticker-wrap .ticker__item:before {
	content: "";
	height: 11px;
	width: 11px;
	display: inline-block;
	background-color: #2c3d5f;
	border-radius: 100%;
	position: relative;
	margin-right: 15px;
}
.ticker-heading:after {
	content: "";
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 11px solid #80cdb9;
	position: absolute;
	margin-left: 40px;
}
.ticker-wrap {
	position: relative;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	height: 2.5rem;
	background-color: #f9f9f9;
	padding-left: 100%;
	box-sizing: content-box;
}
.ticker:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}
.ticker {
	display: inline-block;
	height: 2.5rem;
	line-height: 2.5rem;
	white-space: nowrap;
	padding-right: 100%;
	box-sizing: content-box;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-name: ticker;
	animation-name: ticker;
	-webkit-animation-duration: 60s;
	animation-duration: 60s;
}
.ticker__item {
	display: inline-block;
	padding: 0 2rem;
	font-size: 0.875rem;
	color: #454545;
}

functions.php

<?php

/* News Ticker */

function breaking_news_ticker_shortcode() {
    // Query custom posts
    $args = array(
        'post_type'      => 'tickers', // Replace 'news' with your custom post type slug
        'posts_per_page' => -1,    // Get all posts, or limit as needed
        'post_status'    => 'publish'
    );
    $query = new WP_Query($args);

    // Start output buffering
    ob_start();

    // Check if posts are available
    if ($query->have_posts()) {
        echo '<div class="ticker-wrap">';
        echo '<div class="ticker-heading">Breaking News</div>';
        echo '<div class="ticker">';

        while ($query->have_posts()) {
            $query->the_post();
            
            // Fetch title/content for the ticker item
            $content = get_the_content(); // Use get_the_excerpt() if you'd prefer the excerpt
            $acf_link = get_field('page_link'); // Replace 'page_link' with your ACF field name

            // Default fallback if no ACF link is provided
            $link = $acf_link ? esc_url($acf_link) : get_permalink();

            echo '<div class="ticker__item"><a target="_blank" href="' . esc_url($link) . '">' . esc_html($content) . '</a></div>';
        }

        echo '</div></div>';
    } else {
        // No posts found message
        echo '<div class="ticker-wrap"><div class="ticker-heading">Breaking News</div>';
        echo '<div class="ticker"><div class="ticker__item">No news available at the moment.</div></div></div>';
    }

    // Reset post data
    wp_reset_postdata();

    // Return the generated content
    return ob_get_clean();
}
add_shortcode('breaking_news_ticker', 'breaking_news_ticker_shortcode');