Jonnie Grieve Digital Media: Blog

Blog: How I utilised AI to integrate a WordPress Custom Post Type into my latest design (More Posts)

In my latest WordPress Project that I’m building, I have a horizontal list of clickable elements that are category tags.

Each of these tags links to a WordPress category of posts as you can see here. https://christianity.jonniegrieve.co.uk/thoughts/

That sounds simple enough, but each post was designed to be separated by list item <li> elements of an unordered list. There was a design reason for this, and I kept the HTML markup.

But then the project became a WordPress one, as was always intended.

All these links go to pages that list posts in each assigned category. The child element <ul> in .bible---entry is the tricky part because the main text is assigned a child list item, and I don’t know how to handle this in a Custom Post Type (CPT).

<div class="bible---entry">
    <div class="categories">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

I have worked with CPTs on my own before; several times before. But when I’d written the markup for this theme, I realised I’d done something a bit complicated for the kind of post types I’d worked on previously.

So I did ask Cursor AI to work out a solution for me. I did use the words “advise me”. But ‘claude-4-sonnet-thinking‘ did more than advise.

advise me on what I need to do to set up a custom post type for the "thoughts" carousel. (js---theology--categories)

Consider the following TODOs in page-thoughts

TODO: A single bible---entry for each custom post
TODO: Custom field for entry categories
TODO: Custom field for entry title
TODO: Custom field for entry context
TODO: Custom field post---entry---meta

The child element UL in .bible---entry is the tricky part becuse the main text is assigned a child list item and i don't know how to handle this in a custom post type.

As you can see, I asked it to advise me on how best to go about creating a custom post type for the list of category links. I set it a list of TODOs that I’d left as comments on the template file and gave it some context for what I thought I was struggling with.

Now I’m not always clear on what claude-4-sonnet-thinking is going to do every time I ask it to do something. But on what it did for me, it was on point.

I watched it “thinking aloud”, laying out what it was thinking about, telling me what it was doing as it was doing so.

It looked at all the files in my project, not just the ones I specified. The functions file, the category templates I created and analysed all the code that it needed to do.

Sonnet enhanced the functions.php file to register the custom post type and taxonomy. So that’s where the bulk of the generated code went.

<?php
    function register_theology_thoughts_cpt() {
        $labels = array(
        // key value pairs
    );

    $args = array (
        // options as key value pairs
    );

    register_post_type('theology_thought', $args);
}

add_action('init', 'register_theology_thoughts_cpt');

There’s too much code for me to replicate in this post, but what we essentially have is an assemble of functions, scripts, and actions that build the post type and add it to the Admin area. And inside the new menu (“Thoughts” in the admin area it added menus and meta boxes for adding new thoughts.  A thought is subordinate to an “entry” which is a WordPress post based on a passage from the Bible or a Contemporary issue.

Then, a new file was created for me that handles the navigation of the categories and the category data, in one file taxonomy-theology_category.php). Replacing the hard-coded links

Custom Post Type: theology_thought
Custom Taxonomy: theology_category

Code that replaces the hardcoded category links I originally created. Automatically creates all your existing categories (History, Poetry, Prophets, etc.)

Custom Meta Boxes in the admin:
Context field: For the description/context of each thought
Individual Thoughts: Dynamic add/remove interface for the list items
Proper validation and sanitization

This is what helps make entry unique and thus solved my big problem. Each list item represents an individual sentence, paragraph or “thought”. It takes away the problem of managing an indeterminate number of list items for each entry by making them customisable with meta boxes. By simply making the container element an entry rather than a thought, and each list item in the container an individual thought. There’s space created in the admin area to help me separate the posts into their category links right in the custom post type rather than on the Core Post Type

In summary, the solution features…

• page-thoughts.php: Now displays all theology thoughts dynamically
• taxonomy-theology_category.php: Handles category archive pages
• Dynamic navigation that highlights current category. Well, theoretically. That was the one thing the AI didn’t actually manage to do.  Partly because it edited the CSS stylesheet directly rather than working with my SASS partial files.

Claude was a godsend as it always tends to be.  It gave me a solution to my problem, swiftly, cleanlesaly and almost flawlessly. It did something that would have taken me days to accomplish. It’s left up to me to study it and adapt it further to my own needs. But I’m delighted with the results.