jasalt / htmxpress-serverside-shortcode

WordPress HTMX integration example. Creating dynamic view partial using template shortcode. Enhances experience of writing WP plugin code the old-school way without touching React (Gutenberg).

Example shortcode for serverside rendering and interactivity using HTMXpress. Based on Htmx serverside block example.

Requires HTMXPress plugin being installed and active. After installing this plugin, include the shortcode in template using [htmx_shortcode].

Description

The htmx_shortcode_function function simply includes a template:

'render_callback' => function () {
        ob_start();
        load_template( __DIR__ . '/templates/random_posts.php' );
        return ob_get_clean();
},

The plugin's templates are registered with HTMXpress, this makes them available under the /htmx/ endpoint:

# register plugin's templates, which adds them to the /htmx endpoint.
add_filter( 'htmx.template_paths', static function ( $paths ) {
    $paths[] = __DIR__ . '/templates';
    return $paths;
} );

The templates/random_posts.php template contains a WP_Query to load 3 random posts and a button which refreshes only the posts:

echo '<button hx-post="/htmx/random_posts" hx-target="#random-posts"> More </button>';

Demo:

htmxpress-serverside-demo.mp4