---
title: "How to Add a Scrolling Announcement Bar (Marquee) in WordPress"
url: https://nexterwp.com/blog/wordpress-marquee-ticker-block/
date: 2026-09-16
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "WordPress has no native marquee or ticker block. Here are the two real ways to build a scrolling announcement bar with CSS, plus the accessibility rule most implementations skip."
image: https://nexterwp.com/wp-content/uploads/2026/09/wordpress-marquee-ticker-block-featured-1024x538.jpg
word_count: 2076
---

# How to Add a Scrolling Announcement Bar (Marquee) in WordPress

## Key Takeaways

- WordPress core and Nexter Blocks do not list a native “Marquee” or “Ticker” block, because the old HTML tag is deprecated and obsolete.
- Nexter Blocks Custom Code to Block turns a short HTML, CSS, and JavaScript marquee into a reusable Gutenberg block for headers, template parts, or landing pages.
- CSS marquee animation uses transform: translateX() on a duplicated content track, with @keyframes scroll-left moving from 0 to -50% for a seamless loop.
- Nexter Extension Code Snippets Manager adds the same marquee CSS as a header, footer, or template snippet without editing functions.php or building a child theme.
- prefers-reduced-motion disables the scrolling animation for visitors who set reduced motion, and the bar fits temporary announcements like sale deadlines, shipping notices, or launch countdowns.

 

Say you're setting up a Black Friday sale and want a thin bar across the top of the site with the offer text sliding past, the kind you've seen on a hundred e-commerce sites. You open the WordPress block inserter and search "marquee." Nothing. You search "ticker" or "scrolling text." Still nothing. That's not a gap in your search – WordPress genuinely does not ship a native marquee or ticker block, and neither Nexter Blocks nor most page builders list one by that name either. This guide covers why that gap exists and the two real ways to fill it without installing another single-purpose plugin.

Table of Contents

## Why There's No Native Marquee Block

There used to be a literal answer to this: the HTML `<marquee>` tag. Browsers supported it natively in the 1990s and 2000s, and it did exactly what the name suggests – scrolled its contents automatically. It was deprecated for years and is now a non-standard, obsolete element that modern HTML specs explicitly advise against using. Nothing has replaced it as a first-class HTML tag, which is part of why no block editor treats "marquee" as a built-in block type – there's no underlying browser primitive left to wrap.

What every current implementation uses instead is a CSS animation: a strip of text (or a repeated set of logos, or a list of announcements) inside a container with `overflow: hidden`, animated horizontally with `@keyframes` and `transform: translateX()`. It looks identical to the old marquee tag but runs on the GPU instead of a deprecated browser feature, and it's built with tools every modern block editor already has: a container block, some custom CSS, and optionally a few lines of JavaScript to pause on hover.

This is also why searching for a marquee plugin on WordPress.org turns up a handful of small, narrowly-scoped options rather than one obvious standard tool the way you'd find for, say, contact forms. Ticker functionality is common enough to want, but specific enough in its styling needs (bar height, font, background color, scroll speed) that most sites end up customizing whatever plugin they pick anyway – which is the same amount of CSS work as building it directly, minus the extra plugin dependency.

![Diagram showing how a CSS marquee animation scrolls text using transform translateX](https://nexterwp.com/wp-content/uploads/2026/09/diag5-marquee-track.jpg)A CSS marquee is a duplicated content track animated with transform: translateX() on a loop.

## Method 1: Build It With Nexter Blocks' Custom Code Converter

Nexter Blocks includes a feature that turns any custom HTML, CSS, and JavaScript into a fully functional Gutenberg block. That's the honest route to a marquee here – not a pre-built "Marquee block" (it doesn't exist), but a way to drop in the standard CSS-animation pattern once and reuse it as a real block anywhere on the site.

- **Step 1.** In the block editor, add the **Custom Code to Block** feature from Nexter Blocks.

- **Step 2.** Paste in a simple HTML structure: an outer container with `overflow:hidden`, and an inner strip holding your announcement text (duplicated once, back to back, so the loop has no visible seam).

- **Step 3.** Add the CSS animation – a `@keyframes` rule sliding the inner strip from `translateX(0)` to `translateX(-50%)`, applied on a loop.

- **Step 4.** Save it as a reusable block so you can drop the same scrolling bar into a header, a template part, or a single landing page without rebuilding it each time.

The core CSS pattern, stripped down to the part that actually does the scrolling, looks like this:

