JH Tech Services

Rebuilding My Site with Eleventy and AI

2026-03-15T00:00:00Z

My website had been on autopilot for a while. I'd been keeping up with WordPress core updates, but beyond that? Not much. I'd been heads-down working with a couple of marketing firms, building and maintaining sites for their clients — which meant my own site kept getting pushed to the back burner.

When I finally took a good look at it, a few things stood out. Some of the portfolio pieces were years old, and several of those projects we had already gone through redesigns since I posted them. The whole thing needed a refresh.

Why Not Just Stay on WordPress?

My first instinct was to rebuild in WordPress — it's what I do, it's my bread and butter, and I know it inside and out. When I ran the idea by Claude, sharing my Upwork history and LinkedIn experience, it came back with the same recommendation: stick with WordPress. Honestly, probably the smarter call for most people.

But I wanted a project where I could go deep with AI — building a complete website from scratch, end to end, and seeing what the experience was actually like. So I kept going.

Why Eleventy Made Sense

One thing that's become clear working with AI tools is where they shine and where they don't. Page builders like Elementor are a great example of where AI struggles — they're UI-driven, visual, full of drag-and-drop interactions that don't translate to text. AI can't really work in that environment, yet.

What AI does handle well is text files. Markdown, HTML templates, config files — that's its natural habitat. Eleventy works entirely in that world. You write templates and markdown, run a build, and out comes a static site. It's a perfect match.

I'd actually built an Eleventy site about a year and a half ago, before AI was anywhere near what it is now. Back then, I'd inherited a flat HTML site — no templating, nothing. Every page was its own standalone HTML file. Updating the header or footer meant touching every single file. It wasn't a huge project, but it was tedious enough that I converted the whole thing to Eleventy so we could work with real templates. That experience gave me a solid foundation for this one.

The Migration

This time around, with AI in the mix, things moved fast. Claude scaffolded the basic site structure — layouts, partials, config, everything — and I barely had to touch the code directly. Once the foundation was in place, I exported my WordPress content as a WXR XML file and Claude wrote a migration script to handle the rest.

The script parsed the XML, converted each post's HTML to Markdown, downloaded the referenced images, and generated a properly formatted markdown file for every post. I had around 180 posts, some going back almost 20 years — tutorials for software that doesn't even exist anymore, posts about tools that have long since been replaced.

Claude flagged this pretty quickly. It went through the post history and marked anything not directly related to WordPress as a draft, keeping those out of the public build while leaving them in the repo. It was a useful reality check — some of that old content probably does more harm than good sitting on a professional site.

Solving the Static Site Gaps

A fully static site does have some real limitations compared to a dynamic CMS. Two that came up immediately were forms and search.

For contact forms, we went with Web3Forms. It's a simple service — you POST to their API, they handle the email delivery. No server-side code required, works perfectly with a static site.

For search, Claude recommended Pagefind. It runs after the build and indexes all your content, generating a small set of files the browser can use to search locally. No backend, no API calls at runtime — it just works. I was skeptical at first, but it handles my volume of posts without any issues.

Was It Worth It?

Yeah, I think so. The site is faster, hosting is simpler, and the whole thing is easier to maintain going forward. Adding a new post is just writing a markdown file — no WordPress admin, no database, no plugin conflicts.

The AI-assisted workflow was the real surprise. What would have taken me several days of setup and wrangling on my own came together in a fraction of the time. We are not talking days here. It was a few hours. The migration script alone would have been a multi-hour task; instead it was a short conversation and a working script.

It's not a replacement for WordPress when clients need a full CMS, e-commerce, or complex backend functionality. But for a developer's personal site? Eleventy with AI assistance is a genuinely good stack.

I'm also building a wordpress plugin using Claude now. I'll write about that soon.

Using Vue.js to Create a UI Component for WordPress

2024-01-18T00:00:00Z

WordPress and Vue.js might seem like an odd pairing, but there are plenty of situations where you want a reactive UI component — a filterable list, a multi-step form, a dynamic pricing table — without rebuilding the whole site as a headless app.

Here's the pragmatic approach: use Vue from a CDN and mount it on a specific element in your page template.

The Setup

No build step needed for simple components. Add Vue via CDN in your template or via wp_enqueue_scripts:

