> For the complete documentation index, see [llms.txt](https://madeindonesia.gitbook.io/mi-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://madeindonesia.gitbook.io/mi-guide/backend-things/custom-template-mail.md).

# Custom Template Mail

Only Read this doc can't make you as a master

Step 1: Set Up MJML in your WordPress Theme<br>

* Access your WordPress theme files either via FTP or the theme editor in the WordPress dashboard.
* Create a new folder called "mjml" inside your theme directory.
* Download the MJML framework from the official website (<https://mjml.io/>) and extract its contents.
* Copy the "mjml.min.js" and "mjml.js" files from the extracted folder into the "mjml" folder you created in your theme directory.

Step 2: Create a Custom Template Mail File

* Create a new PHP file in your theme directory and name it something like "custom-template-mail.php".
* Open the file and add the following code at the beginning:

```php
<?php
/*
Template Name: Custom Template Mail
*/
```

Step 3: Design Your Template Using MJML Syntax

* Within the "custom-template-mail.php" file, write your template using MJML syntax.
* You can use HTML and MJML tags to structure your email template.
* Remember to include the necessary MJML scripts to convert MJML code to HTML.

```php
<?php
/*
Template Name: Custom Template Mail
*/

get_header(); ?>

<!-- Your MJML code goes here -->

<?php get_footer(); ?>
```

Step 4: Convert MJML to HTML

* To convert MJML code to HTML, you need to use the MJML engine.
* Add the following code to your "custom-template-mail.php" file after your MJML code:

```php
<script src="<?php echo get_template_directory_uri(); ?>/mjml/mjml.min.js"></script>
<script>
  // Get the MJML code from the DOM
  var mjmlCode = document.querySelector('#your-mjml-container').innerHTML;

  // Convert MJML to HTML
  var htmlOutput = mjml.mjml2html(mjmlCode);

  // Inject the HTML into the DOM
  document.querySelector('#your-html-container').innerHTML = htmlOutput.html;
</script>

```

Step 5: Create a WordPress Page

* In the WordPress dashboard, create a new page and assign the "Custom Template Mail" template to it.
* Save the page and view it to see your custom template mail rendered in HTML.

Note: Remember to replace "your-mjml-container" and "your-html-container" with the appropriate IDs or classes of your MJML and HTML containers.