---
url: /documentation/concepts/elements/templates.md
description: >-
  Render WPCE elements through the wpce_render_{element_id} filter, which
  receives the editor instance and element data.
---

# Writing Element Templates

The WPCE is intentionally unopinionated about the tools you can use to render elements. Therefore it provides a very low-level way to generate element HTML: A WordPress filter. If needed, you can build your own abstractions on top of that.

An element's output can be created using the `wpce_render_{$element_id}` filter. The filter will be applied with the `$wpce` and `$element` parameters, which correspond to the rendering WPCE instance and the current element node.

The rendered elements' properties can be accessed via `$element->properties`:

```php
$element_id = 'my-element';

add_filter(
	"wpce_render_{$element_id}",
	fn ($wpce, $element) => <<<HTML
		<div class="my-element">{$element->properties->prop_name}</div>
		HTML,
	10,
	2
);
```

:::tip

1. Learn more about using filters in the [WordPress Developer Handbook](https://developer.wordpress.org/plugins/hooks/filters/).
2. Some basic templating patterns and helpers are documented in the [Cookbook](/cookbook/templating-tips).
   :::