Resource footer: WordPress Block Pattern

Make it yours.

Give visitors useful destinations and a clear contact route at the end of a page.

Free to use · Core blocks only · CC0 licence

Raw block markup

Select and copy the markup

<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#203e35","text":"#ffffff"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#ffffff;background-color:#203e35;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontSize":"25px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:25px">Form & Field</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example studio identity. Replace with your own short description.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Explore</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p><a href="https://example.com/work">Our work</a></p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/about">About the studio</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Get in touch</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p><a href="https://example.com/contact">Contact the studio</a></p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/privacy">Privacy information</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

What is included

group, columns, column, heading, paragraph

Validation

Structurally validated with the WordPress block parser; no live WordPress theme test. Checked September 28, 2026.

Licence

Copy, adapt and use commercially under CC0.

Use this layout in WordPress

Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.

Why the arrangement works

Identity and description appear first in reading order.
Links are grouped by purpose.

Customize the starting point

Replace the studio identity and every example URL.
Use the outer Group colors to match your site.
Save the blocks as part of your footer template part for shared site structure.

On smaller screens

Three columns stack. Keep repeated links short and verify line wrapping.

Accessibility checks

Footer headings have a logical hierarchy. Link contrast is supplied by the preview theme; set link colors in your theme if needed.

Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.

Read the official pattern instructions and RoarWP pattern guide for syncing and customization.

Use this layout in WordPress

Why the arrangement works

Customize the starting point

On smaller screens

Accessibility checks

Keep building from here.

How to change your WordPress header and footer

WordPress template parts: headers, footers and shared structure