Skip to content

svandragt/htmxpress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTMXpress

HTMX for WordPress!

By using the Rewrite Endpoints API to create a custom endpoint; and a bit of custom template logic, we can output a serverside partial or custom theme template.

Using this setup, WordPress can leverage HTML over the wire solutions such as HTMX.

HTMX then allows us to do dynamic serverside based rendering; live search and other features without the overhead and complexity of reactive JavaScript frameworks, whilst benefiting from trusted object and full page caching solutions. This repository is exploring the opportunities.

Demo

  1. Activate plugin (or run wp-env start to spin up a WP environment with the plugin activated).
  2. go to /htmx (Endpoint test)
  3. go to /htmx/ascii and /html/partial-ascii (template loader test)
  4. Inspect html source of theme (enqueued script test)
  5. go to /htmx/demo

What else can you do?

Screencast of Demo

Screen.Recording.2022-08-09.at.10.05.52.mov.mp4

Project use

  1. By default HTMX is loaded from an external CDN. While the CDN approach is extremely simple, you may want to consider not using CDNs in production: Download a minified copy of htmx and put it into the mytheme/third-party/ folder so WordPress can find it, updating the version number.
# mytheme/functions.php
const PRIORITY_AFTER_HTMX = 20;
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_script( 'htmx');
    wp_enqueue_script( 'htmx', trailingslashit( dirname( __FILE__ ) ) . 'third-party/htmx.min.js', '', '1.9.2' );
}, PRIORITY_AFTER_HTMX );
  1. Add your own templates to the htmx endpoint: Here's how to add to the template paths to point to your site's templates. The demo HTMXpress templates are only registered if the filter is unused:
# mytheme/functions.php
add_filter( 'htmx.template_paths', static function ( $paths ) {
	$paths[] = __DIR__ . '/templates';

	return $paths;
} );

# A template mytheme/templates/example.php will then be accessible from `/htmx/example`

See Also