Starter Layout for New Pages: About Us
Offers an "About us" layout in the starter patterns window that opens when you create a new page, so editors start from a structure instead of a blank page.
Opens WPIDE on
Code
add_action( 'init', function () {
if ( ! function_exists( 'register_block_pattern' ) ) {
return;
}
$content = '<!-- wp:heading {"level":1} --><h1 class="wp-block-heading">About us</h1><!-- /wp:heading -->'
. '<!-- wp:paragraph --><p>Start with one or two sentences about who you are and who you help.</p><!-- /wp:paragraph -->'
. '<!-- wp:heading --><h2 class="wp-block-heading">Our story</h2><!-- /wp:heading -->'
. '<!-- wp:paragraph --><p>Tell how the business started, what problem you solve and what makes you different.</p><!-- /wp:paragraph -->'
. '<!-- wp:heading --><h2 class="wp-block-heading">What we believe</h2><!-- /wp:heading -->'
. '<!-- wp:list --><ul class="wp-block-list"><!-- wp:list-item --><li>A value that guides your work</li><!-- /wp:list-item --><!-- wp:list-item --><li>A promise to your customers</li><!-- /wp:list-item --><!-- wp:list-item --><li>Something you never compromise on</li><!-- /wp:list-item --></ul><!-- /wp:list -->'
. '<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/contact/">Get in touch</a></div><!-- /wp:button --></div><!-- /wp:buttons -->';
register_block_pattern( 'wpide/starter-about', array(
'title' => 'About us page',
'description' => 'Starter structure for an About page.',
'categories' => array( 'about' ),
'blockTypes' => array( 'core/post-content' ),
'postTypes' => array( 'page' ),
'content' => $content,
) );
} );
Notes
Starter layouts appear when creating a page; they need the starter patterns window to be enabled.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.