# 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](/custom-templates/chatgtp-template-creator.md)" 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](/custom-templates/how-to-install-a-custom-template.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ce-docs.keywordrush.com/custom-templates/how-to-create-a-custom-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.