Coding a scrolling news ticker with pure CSS and no custom markup
I received an interesting support request from one of our WordPress.com customers using the Owari theme. This customer wanted a scrolling news ticker scrolling on top of their site.
At first, I dismissed the request, thinking custom markup and JavaScript would be required. WordPress.com users only have the option to add custom CSS. Due to security concerns, custom JavaScript is understandably not allowed.
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.
Animate It
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.
Other Themes
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.
If custom JavaScript was allowable in this scenario, we could use it to calculate the dynamic height of the navigation bar. But that would ruin the pure CSS-iness of this technique, and it’s not that big of a deal to just increase the negative top position.
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!