Add A Scrolling Marquee Using PHP

Ever wondered how to get a scrolling marquee on your website? Well, now you can easily add it anywhere.

A scrolling marquee is a web design element that displays text or images moving continuously across the screen, usually horizontally from right to left or vice versa. It’s often used to catch a visitor’s attention by highlighting important announcements, breaking news, promotions, or key messages in a dynamic and eye-catching way.

Unlike static text, the movement of a marquee creates a sense of urgency or excitement, making it a popular choice for websites wanting to showcase timely information. When used thoughtfully, a scrolling marquee can add a lively, engaging element to your site without overwhelming visitors. Check out our scrolling marque on our homepage.

Code Snippet

Here’s the exact snippet we use on our websites:.

.scrolling-text{
–space: 2vw;
font-size: 2.5vw;
white-space: nowrap;
animation: marquee 10.5s infinite linear;
padding-left: var(–space);

&:after{
content: attr(data-text);
padding-left: var(–space);
}
}
@keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}

How to Set It Up

1. Build the Structure:
   • Within the element, add a section, then nest another section inside it (a section within a section).
   • Give it a background color.
   • We set our border to 2px and use your preferred color.
   • Add some text, we used: You Deserve Creativity Without Compromise! 🤝 and repeated it 12 times. This may more or less depending on how short or long your text is.
2. Add A Container Section:
   • Add some text, we used: You Deserve Creativity Without Compromise! 🤝 and repeated it a few times until you have 3 lines.

Where to Add This Code

Here are two easy options:

Option 1: Install WPCode Lite Plugin

This is by far the safest method and is beginner friendly if you’re not used to editing theme files.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install the plugin.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Scrolling Marquee.”
5. Paste the code above.
6. Choose “Run snippet everywhere”.
7. Choose PHP, not CSS or any other.
8. Save and activate.

✅ Done! Your readers can now read your content using a progress bar.

Option 2: Functions.php

We don’t advise this option unless you’re a developer or if you feel comfortable editing theme files:

1. Open your functions.php file.
2. Paste the snippet at the bottom.
3. Save and upload if needed.

💡 Tip: Always use a child theme to avoid losing changes when your theme updates.

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.