WordPress

Many high-traffic agencies and enterprise marketing teams rely on WordPress for content management while aiming for modern, high-end front-end interactions. Jolocky supports both Headless architectures and custom theme workflows.

Recommended Approach: Headless WordPress with Next.js#

The most robust and high-performing setup combines WordPress as a headless CMS with Next.js as the front-end application:

1. Use WordPress with WPGraphQL or the REST API for content editing and blog post storage.
2. Build your front-end using Next.js, React, and Tailwind CSS.
3. Install Jolocky sections, footers, and interactive blocks directly into the Next.js app using the standard CLI.

This approach gives your marketing team their familiar WordPress editing interface while giving your users fluid spring animations and instant page transitions.

Classic Theme and Gutenberg Integration#

If your project runs on a monolithic WordPress installation:

Enqueueing Tailwind CSS and Vanilla Motion#

You can compile Jolocky layouts into standard CSS and modern ES modules:

1. Bundle your Tailwind CSS tokens and classes into your theme style.css or compiled asset bundle.
2. Enqueue Lenis for smooth scrolling in your functions.php:

Copyfunction jolocky_enqueue_assets() {
    wp_enqueue_script('lenis', 'https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js', array(), null, true);
    wp_enqueue_style('jolocky-styles', get_template_directory_uri() . '/dist/main.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'jolocky_enqueue_assets');

Gutenberg Custom Blocks#

The upcoming Jolocky WordPress toolkit includes pre-configured block pattern registrations, allowing editors to insert kinetic hero sections and bento grids directly into the Block Editor with zero code.