Coding a scrolling news ticker with pure CSS and no custom markup
But then I had a eureka moment. This was possible with nothing more than a dab of custom CSS and creative use of a core WordPress feature.
Recent Posts Widget
When you think about it, a latest news ticker is basically just a list of recent posts. Since there’s a default WordPress widget that lists recent posts, no custom programming is needed.
For the first step, simply place a Recent Posts widget on your site. The order or placement doesn’t matter at this point.
Set the widget title to whatever heading text you want displayed preceding the ticker. Set the number to however many “latest news items” you’d like to cycle through.
Keep “Display post date?” unchecked. Your website visitors can assume there’s some immediacy to “latest news” without the post date being displayed here.
As of now, you have a normal-looking widget in the designated area it’s supposed to be. We’ll use some CSS magic to change that.
Absolute Positioning to the Rescue
Before we start on any “scrolling” functionality, let’s break the recent posts widget out of the widget area using absolute positioning.
We’ll also reset a number of styles to allow for a horizontal list of recent post links, and a few other things to prepare us for a full-fledged scrolling news ticker.
Note: The above CSS code assumes that this is the only Recent Posts widget on the page. Replace any instance of
.widget_recent_entries with the unique ID selector (something like
#recent-posts-2) if it’s not.
At this point, we’ve re-positioned and re-styled a normal Recent Posts widget. It’s almost taken shape as a fully-functional scrolling news ticker.
It’s just missing one thing: scrolling. We can accomplish this using CSS keyframe animations.
Note that we already use the
.widget_recent_entries ul selector in the first step, so you could add that style in there. I just broke it up like this so you could more clearly see the addition of new code.
Stop Scrolling on Hover
When a website visitor finds a news story they’d like to click through, we don’t want to ask them to hit a moving target.
Luckily, that can be solved with a new CSS rule that pauses the scrolling animation on hover.
And we’re finished! Watch the video below for the final product.
While this should work on most WordPress themes, it won’t on themes that have no widget areas, or on themes that make gratuitous use of
position: relative on containers of the widget areas.
We had a slight issue with this in Owari, since the
.main-wrap class is has relative positioning.
We overcame this in Owari by using using negative top positioning to account for the fixed height of the ticker (that we defined ourselves) and the height of the navigation bar.
In this particular case, if the Owari site had more than one line of navigation, the navigation bar would be taller to account for the extra rows of menu items. We would have to manually adjust the negative top positioning to account for the difference.
That’s about it
For those who have been working on the web for a while, this might remind you of the much maligned <marquee> tag.
Yeah, pretty much. But at least CSS keyframes aren’t deprecated, and give us a bit more control of how the animation animates.
I’m not going to comment on whether or not these sorts of things are a good thing to put on a website. News tickers scrolling at the bottom of screens are a mainstay of television news shows, so perhaps mimicking the effect on a website can give off the aura of “professional news outlet.”
Ultimately, deciding whether or not to have a news ticker on your website is up to you. And now you know how to do it on your widgetized WordPress websites!