# How to create a custom template

{% hint style="info" %}
This section is intended for developers. Basic knowledge of PHP and CSS is required to customize default templates or create your own templates.

Refer to the "[ChatGTP Template Creator](https://ce-docs.keywordrush.com/custom-templates/chatgtp-template-creator)" documentation section for instructions on creating templates using ChatGPT.
{% endhint %}

Content Egg templates combine HTML layout with PHP code to display product data. [Bootstrap 5](https://getbootstrap.com/docs/5.3/getting-started/introduction/) is embedded in the plugin by default, so you can use any Bootstrap CSS classes to ensure a responsive and modern design.

### Steps to Create a Custom Template

1. **Starting Code:**

   * Your template must start with the following code:

   ```php
   <?php
   /*
    * Name: My template name
    * Modules:
    * Module Types: PRODUCT
    *
    */

   use ContentEgg\application\helpers\TemplateHelper;

   // This will include the Bootstrap 5 CSS file and the default plugin CSS file
   \ContentEgg\application\components\BlockTemplateManager::getInstance()->enqueueCeggStyle(true);

   ?>
   ```

   * Replace 'My template name' with the actual name of your template.
2. **Add a Div Container:**

   * Next, add the following div container:

   ```html
   <div class="cegg5-container">
   <!-- Inside this container, you can use Bootstrap 5 classes -->
   </div>
   ```
3. **Implement a Product Loop:**

   * Implement a loop to iterate through and display all products:

   ```php
   <?php foreach ($items as $key => $item) : ?>
   <!-- product data output here -->
   <?php endforeach; ?>
   ```
4. **Product Fields:**
   * The `$item` array contains the following product fields:
     * `unique_id`
     * `title`
     * `description`
     * `img`
     * `url`
     * `price`
     * `priceOld`
     * `currency`
     * `currencyCode`
     * `percentageSaved`
     * `manufacturer`
     * `rating`
     * `domain`
     * `merchant`
     * `logo`
     * `ean`
     * `images`
     * `subtitle`
     * `promo`
     * `shipping_cost`
     * `last_update`
5. **Output Product Data:**
   * To output product data, use the following snippets. Ensure to escape data output with the related WordPress functions.

**Product Title:**

```php
<?php echo esc_html($item['title']); ?>
```

**Product Affiliate URL:**

```php
<?php echo esc_url_raw($item['url']); ?>
```

**Product Image:**

```php
<?php echo esc_attr($item['img']); ?>
```

**Product Description:**

```php
<?php echo wp_kses_post($item['description']); ?>
```

**Product Price:**

```php
<?php echo esc_html(TemplateHelper::formatPriceCurrency($item['price'], $item['currencyCode'])); ?>
```

**Product Old Price:**

```php
<?php echo esc_html(TemplateHelper::formatPriceCurrency($item['priceOld'], $item['currencyCode'])); ?>
```

**Merchant Domain:**

```php
<?php echo esc_attr($item['domain']); ?>
```

**Merchant Logo URL:**

```php
<?php echo esc_attr(TemplateHelper::getMerchantLogoUrl($item, true)); ?>
```

**Merchant Small Icon URL:**

```php
<?php echo esc_attr(TemplateHelper::getMerchantIconUrl($item, true)); ?>
```

**Product Stock Status String:**

```php
<?php echo esc_html(TemplateHelper::getStockStatusStr($item)); ?>
```

**Product Last Update Date Timestamp:**

```php
<?php echo esc_html($item['last_update']); ?>
```

**Amazon Price Update Notice:**

```php
<?php TemplateHelper::priceUpdateAmazon($items); ?>
```

**Affiliate Disclaimer:**

```php
<?php TemplateHelper::disclaimer(); ?>
```

**Badge:**

```php
<?php TemplateHelper::badge2($item); ?>
```

**Read next:**

[how-to-install-a-custom-template](https://ce-docs.keywordrush.com/custom-templates/how-to-install-a-custom-template "mention")