function enqueue_vue() {
    wp_enqueue_script(
        'vue',
        'https://unpkg.com/vue@3/dist/vue.global.prod.js',
        array(),
        '3',
        true
    );
    wp_enqueue_script(
        'my-component',
        get_template_directory_uri() . '/js/service-filter.js',
        array( 'vue' ),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_vue' );

A Simple Filterable List

Say you have a list of services pulled from a custom post type, and you want the user to be able to filter by category without a page reload.

In your PHP template, render the data as a JSON variable:

<div id="service-filter-app" data-services="<?php echo esc_attr( json_encode( $services_data ) ); ?>">
</div>

Then in service-filter.js:

const { createApp, ref, computed } = Vue;

createApp({
    setup() {
        const el = document.getElementById('service-filter-app');
        const services = ref(JSON.parse(el.dataset.services));
        const activeFilter = ref('all');

        const filtered = computed(() => {
            if (activeFilter.value === 'all') return services.value;
            return services.value.filter(s => s.category === activeFilter.value);
        });

        return { services, activeFilter, filtered };
    },
    template: `
        <div>
            <div class="filters">
                <button @click="activeFilter = 'all'" :class="{ active: activeFilter === 'all' }">All</button>
            </div>
            <ul>
                <li v-for="service in filtered" :key="service.id">
                    {{ service.title }}
                </li>
            </ul>
        </div>
    `
}).mount('#service-filter-app');

When to Use This Pattern

This CDN + inline approach works well for:

Single interactive components on a mostly static page
Client projects where you don't control the build environment
Adding reactivity to an existing theme without breaking anything

For more complex applications with multiple components, routing, or state management, a proper build step with Vite is worth the setup cost.

This post is a placeholder — full content coming soon.

ACF Blocks – Gutenberg Blocks the Easy Way

2023-11-02T00:00:00Z

Building custom Gutenberg blocks from scratch means diving into React, the block API, block.json, and a build process. For most WordPress projects, that's overkill — especially when you just need a testimonial card, a callout box, or a team member grid.

ACF Blocks lets you define blocks with PHP and render them with a template file, no JavaScript build step required.

What You Need

ACF Pro (the free version doesn't include Blocks)
WordPress 5.0+
A child theme or custom plugin to house your code

Registering a Block

You register ACF Blocks inside acf_init:

add_action( 'acf/init', 'register_acf_blocks' );

function register_acf_blocks() {
    acf_register_block_type( array(
        'name'              => 'testimonial',
        'title'             => __( 'Testimonial' ),
        'description'       => __( 'A customer testimonial block.' ),
        'render_template'   => 'blocks/testimonial.php',
        'category'          => 'formatting',
        'icon'              => 'admin-comments',
        'keywords'          => array( 'testimonial', 'quote' ),
        'supports'          => array( 'align' => false ),
    ) );
}

Creating the Field Group

In the ACF UI, create a field group and set the location rule to Block → is equal to → Testimonial. Add whatever fields you need — a quote textarea, author name, author title, star rating.

The Render Template

Create blocks/testimonial.php in your theme:

<?php
$quote  = get_field( 'quote' );
$author = get_field( 'author_name' );
$title  = get_field( 'author_title' );
?>
<blockquote class="testimonial">
    <p><?php echo esc_html( $quote ); ?></p>
    <footer>
        <strong><?php echo esc_html( $author ); ?></strong>
        <?php if ( $title ) : ?>
            <span><?php echo esc_html( $title ); ?></span>
        <?php endif; ?>
    </footer>
</blockquote>

Preview Mode

ACF Blocks support a preview mode that renders your template in the editor. You can detect it with:

if ( isset( $is_preview ) && $is_preview ) {
    // Render a static preview image or simplified markup
}

Why This Approach Works

For agencies and freelancers, ACF Blocks hit a sweet spot: clients get a native Gutenberg editing experience, developers get a familiar PHP template workflow, and you avoid the maintenance overhead of a full JavaScript block plugin.

This post is a placeholder — full content coming soon.

Adding Custom Checkout Fields to WooCommerce Checkout

2023-09-15T00:00:00Z

WooCommerce gives you a powerful checkout experience out of the box, but sooner or later you'll need a field that isn't there by default — a delivery note, a company tax ID, or a custom product option that follows the order through to fulfillment.

The good news: WooCommerce has hooks for exactly this, and you don't need a plugin to make it happen.

The Three Hooks You Need

Adding a custom checkout field in WooCommerce involves three steps:

Display the field — woocommerce_after_order_notes (or another position hook)
Validate the field — woocommerce_checkout_process
Save the field — woocommerce_checkout_update_order_meta

Displaying the Field

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {
    woocommerce_form_field( 'delivery_note', array(
        'type'        => 'textarea',
        'class'       => array( 'form-row-wide' ),
        'label'       => __( 'Delivery Note', 'woocommerce' ),
        'placeholder' => __( 'Any special delivery instructions?', 'woocommerce' ),
        'required'    => false,
    ), $checkout->get_value( 'delivery_note' ) );
}

Saving the Field

add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['delivery_note'] ) ) {
        update_post_meta( $order_id, '_delivery_note', sanitize_textarea_field( $_POST['delivery_note'] ) );
    }
}