`.announcement-track {
display: flex;
width: max-content;
animation: scroll-left 20s linear infinite;
}
.announcement-track:hover {
animation-play-state: paused;
}
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}`

Duplicate the announcement content once inside `.announcement-track` so the `-50%` translation lines up exactly with the start of the second copy, and the loop reads as continuous instead of snapping back to the start.

***Also Read:** this is the same CSS-transform technique behind most modern site motion – see [our guide to scroll animation in WordPress](https://nexterwp.com/blog/how-to-add-scroll-animation-in-wordpress-site/) for the broader set of methods, including ones triggered by scroll position rather than running continuously.*

![Diagram explaining why marquee content must be duplicated for a seamless scrolling loop](https://nexterwp.com/wp-content/uploads/2026/09/diag6-duplicate-loop.jpg)Duplicating the content once and animating exactly halfway across is what hides the seam.

## Method 2: The Code Snippets Manager Route

If you'd rather not touch the block editor at all – say the bar needs to live in the site header or footer template rather than inside a specific page's content – Nexter Extension's Code Snippets Manager is the cleaner tool. It adds custom PHP, CSS, JavaScript, or HTML to a site without editing `functions.php` or building a child theme, and every snippet runs as a static file rather than an extra database query on each page load.

- **Step 1.** Open **Nexter Extension → Code Snippets** and create a new HTML/CSS snippet.

- **Step 2.** Paste in the same marquee markup and CSS from Method 1.

- **Step 3.** Set the snippet's placement (header, footer, or a specific template) and, if the tool supports conditional loading, restrict it to the pages that actually need it – a promo bar rarely needs to run sitewide forever.

- **Step 4.** Save and preview before publishing; a snippet that ships broken CSS to the whole site is a worse outcome than not having a marquee at all.

***Also Read:** if you're deciding between this approach and a traditional code-snippets plugin, [our comparison of code snippet plugins vs. child-theme functions.php](https://nexterwp.com/blog/wordpress-code-snippets-plugin-vs-child-theme-in-functions-php/) lays out the trade-offs in more detail.*

## Method 3: A Dedicated Plugin (When It's Worth It)

Both methods above assume you're comfortable pasting a short CSS snippet. If that's not the case, or if you need features beyond a straight left-scroll – multiple ticker rows, RSS-fed content, click-to-pause controls with an actual visible button rather than a hover state – a small dedicated marquee/ticker plugin is a reasonable trade. The honest downside is the usual one: one more plugin to keep updated, and one more potential conflict source on the site. For a single scrolling announcement bar, the CSS-snippet route above covers the vast majority of real use cases without that overhead.

## Comparing the Three Methods

Here's the same three options laid out side by side, since the right choice depends less on which is "best" and more on where the bar needs to live and who's maintaining the site afterward.

| Method | Best For | Maintenance | Extra Plugin Needed |
| ------ | -------- | ----------- | ------------------- |
| Nexter Blocks custom code block | A bar that lives inside a specific page or post's content | Low – reusable block, edit once | No |
| Code Snippets Manager | A bar in the site header/footer template, sitewide | Low – one snippet, no child theme | No |
| Dedicated ticker plugin | Multiple ticker rows, RSS feeds, visible pause controls | Higher – another plugin to update | Yes |

![Diagram comparing three methods to build a scrolling announcement bar in WordPress](https://nexterwp.com/wp-content/uploads/2026/09/diag7-three-methods.jpg)Three ways to build the bar, ranked by where it needs to live and who maintains it.

For the single-message, temporary-promotion use case that covers most real requests – a sale deadline, a shipping notice, a launch countdown – either of the first two columns gets the job done with nothing extra to maintain. Reach for the plugin only when the requirement genuinely outgrows a CSS snippet.

## Three Mistakes That Show Up in the Wild

Most broken marquee implementations trace back to one of three things, all avoidable once you know to check for them.

- **Animating `left` or `margin-left` instead of `transform: translateX()`.** Both technically scroll the content, but animating position properties forces the browser to recalculate layout on every frame, which shows up as visible stutter on slower devices. Transform-based animation runs on the compositor and stays smooth.

- **Forgetting the duplicate content.** A marquee with only one copy of the text visibly snaps back to its starting position at the end of each loop. Duplicating the content once and animating exactly halfway across is what makes the loop read as continuous.

- **Skipping the reduced-motion query.** Covered in the next section, but worth repeating here: this is the single most common accessibility gap in hand-rolled marquee implementations, and it's a two-line fix.

## Accessibility: Don't Skip prefers-reduced-motion

A continuously scrolling element is exactly the kind of motion the `prefers-reduced-motion` media query exists for. Some visitors have this set at the operating-system level because motion triggers vestibular discomfort or is simply distracting, and a marquee that ignores that setting is a real accessibility miss, not a minor polish item. Wrap the animation in a media query so it's disabled for anyone who has asked their device to reduce motion:

`@media (prefers-reduced-motion: reduce) {
.announcement-track {
animation: none;
}
}`

This is a two-line addition to either method above, and it costs nothing in visual polish for the majority of visitors who haven't set the preference.

## Where a Scrolling Bar Helps (and Where It Doesn't)

A scrolling announcement bar earns its place for short-lived, single-message content: a sale deadline, a shipping delay notice, a launch countdown. It works because the message really is temporary and the motion draws a small amount of attention to something worth noticing right now. It stops working the moment it becomes permanent site furniture – a marquee that's been announcing the same "free shipping over $50" for eight months isn't urgent anymore, it's just something visitors have learned to ignore, and continuous motion at the top of every page is a real distraction for anyone trying to read the content below it. Treat it as a temporary tool you turn off, not a permanent header element.

A practical middle ground worth considering: build the bar once with either method above, but wrap it in a condition – a date range, or a simple toggle in the Code Snippets Manager – so it's trivial to switch off when the promotion ends rather than something you have to remember to go back and remove from a template. The technical cost of leaving it in place indefinitely is close to zero; the cost to the page's credibility is not.

## Suggested Reading

- [How to Add Scroll Animation in WordPress (3 Methods)](https://nexterwp.com/blog/how-to-add-scroll-animation-in-wordpress-site/)

- [WordPress Code Snippets Plugin vs Child Theme in Functions.php](https://nexterwp.com/blog/wordpress-code-snippets-plugin-vs-child-theme-in-functions-php/)

- [Nexter Blocks Smooth Scroll and Glassmorphism Effects](https://nexterwp.com/blog/nexter-blocks-smooth-scroll-glassmorphism/)

- [How to Add a Video Background Hero Section in WordPress](https://nexterwp.com/blog/video-background-hero-section-wordpress/)

### Is there really no marquee block in WordPress core or Nexter Blocks?

Correct, as of this writing. Neither WordPress core nor Nexter Blocks lists a block named "Marquee" or "Ticker." The old HTML `<marquee>` tag it's named after is deprecated and unsupported in modern HTML, so no current block editor treats it as a native block type. The CSS-animation approach in this guide is the standard modern replacement.

### Will a scrolling marquee hurt my page speed?

A CSS-transform animation like the one above is GPU-accelerated and lightweight – it doesn't meaningfully affect load time or Core Web Vitals on its own. What can hurt speed is a heavier third-party ticker plugin that loads its own JavaScript library; that's one more reason the CSS-only method is usually the better default.

### Can I make the marquee scroll vertically instead of horizontally?

Yes – swap `translateX` for `translateY` in the keyframes and set the container's overflow and flex-direction to column. It's the same underlying technique, just rotated.

### How do I make visitors able to pause the scroll?

The `animation-play-state: paused` rule on `:hover` shown above handles desktop, where a mouse naturally rests over the element. Touch devices don't have a hover state, so if a visible pause button matters for your use case, toggle a CSS class with a short JavaScript snippet instead:

`document.querySelector('.announcement-pause-btn')
.addEventListener('click', function () {
document.querySelector('.announcement-track')
.classList.toggle('is-paused');
});`

Pair that with a small `.is-paused { animation-play-state: paused; }` rule in your CSS, and both the button click and the desktop hover state can control the same animation without conflicting. This whole snippet, button included, can go through the same Code Snippets Manager workflow from Method 2 above.

### Should I use this for my main navigation menu?

No. A scrolling bar is for short, temporary announcements, not persistent navigation. Moving nav items forces visitors to wait for the link they want to scroll into view, which is a usability problem, not a feature. Keep navigation static and reserve the marquee pattern for promotional or time-sensitive content.

### Does this work the same way on mobile?

Yes – the CSS transform animation runs identically on mobile browsers, since it's a standard CSS feature rather than something dependent on desktop-only APIs. The one thing worth double-checking on a small screen is font size and line height inside the track; text that's comfortably readable scrolling past on a 1440px desktop viewport can feel cramped on a 375px phone screen, so it's worth previewing the bar at mobile width before shipping it.

#### Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress!

Subscribe