# Load Block Patterns From a Folder of HTML Files

> Registers every .html file in wp-content/patterns/ as a block pattern, using the file name as its title, so designers can add patterns by dropping in markup copied from the editor.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: patterns, block-editor, files
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/patterns-from-folder/

## Code

```php
// Folder with pattern files.
$wpide_pattern_dir = WP_CONTENT_DIR . '/patterns';

add_action( 'init', function () use ( $wpide_pattern_dir ) {
    $files = glob( trailingslashit( $wpide_pattern_dir ) . '*.html' );
    if ( ! $files ) {
        return;
    }

    register_block_pattern_category( 'wpide-site', array( 'label' => 'Site patterns' ) );

    foreach ( $files as $file ) {
        $slug    = sanitize_title( basename( $file, '.html' ) );
        $content = (string) file_get_contents( $file );
        if ( '' === trim( $content ) ) {
            continue;
        }
        register_block_pattern( 'wpide-site/' . $slug, array(
            'title'      => ucwords( str_replace( '-', ' ', $slug ) ),
            'content'    => $content,
            'categories' => array( 'wpide-site' ),
        ) );
    }
} );
```

## Notes

Copy blocks in the editor (Options > Copy), paste them into a file such as hero-banner.html, and it appears under "Site patterns" in the inserter.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Load Block Patterns From a Folder of HTML Files" 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/