Displaying It in the Admin Order View

Once saved, you'll want to surface this in the order admin screen:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta( $order ) {
    $note = get_post_meta( $order->get_id(), '_delivery_note', true );
    if ( $note ) {
        echo '<p><strong>' . __( 'Delivery Note' ) . ':</strong> ' . esc_html( $note ) . '</p>';
    }
}

Wrapping Up

This pattern covers the majority of custom checkout field use cases. For more complex scenarios — conditional fields, fields tied to specific products, or fields that affect shipping — the same hooks apply, just with extra conditional logic layered in.

This post is a placeholder — full content coming soon.

Using columns and flex to make a grid in Elementor

2022-03-09T00:00:00Z

/* add class 'pt-service-grid' to elementor section in each column add an inner-section widget to place your other widgets.  If you don't plan on adding background and such, you could skip the inner-section but these rules' selectors will need to be changed */
/* keep the inner-section widget 100% height */
.pt-service-grid .elementor-inner-section,
.pt-service-grid .elementor-inner-section > .elementor-container {
	height:100%;
}
/* next two rules will make the first child, heading, expand so rest of elements are pushed down.  If a heading in another inner section wraps, then all other headings in the same row will expand as well and center itself*/
.pt-service-grid .elementor-inner-section > .elementor-container .elementor-widget-wrap {
	flex-flow: column nowrap;
}

.pt-service-grid .elementor-inner-section > .elementor-container .elementor-widget-wrap > div:first-child {
	flex:1; /* expand/grow if needed*/
	display: flex;
	justify-content:center;
	align-items: center;
}

/* Add as many columns in the elementor section as needed */
@media screen and (min-width: 416px) {

.pt-service-grid > .elementor-container {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: row wrap;
}

.pt-service-grid > .elementor-container > .elementor-column {
	flex: 1;
	width: 406px;
	min-width: 406px;
	max-width: 406px;
}
	
}

Take over the 'submit' event in the Elementor Search form

2021-12-12T00:00:00Z

I could not get my javascript code to submit an get request using ajax in Elementor. I figured out that my search form was in a popup and not in the DOM until the popup was active. So when trying to attach and add the submit event, it never worked.

I'm sure there is another way but the quickest solutions I found was to use the jQuery 'on' function with delegation. So instead of attaching to the submit event directly like this:

$('form.elementor-search-form').on('submit', function {
   //do my stuff here
 });

I did the following:

$('body').on('submit', 'form.elementor-search-form', function(e) {
     //do my stuff here
  });

Menu items bold on hover without shifting

2021-12-03T00:00:00Z

When the menu item becomes bold it changes the width of the menu item causing it to shift. This trick makes the menu item already the size of the bolded text so it won't shift.

This uses a filter to create an attribute called 'gtitle' on each menu item that contains the same text as the menu item. We can then create a pseudo element (::before) on the menu-item that is bold but invisible. This will make the width of the element the size we want.

//* add title attribute to <a> in menu to allow for bold font without changing the size of a

add_filter( 'nav_menu_link_attributes', 'gtl_add_title_attrib_to_nav', 10, 2 );
function gtl_add_title_attrib_to_nav($attr, $item) {
	$attr['gtitle'] = $item->title;
	return $attr;
}

And for styling

// Probably want this selector to be more specific to the menu you want to affect 

.menu-item a:before {
      display: block;
      content: attr(gtitle);
      font-weight: bold;
      height: 1px;
      color: transparent;
      overflow: hidden;
      visibility: hidden;
    }

