Skip to content
Blocks Code

Theme Template

Theme Template output method lets you store block code in separate PHP files within your theme directory. This approach is perfect for version control and team development.

Theme template option in block builder

Template Structure

Place your block templates in the /blocks/ directory of your theme:

wp-content/themes/your-theme/
├── blocks/
   └── lazyblock-testimonial/
       ├── block.php     # Frontend & Editor template
       └── editor.php    # Editor-only template (optional)

Template files are first checked in the child theme, then in the parent theme.

Basic Template

blocks/lazyblock-testimonial/block.php
<?php
/**
 * Testimonial Block Template
 *
 * @var array  $attributes Block attributes
 * @var array  $block      Block data
 * @var string $context    Preview context [editor,frontend]
 */
 
// Ensure we have required data
if (!isset($attributes['author']) || !isset($attributes['content'])) {
    return;
}
?>
 
<div class="testimonial">
    <div class="testimonial-content">
        <?php echo wp_kses_post($attributes['content']); ?>
    </div>
 
    <footer class="testimonial-footer">
        <cite class="testimonial-author">
            <?php echo esc_html($attributes['author']); ?>
 
            <?php if (isset($attributes['role'])) : ?>
                <span class="testimonial-role">
                    <?php echo esc_html($attributes['role']); ?>
                </span>
            <?php endif; ?>
        </cite>
    </footer>
</div>

Editor-Specific Template

Create a separate template for the editor preview:

blocks/lazyblock-testimonial/editor.php
<?php
/**
 * Testimonial Block Editor Template
 *
 * @var array  $attributes Block attributes
 * @var array  $block      Block data
 * @var string $context    Preview context [editor,frontend]
 */
?>
 
<div class="testimonial is-preview">
    <?php if (!isset($attributes['author'])) : ?>
        <p class="components-notice">Add author name in block settings</p>
        <?php return; ?>
    <?php endif; ?>
 
    <div class="testimonial-content">
        <?php echo wp_kses_post($attributes['content']); ?>
    </div>
 
    <footer class="testimonial-footer">
        <cite class="testimonial-author">
            <?php echo esc_html($attributes['author']); ?>
        </cite>
    </footer>
</div>

File Naming

Block templates should match your block slug:

Block SlugTemplate Path
lazyblock/testimonial/blocks/lazyblock-testimonial/block.php
lazyblock/team-member/blocks/lazyblock-team-member/block.php
lazyblock/pricing/blocks/lazyblock-pricing/block.php

Using theme templates makes it easier to:

  • Maintain code in version control
  • Share blocks between projects
  • Work in team environments
  • Keep block logic organized

Was this article helpful?