Reusable components is something that WordPress lacks outside of Blocks. Celeste brings components to your templates and if you’ve used React or any other frontend framework before, they should feel familiar.

<Icon name="arrow-right" />

Creating Components

The simplest way to get started creating components is via Celeste’s WP CLI integration. If you’re using Local to develop, you should first check the setup guide to make sure your command line has database access.

To create a new component, run the following command

wp celeste add component

This will run you through a wizard, where you can select which files are created for you:

The available options are:

• Name The component name, should be PascalCase.
• Include a style.css file? Will create a stylesheet for you
• Include a main.js file? Will create a javascript file for you
• Include a component.php file? Will create a PHP file where you can manipulate component context and use WordPress hooks etc.

Component Structure

At their most basic, components require a Twig template inside a directory of their name:

views/
	components/
		Example/
			template.twig

They may also include some other files, which Celeste can use to make the development experience nicer, such as compiling CSS and JS for you.

views/
	components/
		Example/
			component.php
			main.js
			style.css
			template.twig