How to Create a Custom WordPress Block (Easy Way)

How to Create a Custom Gutenberg Block in WordPress (2024 Guide)

Looking to add custom content blocks to the WordPress block editor? While the default blocks provided by WordPress and various plugins cover many common use cases, sometimes you need something more tailored to your specific needs. That‘s where creating your own custom Gutenberg block comes in handy.

In this in-depth guide, we‘ll walk you through exactly how to make a custom block in WordPress, step by step. Whether you‘re a coding beginner or an experienced developer, you‘ll learn multiple methods for building the perfect block to suit your site.

Why Create a Custom WordPress Block?

The WordPress block editor (aka Gutenberg) allows you to create content using individual "blocks" for text, images, buttons, and tons of other elements. It‘s a flexible, visual way to build pages and posts.

WordPress comes with a set of basic blocks out of the box, and many popular plugins add their own blocks too. WooCommerce, for instance, provides blocks for displaying products and checkout forms. Recipe plugins often include blocks for ingredients and instructions.

However, relying solely on the blocks provided by WordPress and plugins does have limitations:

• The blocks might not have the exact features or styling options you need
• Using blocks from many different plugins can slow down your site and cause conflicts
• You‘re dependent on plugin developers to maintain compatibility and add new features

By creating your own custom WordPress block, you can:

• Add unique functionality not available in existing blocks
• Simplify content creation with blocks tailored to your workflow
• Maintain complete control over the features and appearance
• Improve performance by only loading necessary code
• Future-proof your site against plugin updates or incompatibilities

Two Ways to Create a Custom Block

There are two main approaches to building a custom Gutenberg block:

1. Using a plugin like WPCode or Genesis Custom Blocks. This is the easiest method, requiring little to no coding knowledge.

2. Manually coding the block using HTML, CSS, and JavaScript. This gives you complete flexibility but does require more technical skills.

We‘ll cover both methods in detail below. Feel free to click the quick links to jump to the tutorial for your preferred technique:

• Method 1: Create Custom Blocks with WPCode (No Coding)
• Method 2: Create Custom Blocks by Coding from Scratch
• Bonus: Create Custom Post Templates

Method 1: Create Custom Blocks with WPCode (No Coding)

By far the simplest way for beginners to create custom blocks is by using a plugin. Our top recommendation is WPCode, a powerful toolkit for adding custom code snippets to WordPress.

One of WPCode‘s most handy features is its no-code block builder. This lets you create custom blocks visually, with no coding required. It‘s an excellent solution for users who aren‘t developers but still want custom blocks for their specific needs.

Here‘s how to create a custom block using WPCode:

Step 1: Install and Activate WPCode

First, purchase the WPCode plugin and install it on your WordPress site. If you need help, see our guide on how to install a WordPress plugin.

Step 2: Create a New Code Snippet

In your WordPress dashboard, go to Code Snippets > Add Snippet. Click the "Use Snippet" button to create a new snippet.

Give your snippet a title related to the block you‘re creating, like "Testimonial Block." Then select "Blocks Snippet" for the Code Type. This will display additional block settings.

Step 3: Build Your Custom Block

In the Block Code area, click the "Edit with Block Editor" button. This will open a familiar Gutenberg-style interface where you can visually build your custom block.

For this example, let‘s create a testimonial block with fields for an image, name, and quote. Here‘s how:

• Click the + button to open the block inserter
• Search for and insert an Image block, then a Heading block and a Paragraph block
• In the block settings sidebar, give each block an intuitive title like "Testimonial Image," "Testimonial Name," etc.
• Use the block toolbar and settings to adjust the appearance as desired

Feel free to add any other blocks you want to include, like star ratings, a background color, etc. You can reorder blocks by dragging and dropping.

When you‘re happy with your custom block, click "Update" to save it. Then click the "Return to WPCode Snippet" button.

Step 4: Configure Your Block Settings

Back on the Edit Snippet screen, you have additional options to customize your block under "Block Settings":

• Name: The name of your block as it will appear in the block inserter.
• Description: A short description of your block‘s purpose.
• Keywords: Words or phrases to help find your block when searching the inserter.
• Category: The block category your custom block should appear under (e.g. text, media, design).
• Icon: An icon to represent your block in the inserter.

Under "Editor Preview," you can enter sample content to use when previewing the block.

Step 5: Set Block Visibility Conditions

By default, your custom block will appear in the block inserter throughout your site. If you want to limit where the block is available, you can set visibility conditions under "Conditional Logic."

For example, you could choose to only show the testimonial block on pages with a certain slug, or only to logged-in users with the Editor role. Simply toggle on the conditions you want to use.

Step 6: Publish Your Block

When you‘re ready, click the "Activate" toggle at the top of the page to publish your custom block. It will now appear in the block inserter when editing posts or pages!

To use your custom block, simply open the post/page editor and look for the block in the inserter under the category you specified. You can also find it by searching for the block name or keywords.

Click the block to insert it into your content. You‘ll see the fields you added, where you can enter the actual testimonial content to display on the front end.

And that‘s it! You can repeat these steps to create as many custom blocks as you need. WPCode makes it easy to build blocks for all sorts of use cases, with no coding skills required.

Method 2: Create Custom Blocks by Coding from Scratch

If you‘re comfortable with web development, you can create custom WordPress blocks by writing the code yourself. This involves creating a plugin that registers and renders the block on the front and back end.

Here‘s a high-level overview of the steps:

1. Create a new plugin folder in /wp-content/plugins/ with a name like my-custom-block.

