Side Quest: I Accidentally Hacked My WordPress (On Purpose)

Once upon a Tuesday afternoon, I found myself muttering: “I should probably figure out how WordPress plugins work.” Fast forward an hour, and there I was, grinning like I’d just pulled a rabbit out of a PHP hat: “Wait… I made one!”

This post is for the tinkerers, the solo devs in sweatpants, the small business superheroes, and the curious educators who stare at the WordPress dashboard and wonder: “What if I broke it, but in a way that made it cooler?”

Act I: The Why (a.k.a. The Quest Begins)

I wanted rotating taglines on my site. Something playful. Something that whispered: “You’ve just stumbled into a secret clubhouse run by someone who explains AI with metaphors so vivid they should come with popcorn.”

But WordPress wasn’t having it. I tried dropping JavaScript into the editor — WordPress just looked at me like: “You can’t put that there, friend.”

So I did the only sensible thing.
I made a plugin.
And spoiler alert: It was glorious yet simple. Some may call it elegant.

Act II: Building The Skeleton (It’s Alive!)

All you need is a folder, a PHP file, and a magic spell at the top — known to mere mortals as “plugin header comments.”

<?php
/*
Plugin Name: Rotating Subheadline Shortcode
Description: Outputs a rotating AI subheadline with a little fade-in magic.
Version: 1.0
Author: Your Name (or your wizard name)
*/

Save that in a folder called rotating-subheadline, and name the file rotating-subheadline.php. Boom. WordPress now knows your plugin exists.

Act III: The Secret Sauce (a.k.a. The Shortcode)

Here’s where we toss in the secret special ingredients:

function rotating_subheadline_shortcode() {
    $taglines = [
        "AI moves fast. You’ll move faster.",
        "Complex AI. Simple metaphors. Real impact.",
        "The AI newsletter that explains why — not just what.",
        "Your AI-savvy friend who makes tech feel like coffee chat wisdom.",
    ];

    $taglines_json = json_encode($taglines);

    ob_start(); ?>
    <style>
      #rotating-subheadline {
        font-size: 1.4rem;
        font-style: italic;
        text-align: center;
        transition: opacity 1s ease;
        margin: 20px auto;
      }
    </style>
    <div id="rotating-subheadline">
      <?php echo $taglines[0]; ?>
    </div>
    <script>
      const subheadlines = <?php echo $taglines_json; ?>;
      let currentHeadline = subheadlines[0];
      function getRandomSubheadline() {
        let newHeadline;
        do {
          newHeadline = subheadlines[Math.floor(Math.random() * subheadlines.length)];
        } while (newHeadline === currentHeadline);
        currentHeadline = newHeadline;
        return newHeadline;
      }

      function rotateSubheadline() {
        const headline = document.getElementById("rotating-subheadline");
        headline.style.opacity = 0;
        setTimeout(() => {
          headline.innerText = getRandomSubheadline();
          headline.style.opacity = 1;
        }, 1000);
      }

      setInterval(rotateSubheadline, 60000);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('rotating_subheadline', 'rotating_subheadline_shortcode');

Now, every time you type [rotating_subheadline] into a post or page, it’s like flipping on fairy lights. The taglines show up and rotate like clockwork.

Act IV: The Moment of Triumph

Zip the folder.

1. Head to Plugins > Add New > Upload Plugin in your WordPress dashboard.

2. Upload. Install. Activate.

3. Drop [rotating_subheadline] anywhere you want to sprinkle a little magic.

Bonus Round: Add a Control Panel (Optional, but Very Wizard-Like)

If you’re feeling fancy, you can add an admin settings page later — a control tower for taglines and timing. (If you want that tutorial next, just holler.)

Curtain Call: You Can Absolutely Do This

I am not a full-time PHP wizard. I didn’t have a secret mentor. I just got curious, poked around, and decided: “What’s the worst that could happen?”

The result? A tiny plugin that makes my site feel alive.

And trust me — the satisfaction of clicking “Activate” and seeing your code in action? Chef’s kiss.

Coming soon: How I built a settings page without breaking the internet — or my brain!