# Block Pattern: Company History Timeline

> Adds a timeline pattern with a year column and a description column for each milestone, for About and history pages.

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

## 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' ) );
    }

    $milestones = array(
        '2014' => 'Founded in a small garage with two people and one big idea.',
        '2018' => 'Opened our first office and welcomed our 1,000th customer.',
        '2023' => 'Launched internationally and grew the team to 40 people.',
    );

    $rows = '';
    foreach ( $milestones as $year => $text ) {
        $rows .= '<!-- wp:columns --><div class="wp-block-columns"><!-- wp:column {"width":"25%"} --><div class="wp-block-column" style="flex-basis:25%"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">' . esc_html( $year ) . '</h3><!-- /wp:heading --></div><!-- /wp:column --><!-- wp:column {"width":"75%"} --><div class="wp-block-column" style="flex-basis:75%"><!-- wp:paragraph --><p>' . esc_html( $text ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column --></div><!-- /wp:columns -->';
    }

    register_block_pattern( 'wpide/history-timeline', array(
        'title'       => 'Timeline: company history',
        'description' => 'Milestones with a year and a description.',
        'categories'  => array( 'wpide-sections', 'about' ),
        'keywords'    => array( 'timeline', 'history', 'milestones' ),
        'content'     => '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:heading --><h2 class="wp-block-heading">Our journey</h2><!-- /wp:heading -->' . $rows . '</div><!-- /wp:group -->',
    ) );
} );
```

## Notes

Duplicate a row (Columns block) to add more milestones.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Block Pattern: Company History Timeline" 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/