2. Inside that folder, create a new PHP file for your plugin, like my-custom-block.php. Add the required plugin headers at the top.

3. Register your custom block with the Block Editor using the register_block_type() function. Pass in the name of your block and an array of arguments.

4. Create an edit() function that renders the interface for your block in the editor. This is where you define the block fields, toolbar controls, inspector settings, etc.

5. Create a save() function that renders the content of your block for display on the front end. This converts the structured data from the block fields into the actual HTML markup.

6. Enqueue any CSS and JavaScript files needed for your block using wp_enqueue_script() and wp_enqueue_style().

7. Add additional functionality to your block as needed, like custom REST API endpoints, block patterns, etc.

8. Test your custom block thoroughly to make sure it looks and functions as intended in the editor and on the front end.

Here is a basic example of the PHP code needed to register a custom block:

function my_custom_block_init() {
    register_block_type( __DIR__ . ‘/build‘, array(
        ‘render_callback‘ => ‘my_custom_block_render‘,
    ) );
}
add_action( ‘init‘, ‘my_custom_block_init‘ );

function my_custom_block_render( $attributes, $content ) {
    return ‘<div class="my-custom-block">‘ . $content . ‘</div>‘;
}

And here‘s a simplified version of the corresponding block.json file:

{
    "name": "my-plugin/my-custom-block",
    "title": "My Custom Block",
    "category": "widgets",
    "icon": "smiley",
    "description": "A custom block created by me!",
    "keywords": ["custom", "block"],
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css"
}

Of course, this just scratches the surface of what‘s possible with custom blocks. You‘ll need a solid foundation in React, JavaScript, and the WordPress Block Editor API to build anything super advanced.

If you want to dive deeper into block development, here are some helpful resources to get started:

• The official WordPress Block Editor Handbook
• Gutenberg.how, a collection of tips for working with blocks
• The create-guten-block toolkit for scaffolding block plugins

Bonus: Create Custom Post Templates

In addition to creating individual custom blocks, you can also build entire custom templates for your WordPress posts and pages.

A post template is a predefined layout and set of blocks that speeds up content creation. Instead of adding blocks from scratch each time, authors can start with a template and customize from there.

The easiest way to create custom post templates is with a Gutenberg-compatible page builder plugin like SeedProd. SeedProd lets you visually design templates with its drag-and-drop editor, no coding needed.

To use SeedProd:

1. Install and activate the plugin on your site.

2. Go to SeedProd > Templates and click "Add New Template."

3. Choose the "Single Post" template type.

4. Select a premade template or start with a blank canvas.

5. Use the visual editor to customize your template with blocks, sections, and styling options.

6. Publish your template and choose which posts it should apply to based on categories, tags, etc.

Whenever a user creates a new post that matches your template conditions, it will automatically populate the template for them. They can modify or add to it as needed.

For a more detailed guide, see our tutorial on how to create custom single post templates.

Frequently Asked Questions

What are Gutenberg blocks in WordPress?

Gutenberg is the codename for the default WordPress block editor. It lets you create content using individual "blocks" for text, images, videos, and more, which you can rearrange and customize visually. Essentially, it turns content creation into a process of stacking and configuring blocks.

What can you use custom Gutenberg blocks for?

The beauty of custom blocks is that they can be used to add all sorts of features and content types to your site. Pretty much anything you can build with HTML, CSS, and JavaScript can be turned into a block. Some common examples include:

• Testimonials with fields for a photo, name, and quote
• Call-to-action buttons with customizable text and colors
• Content toggles that show/hide text when clicked
• Customizable tables with a dynamic number of rows and columns
• Image sliders with support for multiple transition effects
• Post listings that show your latest posts in a magazine-style format

The sky‘s the limit in terms of what custom blocks can do. If you can dream it, you can probably build it!

Can I use ACF to create custom blocks?

Yes, the popular Advanced Custom Fields (ACF) plugin supports creating custom Gutenberg blocks as of version 5.8. In fact, the process is quite similar to using WPCode or Genesis Custom Blocks.

With ACF, you first register a new block and define its fields using PHP code. Then you create a template file for rendering the block on the front end. Finally, you build the editing interface for the block using HTML and React.

The main difference is that ACF requires a bit more coding knowledge to use compared to the plugins we covered. But if you‘re already using ACF for custom fields on your site, it‘s a great option for keeping things consistent.

Learn more in our guide on how to use Advanced Custom Fields in WordPress.

What is the best WordPress block plugin?

There are a number of excellent WordPress plugins focused on extending the Gutenberg block editor, including:

• WPCode – The easiest way for non-developers to create custom blocks without writing code.
• Genesis Custom Blocks – A free block-creation toolkit oriented towards developers.
• Atomic Blocks – A collection of 15+ pre-designed blocks for everything from accordions to pricing tables.
• Ultimate Addons for Gutenberg – Adds 20+ new blocks for business sites, like testimonials, team members, and info boxes.
• Otter Blocks – A pack of 24 lightweight blocks for adding buttons, section dividers, sharing icons, and more.

The best block plugin for you will depend on your specific use case and development skills. For most users, we recommend starting with a pre-built collection like Atomic Blocks or Otter to add versatility to the editor, and then creating your own fully custom blocks with WPCode as needed.

No matter how you choose to build them, custom blocks are a fantastic way to harness the power and flexibility of Gutenberg. With the tools and tutorials in this guide, you‘re well on your way to crafting the perfect blocks for your WordPress website.