The unofficial Inertia.js server-side adapter for WordPress.
This is a fork form BoxyBird (Andrew Rhyand) work https://github.com/boxybird/inertia-wordpress
It also includes code from Kucrut (Dzikri Aziz) work https://github.com/kucrut/vite-for-wp
It adds SSR support and requires PHP 8.2. See Changelog section for more information
Install the package via composer.
composer require web-id-fr/inertia-wordpress
Location: /wp-content/themes/your-theme/app.php
<!DOCTYPE html>
<html lang="fr">
<?php $inertia = WebID\Inertia\Inertia::get([
'id' => 'my_app',
'classes' => 'bg-blue-100 font-mono p-4'
]); ?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
<?php echo $inertia['head']; ?>
</head>
<body>
<?php echo $inertia['body']; ?>
<?php wp_footer(); ?>
</body>
</html>Available params for the get method:
id: The React app IDclassName:publicDirectory=> defaultpublicssrInputFile=> defaultbootstrap/ssr/ssr.jsvite_enabled: (bool) enable the vite build system. Defaulttruevite_input: defaultsrc/main.jsxvite_public_directory=> defaultweb/appvite_build_directory=> defaultjs/dist
Location: /wp-content/themes/your-theme/functions.php
By default the WordPress adapter will use the app.php from .../your-theme/app.php. If you would like to use a
different file name, you can change it. E.g. .../your-theme/layout.php.
<?php
add_action('init', function () {
Inertia::setRootView('layout.php');
});To handle SSR on your Inertia APP
- Generate a ssr file
vite build --outDir web/app/js/dist/ssr --ssr src/ssr.jsx - Run the node deamon
run:ssr": "node web/app/js/dist/ssr/ssr.js - If necessary, override the constant
INERTIA_SSR_URLwith the URL of the node file which is'http://127.0.0.1:13714/render'by default. - use the
Inertia::get()method as explained earlier
Location: /wp-content/themes/your-theme/index.php
<?php
use WebID\Inertia\Inertia;
global $wp_query;
Inertia::render('Index', [
'posts' => $wp_query->posts,
]);Location: /wp-content/themes/your-theme/index.php
This may look busy, however it can be thought of as a "Controller". It gives you a place to handle all your business logic. Leaving your JavaScript files easier to reason about.
<?php
use WebID\Inertia\Inertia;
global $wp_query;
// Build $posts array
$posts = array_map(function ($post) {
return [
'id' => $post->ID,
'title' => get_the_title($post->ID),
'link' => get_the_permalink($post->ID),
'image' => get_the_post_thumbnail_url($post->ID),
'content' => apply_filters('the_content', get_the_content(null, false, $post->ID)),
];
}, $wp_query->posts);
// Build $pagination array
$current_page = isset($wp_query->query['paged']) ? (int) $wp_query->query['paged'] : 1;
$prev_page = $current_page > 1 ? $current_page - 1 : false;
$next_page = $current_page + 1;
$pagination = [
'prev_page' => $prev_page,
'next_page' => $next_page,
'current_page' => $current_page,
'total_pages' => $wp_query->max_num_pages,
'total_posts' => (int) $wp_query->found_posts,
];
// Return Inertia view with data
Inertia::render('Posts/Index', [
'posts' => $posts,
'pagination' => $pagination,
]);Location: /wp-content/themes/your-theme/functions.php
add_action('init', function () {
// Synchronously using key/value
Inertia::share('site_name', get_bloginfo('name'));
// Synchronously using array
Inertia::share([
'primary_menu' => array_map(function ($menu_item) {
return [
'id' => $menu_item->ID,
'link' => $menu_item->url,
'name' => $menu_item->title,
];
}, wp_get_nav_menu_items('Primary Menu'))
]);
// Lazily using key/callback
Inertia::share('auth', function () {
if (is_user_logged_in()) {
return [
'user' => wp_get_current_user()
];
}
});
// Lazily on partial reloads
Inertia::share('auth', Inertia::lazy(function () {
if (is_user_logged_in()) {
return [
'user' => wp_get_current_user()
];
}
}));
// Multiple values
Inertia::share([
// Synchronously
'site' => [
'name' => get_bloginfo('name'),
'description'=> get_bloginfo('description'),
],
// Lazily
'auth' => function () {
if (is_user_logged_in()) {
return [
'user' => wp_get_current_user()
];
}
}
]);
});Location: /wp-content/themes/your-theme/functions.php
Optional, but helps with cache busting.
add_action('init', function () {
// If you're using Laravel Mix, you can
// use the mix-manifest.json for this.
$version = md5_file(get_stylesheet_directory() . '/mix-manifest.json');
Inertia::version($version);
});Init fork from https://github.com/boxybird/inertia-wordpress
Fix autoload file case
- SSR Support
- Requires PHP 8.2
- Publishes autoload files so it can go in plugins directory without running commands
- Includes Vite support from Kucrut plugin