How to create a custom template

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" documentation section for instructions on creating templates using ChatGPT.

Content Egg templates combine HTML layout with PHP code to display product data. Bootstrap 5 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
   /*
    * 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:

   <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 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 echo esc_html($item['title']); ?>

Product Affiliate URL:

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

Product Image:

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

Product Description:

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

Product Price:

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

Product Old Price:

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

Merchant Domain:

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

Merchant Logo URL:

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

Merchant Small Icon URL:

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

Product Stock Status String:

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

Product Last Update Date Timestamp:

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

Amazon Price Update Notice:

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

Affiliate Disclaimer:

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

Badge:

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

Read next:

How to install a custom template