Modifying the HTML Output

Modifying the HTML Templates

Templates can be as complex or as simple as possible. There are just a few attributes that must be present in the section, row, and column templates.

Overriding The Default Templates

The HTML output files are located in the templates folder inside the Plato Pages plugin folder. To change the HTML, copy and paste the templates folder into the folder of your current theme and rename to plato.

Changing content-section.php

// Default template
<?php global $plato_global; ?> // required
/* 
   1. data-plato-section="section" is required in the parent container element.
   2. <?php echo apply_filters('plate_content_section_default_classes', $plato_global['class']); ?> can be placed in the parent container or as a child element.
      The default classes contain a class where all options hook onto for any section styling.
   3. data-plato-content="rows" is required for the plugin to know where to append the content-row.php template when editing.
   4. <?php echo do_shortcode($plato_global['content']); ?> is required for saved content to show.
*/
<section data-plato-section="section" class="<?php echo apply_filters('plate_content_section_default_classes', $plato_global['class']); ?>">
   <div class="container" data-plato-content="rows"> 
      <?php echo do_shortcode($plato_global['content']); ?>
   </div>
</section>

With That knowledge, we can safely change the HTML into something like the following

<?php global $plato_global; ?>
<div data-plato-section="section" data-plato-content="rows" class="<?php echo apply_filters('plate_content_section_default_classes', $plato_global['class']); ?> custom-class custom-class-2">
   <?php echo do_shortcode($plato_global['content']); ?>
   <div class="other-content">// whatever you want to add here. </div>
</div>

Changing content-row.php

<?php global $plato_global; ?> // required
/*
   1. data-plato-section="row"  is required in the parent container element. 
   2. data-plato-content="columns" is required for the plugin to know where to append the content-column.php template when editing.
   3. <?php echo apply_filters('plate_content_row_default_classes', $plato_global['class']); ?> can be placed in the parent container or as a child element.
      The default classes contain a class where all options hook onto for any row styling.
   4. <?php echo do_shortcode($plato_global['content']); ?> is required for saved content to show.
*/
<div data-plato-section="row" data-plato-content="columns" class="<?php echo apply_filters('plate_content_row_default_classes', $plato_global['class']); ?>">
   <?php echo do_shortcode($plato_global['content']); ?>
</div>

With That knowledge, we can safely change the HTML into something like the following

<?php global $plato_global; ?>
<div data-plato-section="row">
   <div data-plato-content="columns" class="<?php echo apply_filters('plate_content_row_default_classes', $plato_global['class']); ?> custom-row-class">
      <?php echo do_shortcode($plato_global['content']); ?> 
   </div>
</div>

Changing column-column.php

<?php global $plato_global; ?> // required
/*
   1. data-plato-section="column" is required in the parent container element. 
   2. <?php echo apply_filters('plate_content_column_default_classes', $plato_global['class']); ?>  can be placed in the parent container or as a child element. 
      The default classes contain a class where all options hook onto for any column styling.
   3. data-plato-content doesn't have a value. This is where the final content gets appended.
   4. <?php echo do_shortcode($plato_global['content']); ?> is required for saved content to show.
*/
<div data-plato-section="column" class="<?php echo apply_filters('plate_content_column_default_classes', $plato_global['class']); ?> col">
   <div data-plato-content class="column-content">
      <?php echo do_shortcode($plato_global['content']); ?>
   </div>
</div>

With That knowledge, we can safely change the HTML into something like the following

<div data-plato-section="column" data-plato-content class="<?php echo apply_filters('plate_content_column_default_classes', $plato_global['class']); ?>">
   <?php echo do_shortcode($plato_global['content']); ?>
</div>