# Block Pattern: "How It Works" in Three Steps

> Adds a pattern with a heading and three numbered steps in columns, a common section for service pages and onboarding.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: patterns, steps, services
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/pattern-how-it-works-steps/

## Code

```php
add_action( 'init', function () {
    if ( ! function_exists( 'register_block_pattern' ) ) {
        return;
    }

    if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'wpide-sections' ) ) {
        register_block_pattern_category( 'wpide-sections', array( 'label' => 'Site Sections' ) );
    }

    $steps = array(
        '1. Tell us what you need' => 'Fill in a short form or book a free 20-minute call.',
        '2. Get a clear proposal'   => 'You receive a fixed price and timeline within two days.',
        '3. We deliver'             => 'We keep you updated weekly until launch day.',
    );

    $columns = '';
    foreach ( $steps as $title => $text ) {
        $columns .= '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">' . esc_html( $title ) . '</h3><!-- /wp:heading --><!-- wp:paragraph --><p>' . esc_html( $text ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column -->';
    }

    register_block_pattern( 'wpide/how-it-works', array(
        'title'         => 'How it works: three steps',
        'description'   => 'Three numbered steps in columns.',
        'categories'    => array( 'wpide-sections' ),
        'keywords'      => array( 'steps', 'process', 'how it works' ),
        'viewportWidth' => 1200,
        'content'       => '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:heading --><h2 class="wp-block-heading">How it works</h2><!-- /wp:heading --><!-- wp:columns --><div class="wp-block-columns">' . $columns . '</div><!-- /wp:columns --></div><!-- /wp:group -->',
    ) );
} );
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Block Pattern: "How It Works" in Three Steps" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/