Pro

WordPress

PreviousNext

How to use Jolocky footers with WordPress, either in a headless Next.js front end or mounted as a React component in a classic theme.

Jolocky items are React components. There is no Jolocky WordPress plugin, theme, or block pattern, but you can still use the footers on a site whose content is managed in WordPress.

Use WordPress as a headless CMS and build the front end in Next.js:

  1. Keep editing content in WordPress and expose it through the REST API or a GraphQL plugin such as WPGraphQL.
  2. Build the front end with Next.js and fetch your content from WordPress.
  3. Install Jolocky footers into the Next.js app with the shadcn CLI, as described in the Next.js guide.

Editors keep the WordPress admin they know, and the footer runs as a normal React component in your Next.js app.

Classic Themes

A classic WordPress theme renders PHP templates, not React, so a footer has to be bundled with React and mounted into the page yourself. In outline:

  1. Set up a small React build (for example with Vite) in your theme, and install the footer into it with the shadcn CLI or by copying its files (see Manual Installation).
  2. Mount the footer into an element in your theme's footer template:
src/main.tsx
import { createRoot } from "react-dom/client"
 
import { AuroraDriftFooter } from "./components/footers/aurora-drift"
 
const container = document.getElementById("site-footer")
 
if (container) {
  createRoot(container).render(<AuroraDriftFooter />)
}
  1. Add <div id="site-footer"></div> to footer.php, and load the built script with wp_enqueue_script in functions.php.

Each footer carries its own CSS, so you do not need to add a stylesheet for it.