Skip to content
GPLWP Guides

How to add custom content blocks in WordPress

Design & Layout Time About 20 minutes for a pattern, or several hours for a coded block 6 steps Updated 11 Sep 2026

DESIGN & LAYOUT
The short answer

You can add custom content blocks without code by combining WordPress blocks and saving the result as a pattern. If you need a genuinely new block with its own controls or dynamic output, you need development work or a block plugin.

The route
  1. 01Decide what kind of block you need
  2. 02Build the layout with core blocks
  3. 03Save the layout as a pattern
  4. 04Build a coded block when needed
  5. 05Check the front end and editor
  6. 06Use a block library for speed

What you need

  • WordPress with the block editor enabled
  • Administrator or editor access
  • A clear idea of the layout or block behaviour you need
  • A staging site for testing coded blocks

Decide what kind of block you need

Use existing blocks when you need a layout made from headings, images, buttons, columns, groups, lists, or media. Use a pattern when you want to save that layout for reuse. A genuinely new block is only necessary when you need custom controls, special output, dynamic data, or behaviour that core blocks cannot provide.

This distinction matters because a pattern stores a combination of existing blocks, while a custom block requires code and normally lives in a plugin so it remains available when you change themes.

Build the layout with core blocks

Edit the post or page and select the + button to insert blocks. Use Group, Row, Stack, or Columns blocks to control structure, then add the content blocks inside them. Set spacing, colours, typography, alignment, and image settings in the block toolbar and settings sidebar.

Keep the layout simple enough to edit on a phone. Deeply nested columns and fixed widths are common causes of cramped mobile layouts and hard-to-find settings.

Save the layout as a pattern

Select the finished block or group of blocks, open its three-dot menu, and choose Create pattern. Give it a useful name and choose whether it should be synced. An unsynced pattern creates a starting layout that can be changed independently each time; a synced pattern keeps the same content and updates wherever it is used. WordPress renamed reusable blocks as patterns and synced patterns in WordPress 6.3.

Manage saved patterns from Appearance > Editor > Patterns on block themes, or from the editor's pattern management area. If you cannot find the old Reusable blocks label, look under Patterns and My patterns instead.

Build a coded block when needed

For a new block type, use the official @wordpress/create-block tool to scaffold a plugin containing the PHP, JavaScript, CSS, and build files needed to register it. Develop it on a staging or local site, then build the project and install the resulting plugin on WordPress.

Keep a custom block in a plugin rather than only in the theme. Otherwise, changing the theme can remove the block from the editor or leave its content unavailable. This route also means maintaining code when WordPress, PHP, or other plugins change.

Check the front end and editor

Preview the page at desktop and mobile widths. Check buttons, links, images, spacing, headings, and keyboard focus. Also test the saved pattern on a new page rather than assuming the editor preview proves everything works.

Do not put a dynamic block such as a table of contents into a synced pattern without checking its behaviour. Dynamic blocks can depend on the surrounding post and may not produce the same result when reused. When moving patterns between sites, convert a synced pattern to regular blocks first or recreate it on the destination site, because a synced pattern stores a reference rather than all of its content.

Use a block library for speed

If you want ready-made layouts, sliders, galleries, testimonials, pricing tables, buttons, and reusable designs without building each one yourself, consider PublishPress Blocks Pro. It is designed for the Gutenberg editor and adds a library of blocks and patterns that can shorten the manual layout work.

The manual WordPress route is fine for a small number of simple layouts. A block library becomes more practical when you repeatedly build landing pages, need more layout choices, or want reusable designs without maintaining a custom block plugin.

The fast route

Let PublishPress Blocks Pro do it

A Gutenberg-first library of layouts, sliders, galleries, and reusable blocks for building pages without code.

Get PublishPress Blocks Pro

Questions

Can I add custom content blocks without a plugin?
Yes, you can create custom layouts from WordPress's built-in blocks and save them as patterns without installing a plugin. You only need a plugin or custom development when you want a new block type, custom controls, dynamic output, or behaviour that core blocks do not provide.
What is the difference between a pattern and a custom block?
A pattern is a saved arrangement of existing blocks, while a custom block is a separately registered block with its own code and controls. Patterns are the quicker choice for repeated layouts such as callouts, hero sections, and pricing rows; custom blocks are for functionality that cannot be assembled from core blocks.
Why did reusable blocks disappear from WordPress?
Reusable blocks were renamed to patterns, with the reusable behaviour now called a synced pattern. Use the block's three-dot menu and choose Create pattern, then enable Sync if edits should update every instance. Look under Patterns or My patterns when inserting the saved design.
Why does a synced pattern not work after copying it to another site?
A synced pattern can fail after being copied because the pasted content may reference a pattern that does not exist on the second site. Before moving it, convert the synced pattern to regular blocks if you want a standalone copy, or recreate and synchronise the pattern on the destination site.
Should custom blocks go in a theme or a plugin?
Custom blocks should normally go in a plugin so they remain available when the theme changes. A block stored only in a theme can disappear from the editor after a redesign, leaving existing content dependent on code that is no longer active.