> For the complete documentation index, see [llms.txt](https://docs.wavecast.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wavecast.io/publishing/custom-headers/templating-language.md).

# Templating Language

When organizing an event, it is possible to use a pre-existing event header or designing a unique one that better fits your requirements. For a more tailored approach incorporating the Wavecast Dynamic Templating Language enables the creation of custom event headers that are dynamic and can be re-used. This guide outlines the steps to create a custom header using the Wavecast Templating Language.

## Creating a Custom HTML Header

**Step 1: Create the Event with a Custom HTML Header**

For the event Edit page, Navigate to Pages > Header and set the header to use Custom HTML.

**Step 2: Create the HTML Structure and Apply Styles**

Your HTML structure serves as the skeleton of your custom header. Here is a simple example that you can modify according to your preferences:

```html
<style>
.custom-event-header {
   padding: 30px 0;
}

.custom-event-header .container {
   position: relative;
}

.custom-event-header .container:before {
   content: " ";
   position: absolute;
   left: -30px;
   top: 0;
   bottom: 0;
   width: 4px;
   background-color: #E60000;
}
</style>

<div class="custom-event-header">
   <div class="container">
      <h1>Event Title</h1>
      <h3>Event Sub-Title</h3>
      <div><p>This is the event summary</p></div>
      <time>Apr 21st, 1pm BST</time> 
      <div><a href="">Add Event to Calendar</a></div>
      
      <a href="#">Register</a>
     
      <!-- If user subscribed for event display this copy -->
      <div>
         You are subscribed to this event
      </div>
   </div>
</div>
```

**Step 3: Incorporate the Wavecast Templating Language to make it dynamic**

To make the event header dynamic, you can use the Wavecast Templating Language. This allows you to insert placeholders that will be replaced with dynamic data, or the use of conditionals.

```html
<div class="custom-event-header">
   <div class="container">
      <h1>[event_title]</h1>
      <h3>[event_sub_title]</h3>
      <div>[event_summary]</div>
      <time>[event_date]</time> 
      <div>[event_add_to_calendar_link]</div>
      
      [sign_up_button]
        
      <div>
         [if is_user_subscribed]
               You are subscribed to this event
         [else]
            You are not subscribed to this event
         [/endif]
      </div>
   </div>
</div>
```

## Template tags available

### Variables

| Templating Tag                        | Description                                 |
| ------------------------------------- | ------------------------------------------- |
| `[page_sub_title]`                    | The subtitle of the current page.           |
| `[page_title]`                        | The title of the current page.              |
| `[event_add_to_calendar_link]`        | Link to add the event to a calendar.        |
| `[event_summary]`                     | Summary of the event.                       |
| `[event_sub_title]`                   | The subtitle of the event.                  |
| `[event_title]`                       | The title of the event.                     |
| `[parent_event_add_to_calendar_link]` | Link to add the parent event to a calendar. |
| `parent_event_summary]`               | Summary of the parent event.                |
| `[parent_event_sub_title]`            | The subtitle of the parent event.           |
| `[parent_event_title]`                | The title of the parent event.              |
| `[main_event_add_to_calendar_link]`   | Link to add the main event to a calendar.   |
| `[main_event_summary]`                | Summary of the main event.                  |
| `[main_event_sub_title]`              | The subtitle of the main event.             |
| `[main_event_title]`                  | The title of the main event.                |
| `[sign_up_button]`                    | The sign button for the event.              |

### Conditionals

````javascript
```
[if is_main_event]
    This content will show if 'is_main_event' is true.
[else]
    This content will show if 'is_main_event' is false.
[/endif]
```
````

````javascript
```php
[if content_type === 'article']
    This copy will show the current content type is 'article'.
[else]
    This copy will show the current content type is not 'article'.
[/endif]
```
````

````javascript
```
[if is_user_subscribed_to_main_event]
    User is subscribed to main_event
[else]
    User is not subscribed to the event
[/endif]
```
````

````javascript
```
[if is_user_subscribed_to_parent_event]
    User is subscribed to parent_event
[else]
    User is not subscribed to the parent_event
[/endif]
```
````

````javascript
```
[if is_user_subscribed]
    User is subscribed to event
[else]
    User is not subscribed to the event
[/endif]
```
````