WordPress Plugin: Fade, Type, or Randomize Headlines or Text Easily with This Shortcode
I’ve always been bothered by how static most websites feel. You can have the best design and copy in the world, but when everything just sits there, the experience lacks energy. As a publisher, I wanted my headlines and CTAs to have a little life… to rotate, type, or fade dynamically without resorting to bulky plugins or complicated scripts. That’s exactly why I built the Dynamic Text Shortcode for WordPress. It’s a simple way to make your words move, breathe, and grab attention, while keeping your pages fast and clean.
The Frustration That Sparked It
If you’ve ever wanted to rotate a few key words in a headline—say, Reliable, Affordable, and Scalable —you’ve probably gone down one of two painful paths. You either:
- Install a page builder or animation plugin that adds unnecessary weight and scripts to your site, or
- Write your own JavaScript and CSS every single time you want the effect.
Neither is great. I wanted something that would work anywhere in WordPress, inside content, titles, widgets, even custom fields and still respect performance best practices. The result is a shortcode that does exactly that: lightweight, self-contained, and flexible.
What the Shortcode Actually Does
At its simplest, this plugin lets you write one line of shortcode that turns static text into something dynamic. You wrap your main word or phrase inside:
[dynamictext type="fade" alternate="Ideas||Solutions||Results"]Innovation[/dynamictext]That will start with Innovation and smoothly fade through Ideas, Solutions, and Results every few seconds.
Innovation
Or you can use the typing version:
[dynamictext type="typing" alternate="Reliable||Fast||Secure"]Efficient[/dynamictext]This creates a typing-and-deleting animation that feels natural and draws attention to the rotating words.
Efficient
If you’d rather just show a random version each time the page loads, there’s a random option too:
[dynamictext type="random" alternate="Affordable||Flexible||Powerful"]Scalable[/dynamictext]No extra setup, no scripts to load—everything runs inline.
Scalable
How It Works Behind the Scenes
Every instance of the shortcode generates a unique ID so multiple shortcodes can run independently on the same page. It automatically enqueues jQuery (if your theme doesn’t already use it), injects a few lines of CSS for fade and typing effects, and includes a tiny JavaScript block that handles the animation logic.
It also plays nicely with WordPress feeds—alternate text is hidden from RSS output, ensuring your feed readers and email syndication don’t get messy. And because it’s a shortcode, it’s processed anywhere WordPress runs the_content() or the_title(), which means it can even power dynamic post titles.
How to Install and Start Using It
<?php
/*
Plugin Name: Dynamic Text Shortcode
Description: A WordPress plugin that provides a shortcode to rotate text content with fade, random, or typing display options. Use [dynamictext type="fade" alternate="Text2||Text3||Text4"]Text1[/dynamictext] for fading text, [dynamictext type="random" alternate="Text2||Text3||Text4"]Text1[/dynamictext] for random selection, or [dynamictext type="typing" alternate="Text2||Text3||Text4"]Text1[/dynamictext] for typing effect. Supports any number of alternate texts. The primary text is always present in the initial output and replaced dynamically for fade/typing. Works in post/page content and titles. Alternate texts are hidden in RSS feeds.
Version: 1.0.0
Author: Douglas Karr
Author URI: https://dknewmedia.com
*/
// Prevent direct access to the file
if (!defined('ABSPATH')) {
exit;
}
// Enqueue jQuery
function dts_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'dts_enqueue_scripts');
// Shortcode function
function dts_dynamic_text_shortcode($atts, $content = null) {
// Default attributes
$atts = shortcode_atts(array(
'type' => 'random',
'alternate' => ''
), $atts, 'dynamictext');
// Primary text is the shortcode content
$primary_text = trim($content);
// Split alternate texts by delimiter
$alternate_texts = array_filter(array_map('trim', explode('||', $atts['alternate'])));
// Combine primary text with alternate texts
$items = array_merge(array($primary_text), $alternate_texts);
if (empty($primary_text)) {
return '';
}
// Generate unique ID for this shortcode instance
$unique_id = 'dts-' . uniqid();
// Handle different types
if ($atts['type'] === 'fade') {
// Output all items, primary text initially visible
$output = '<span id="' . esc_attr($unique_id) . '">';
foreach ($items as $index => $item) {
$output .= '<span class="dts-item"' . ($index === 0 ? '' : ' style="display:none;"') . '>' . esc_html($item) . '</span>';
}
$output .= '</span>';
// Add inline JavaScript for fade
$output .= '<script>
jQuery(document).ready(function() {
var container = jQuery("#' . esc_attr($unique_id) . '");
var items = container.find(".dts-item");
var currentIndex = 0;
function rotate() {
items.eq(currentIndex).fadeOut(500, function() {
currentIndex = (currentIndex + 1) % items.length;
items.eq(currentIndex).fadeIn(500);
});
}
if (items.length > 1) {
setInterval(rotate, 3000); // 3 seconds interval
}
});
</script>';
} elseif ($atts['type'] === 'typing') {
// Output container for typing effect, start with primary text
$output = '<span id="' . esc_attr($unique_id) . '"><span class="dts-typing">' . esc_html($primary_text) . '</span></span>';
// Convert items to JavaScript array
$items_json = json_encode($items);
// Add inline JavaScript for typing
$output .= '<script>
jQuery(document).ready(function() {
var container = jQuery("#' . esc_attr($unique_id) . ' .dts-typing");
var items = ' . $items_json . ';
var currentIndex = 0;
var currentChar = items[0].length;
var isDeleting = true;
function type() {
var fullText = items[currentIndex];
if (!isDeleting) {
if (currentChar < fullText.length) {
container.text(fullText.substring(0, currentChar + 1));
currentChar++;
setTimeout(type, 100); // Typing speed: 100ms per character
} else {
isDeleting = true;
setTimeout(type, 1000); // Pause before deleting
}
} else {
if (currentChar > 0) {
container.text(fullText.substring(0, currentChar - 1));
currentChar--;
setTimeout(type, 50); // Deleting speed: 50ms per character
} else {
isDeleting = false;
currentIndex = (currentIndex + 1) % items.length;
setTimeout(type, 500); // Pause before next text
}
}
}
if (items.length > 1) {
setTimeout(type, 1000); // Start with primary text, then begin cycling
}
});
</script>';
} else {
// Random type: select one item, including primary text
$output = '<span id="' . esc_attr($unique_id) . '">' . esc_html($items[array_rand($items)]) . '</span>';
}
return $output;
}
add_shortcode('dynamictext', 'dts_dynamic_text_shortcode');
// Filter to process shortcode in titles
function dts_filter_title($title) {
if (is_admin() || is_feed()) {
return $title;
}
return do_shortcode($title);
}
add_filter('the_title', 'dts_filter_title', 10, 1);
// Ensure primary text is shown in RSS feeds
function dts_filter_feed_content($content) {
return preg_replace_callback(
'/\[dynamictext[^]]*](.*?)\[\/dynamictext\]/',
function($matches) {
return esc_html($matches[1]);
},
$content
);
}
add_filter('the_content_feed', 'dts_filter_feed_content');
add_filter('the_excerpt_rss', 'dts_filter_feed_content');
?>- Copy the PHP code (the one shown above) into a new file called dynamic-text-shortcode.php.
- Add a folder to your /wp-content/plugins/ directory called dynamic-text-shortcode.
- Upload the PHP file into that directory.
- Go to your WordPress dashboard, open Plugins → Installed Plugins, and activate Dynamic Text Shortcode.
- Start using
in your posts, pages, or titles.
That’s it—no settings page, no database entries, no extra scripts. It’s intentionally minimal.
Why It’s Worth Trying
Sometimes, the smallest touches make the biggest difference. When a visitor sees a phrase gently fading, typing, or shifting, it creates micro-engagement—enough to hold their attention for another second, maybe two. And in marketing, those moments count.
The Dynamic Text Shortcode gives you that extra spark without any complexity. You don’t need to know JavaScript, and you don’t have to slow down your site. You just write your content the way you always have—and let the shortcode do the magic.
If you’ve been looking for a way to make your text feel alive without compromising speed or simplicity, give it a try. It’s free, fast, and built to work everywhere your words appear.
Related Martech Zone Content