I was doing this in Elementor which sets the anchor of a menu item with 'display: flex;' This causes the ::before pseudo element along with the text in the anchor to go side by side instead of the ::before element right under and increasing the width of the anchor correctly. I didn't need the submenu icons so this css was also needed for this trick to work


// Probably want this selector to be more specific to the menu you want to affect

.menu-item a {
	display: block; 
}

Adding tooltip to Woocommerce Variant photos

2021-01-27T00:00:00Z

<script>
jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a img').attr('title');
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+') img').attr('title', imgtitles[i]);
    }
}
}});

</script>

Javascript to parse Shopify CSV file and combine line item fields for import into Woocommerce.

2021-01-09T00:00:00Z

We are moving a client from Shopify to Woocommerce and using the WordPress WP-All-Import plugin to easily move the data to Woocommerce. In this article we are importing the orders. We've already imported the customers and products which should be done first so orders can be linked to customers and products. The order export csv file from Shopify puts each line item of an order on a separate line. For importing we want each order on a single line and all line items in a single field separated by a pipe, '|'. So our program will parse in the csv file convert each line to an object and store into an array. We create a newLine holder to hold a line of data to export and orderNum which monitors what order number we are on.

Here's the program using node.js

const csv = require('csvtojson');
const csvWriter = require('csv-write-stream');
const fs = require('fs');



const orders = [];
const weights = [];

    let getProducts = 
    csv()
        .fromFile('ordersFromShopify.csv')
        .then((jsonObj) => {

            jsonObj.forEach(function (item) {
          
                orders.push(item);
              
            })
        });
        
        
Promise.all([getProducts]).then(() => {
        

    const newOrders = [];
    const writerExport = csvWriter({
    })
        
    writerExport.pipe(fs.createWriteStream('neworders.csv'))
    let orderNum = '';
    let newLine = {};
    
    for (const line of orders) {
        if (line['Name'] !== orderNum) {
            if (typeof (newLine['Name']) !== 'undefined') {
                writerExport.write(newLine);
            }
            newLine = Object.assign({}, line)
            orderNum = line['Name'];
        } else {
            newLine['Lineitem price'] = newLine['Lineitem price'] + '|' + line['Lineitem price']
            newLine['Lineitem name'] = newLine['Lineitem name'] + '|' + line['Lineitem name']
            newLine['Lineitem quantity'] = newLine['Lineitem quantity'] + '|' + line['Lineitem quantity']
            newLine['Lineitem sku'] = newLine['Lineitem sku'] + '|' + line['Lineitem sku']
            newLine['Lineitem fulfillment status'] = newLine['Lineitem fulfillment status'] + '|' + line['Lineitem fulfillment status']

        }
    }
    writerExport.write(newLine);
});

The first line of the shopify order export csv file are the field names:

Name,Email,Financial Status,Paid at,Fulfillment Status,Fulfilled at,Accepts Marketing,Currency,Subtotal,Shipping,Taxes,Total,Discount Code,Discount Amount,Shipping Method,Created at,Lineitem quantity,Lineitem name,Lineitem price,Lineitem compare at price,Lineitem sku,Lineitem requires shipping,Lineitem taxable,Lineitem fulfillment status,Billing Name,Billing Street,Billing Address1,Billing Address2,Billing Company,Billing City,Billing Zip,Billing Province,Billing Country,Billing Phone,Shipping Name,Shipping Street,Shipping Address1,Shipping Address2,Shipping Company,Shipping City,Shipping Zip,Shipping Province,Shipping Country,Shipping Phone,Notes,Note Attributes,Cancelled at,Payment Method,Payment Reference,Refunded Amount,Vendor,Id,Tags,Risk Level,Source,Lineitem discount,Tax 1 Name,Tax 1 Value,Tax 2 Name,Tax 2 Value,Tax 3 Name,Tax 3 Value,Tax 4 Name,Tax 4 Value,Tax 5 Name,Tax 5 Value,Phone,Receipt Number,Duties

ACF Blocks - Gutenberg blocks the easy way

2019-11-14T00:00:00Z

Just a quick posting that is long overdue. We've successfully used the Advanced Custom Field plugin to create Gutenberg blocks for a project to a client. This has made it so much easier for the client to customize their pages with the design elements they wanted. Each design element becomes a block.

The client was extremely happy with the results.

We created a git repo with a bare bones version to use when we start the next project. You can view it here.

We kept all the css and styling in the theme files for the blocks.