👺Custom Template Mail

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

Step 1: Set Up MJML in your WordPress Theme

• 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
/*
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
/*
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:

<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.