Today, I want to walk you through a cool project I recently tackled: creating a custom WordPress plugin for my WritingOnCaffeine podcast. With the help of xAI’s Grok, I went from zero code to a fully functional plugin in a matter of hours—most of the code generated in minutes! But, as with any project, the real time was spent fine-tuning the details. Here’s how it all came together, step by step.
The Goal
I needed a WordPress plugin to showcase all the episodes of my WritingOnCaffeine podcast (see the final result here https://writingoncaffeine.com/episodes-archive/). The idea was simple: a custom page template that pulls every post from the “Podcast Episode” category, lists them from newest to oldest, groups them by year with headers, and includes titles, dates, and excerpts. Oh, and it had to look decent with some basic styling. Easy enough, right? Well, with Grok’s help, it was.
Step 1: Laying the Foundation
I started by asking Grok to help me write a WordPress plugin. My initial prompt was pretty straightforward: “Create a plugin with a custom page template that I can customize, register it with add_filter, and load it from the plugin directory when a specific page slug matches.” Within minutes, Grok spat out a solid starting point—a main plugin file (writingoncaffeine-franzone-podcast.php) and a template file (writingoncaffeine-franzone-template.php). The code checked for a page slug (podcast-episodes), loaded the template, and even registered it in the Page Attributes dropdown (NOTE: this is actually the part that threw an error when I loaded it, so I just removed that code because it wasn’t important to me).. It was like handing me a pre-built Lego set—add the pieces I wanted.
Step 2: Adding the Podcast Magic
Next, I told Grok what I wanted: “List all posts from the ‘Podcast Episode’ category, newest to oldest, grouped by year with H3 headers.” Again, in mere minutes, Grok updated the template file with a WP_Query to fetch the posts, a loop to group them by year, and basic HTML to display titles and dates. I could’ve stopped there, but I wanted excerpts too. Another quick prompt—“Add excerpts below each title”—and bam, Grok delivered. The code was clean, functional, and ready to roll.
Step 3: Styling It Up
A list without style is like coffee without caffeine—technically there, but not very appealing. I asked Grok to add a CSS file and enqueue it only when the custom template loads. It updated the plugin to include writingoncaffeine-franzone-styles.css and wired it up with wp_enqueue_style. It generated some rather basic CSS to style the list. The speed of this process was unreal—Grok was churning out production-ready code faster than I could brew my morning espresso.
Step 4: Personalizing the Names
Here’s where I slowed down a bit. The original code used generic names like “Custom Page Template Plugin.” Since this was for WritingOnCaffeine and my last name is Franzone, I asked Grok to rename everything accordingly. It updated the plugin to writingoncaffeine-podcast-plugin, the template to writingoncaffeine-franzone-template, and even tweaked the class names and CSS file. This took some back-and-forth to get just right—probably 20 minutes of tweaking—but it made the plugin feel like mine.
Step 5: Tweaking the HTML Layout
The default HTML layout was functional, but I wanted it to fit my vision. I spent a good chunk of time here—maybe an hour—playing with the template’s structure in writingoncaffeine-franzone-template.php. I adjusted the divs, tweaked the spacing, and made sure it played nice with my theme. Grok gave me a solid base, but this was where I got my hands dirty, tailoring it to suit my needs. It wasn’t hard, just time-consuming.
Step 6: Sharing with the World (and the README Saga)
I decided to publish this on GitHub (check it out at https://github.com/franzone/writingoncaffeine-podcast-plugin), so I asked Grok for a README file. It generated a Markdown file with sections for overview, installation, usage—everything you’d expect. But here’s where I burned the most time. The first version had some formatting hiccups, with text escaping the code block. After a quick fix, I still spent about 30 minutes tweaking it. I added my GitHub URL and made sure it explained everything clearly. The README modifications took longer than the coding!
The Takeaway
The core plugin—main file, template, and CSS—was generated by Grok in under 15 minutes. That’s the power of AI coding assistance. But the total project took a couple of hours because I spent time on:
- Tweaking the README: Since it is the face of the code (on Github), I wanted it to look right.
- Updating the HTML Layout: This didn’t take much time, but I wanted it to fit the layout of my existing site.
- Debugging the Plugin: The plugin activated fine right out of the gate. But, when I tried to create a new page, it barfed up an error. It took me a few minutes to track that down and correct it.
It’s amazing how fast Grok got me to a working plugin! I would have spent an afternoon (or evening) on this task before. With AI at this level, I can spend my time focusing on building great things and not fiddling with code.
If you’re into WordPress or podcasts, give it a spin! Fork it, tweak it, and make it yours. And if you’ve got thoughts on AI in coding, drop a comment—I’d love to hear your take.
Happy coding!