# Custom Template Mail

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.


---

# 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://madeindonesia.gitbook.io/mi-guide/backend-things/custom-template-mail.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.