How to Create a Custom WordPress Block Without (Much) Coding

Want to create a custom block for your website?

By the end of this guide, you will discover how easily you can create custom WordPress blocks, even without any coding skills.

Here’s a glimpse into what you will learn:

• Can plugins really help?
• What plugins you can use
• Practical steps in using each plugin

Let’s get started.

Can you make custom blocks without much coding?

While we’re now a long way from the classic editor, the basic blocks available in the Gutenberg are not enough for advanced users.

Now, there are at least two ways to create a custom Gutenberg block:

1. Through coding
2. Through plugins

The usual method is pure coding since it allows more advanced customizations on new custom blocks. Unfortunately, many of us don’t code so… 😅

On the bright side, there are plugins that can help create custom Gutenberg blocks — albeit these are simpler custom blocks.

These plugins have a block builder which allows you to choose from pre-configured mini-blocks to create the custom block.

So yes, you can create a custom block without much coding. But these blocks are simpler — don’t expect complicated blocks here.

How to Make Custom Blocks Using Plugins

Although there may be more plugins you can use to create custom blocks, I like the functionality of the three here since they’re easy to use.

⚠️ Note: For the purpose of this tutorial, I will create a custom note box block similar to what you’re reading right now using the available tools from the plugins.

Let’s start with the first one:

1. Lazy Blocks (Modern)

Lazy Blocks is a WordPress plugin that enables the creation of custom blocks visually, without requiring coding skills.

It’s designed to simplify the process of adding custom functionality to your WordPress site.

Lazy Blocks allows you to create custom blocks and meta fields for specific post types, offering a flexible approach to content management​​.

Here’s how to use Lazy Blocks:

Step 1: Add a new block

Add a new plugin from the repository within your admin dashboard.

Search for the plugin’s name and then install and activate it on your website.

Now that the plugin has been installed, you can start creating the new block.

Hover your mouse over the plugin’s name from the sidebar and click on the add new post button:

This will bring you to a page that kind of looks like the page you see when you create a new post.

For starters, I named the new custom block — the slug also automatically updated into the name:

Step 2: Add and configure the block’s components

The sample custom block I’m creating is super simple (just for demo purposes), and will only need one mini-block to complete.

On the content controls tab, all you have to do is add the components of your own custom block (the button will automatically create a text component by default).

Fortunately, it’s also the component we need for the purpose of this guide.

The important thing to remember when adding a component is to give it a label, which is needed later when adding the frontend code.

I have also added a placeholder just to spice things up:

Step 3: Enter the output code

After setting up the components and doing the adjustments you need, you will need to enter the usage code so the contents will show up on the front end.

Fortunately, if you’re not that familiar with the code, you can check Lazy Block’s documentation for the usage code.

For example, here’s the usage code for using the text component:

I used the simplest method (HTML) and added a bold design to copy the sample note box found in the previous section.

Here’s the code I used:

<div style="background-color: #f0f0f0">

<p>⚠️ <b>Note:</b> {{note}}</p>

</div>

Since there’s a background color to the box we’re trying to create, I also added a style snippet (with the help of research + the browser’s inspect tool).

There’s also a preview window so you can see what’s going on:

Step 4: Publish and test the block

Publish the block so you can use it when creating a post or a page (the button is on the upper-right side similar to publishing a post).

You will now see the custom WordPress block on the list of Gutenberg blocks you can add to a post or page:

Since the block was designed to take an input, you will have to enter the actual note you want to display.

You can then check the preview or published post to see the results:

2. Genesis Custom Blocks (Free)

Genesis Custom Blocks is a powerful tool for WordPress developers, designed to leverage the block-first approach of modern WordPress.

It works seamlessly with the WordPress block editor (Gutenberg) and enables the creation of custom blocks tailored to specific design and functionality requirements.

Its focus is on providing a streamlined experience for developing custom blocks, from design implementation to unique functionalities and integration with third-party apps and plugins​​.

Here’s how to use it:

Step 1: Add a new block

As with any other plugin, search for it in the repository and then install and activate it:

You have two options to add a new block:

• Hover your mouse over the plugin’s name > add new
• Go to the plugin page and click the add new button

Here’s an illustration of the second method:

Step 2: Add a new field

The next page is the custom block builder.

Similar to what we did with Lazy Blocks:

• Give the custom block a name
• Press the (+) button to add a new field

From there, enter the field label.

You can change the type of component (default is text) by clicking on the field type and selecting the mini-block you want to add.

Here’s how it looks:

Once again, the field label is important since we would need that when adding the code in the block template editor.

After you’re done adding all the fields and customizing the field settings, it’s time to move on to the coding part.

Step 3: Enter the markup code

From the builder, you then have to go to the template editor, where you will see a code editor:

The way it works is similar to Lazy Blocks, even in calling out the fields or the components (this time, using the field label).

Here’s the code (looks similar to the one in Lazy Blocks):

<div style="background-color: #f0f0f0">

<p>⚠️ <b>Note:</b> {{note-field}}</p>

</div>

⚠️ Note: You can check the documentation if you need help with code references for the fields, functions, and filters.

Although there’s a CSS tab (besides the markup tab), I opted to include the styling within the container since there’s only one.

Here’s what it looks like:

By the way, there’s an editor preview and front-end preview in case you want to see how it looks like on the front end without going to a post.

Step 4: Publish and test the block

Even if you to the preview tabs, you can publish the custom block right away using the button in the upper-right corner.

Now, the custom block will appear on the blocks list:

After adding the block, you will then have to enter the actual note to display.

This is because we set the block to receive input from the user:

Once you publish the post, you will see a result similar to the one we got when using the Lazy Block (well, since they’re basically the same custom block).

Here it is:

3. WPCode (Snippet)

WPCode, formerly known as “Insert Headers and Footers by WPBeginner,” is a widely-used WordPress plugin for managing code snippets.

It simplifies the process of adding code to WordPress sites without editing theme files.

WPCode is especially useful for inserting scripts like Google Analytics, custom CSS, Facebook Pixel, and more in various areas of a website, including headers and footers​​.

This is also your best option if the custom block you want to make is composed of pre-existing blocks in WordPress.

⛔ Warning: Unfortunately, the feature we need is locked behind the pro version, so you need to buy the pro version to use it for custom blocks.

Here’s how to use it:

Step 1: Add a new snippet

Get the pro version first of the plugin. Install and activate it on your website.

Once you have that, proceed to the plugin page from the sidebar panel and click on the add new button:

From there, go to the add your custom code box.

Hovering your mouse over it will reveal the use snippet button — click on it:

Step 2: Create a blocks snippet

From there, choose the blocks snippet code type and click on the edit with block editor button on the center of the page:

Since you would be asked to save the snippet, might as well give it a name before going into the block editor.

The next page is literally a block editor, so you can:

• Assemble the custom block here
• Click the update button
• Return to the code snippet builder

Before you insert the block snippet, make sure to set it to active and click the update button.

It’s found in the upper-right corner:

Step 3: Insert the block snippet

Now, unless you want to auto-insert the block code snippet in your post, it’s likely that you want to place it manually.

For this, scroll a little until you get to the insertion options:

• Select shortcode as the insert method
• Copy the shortcode

Go to the post or page where you want to insert the custom block.

Add a shortcode block first:

Remember the shortcode earlier?

All you have to do is paste it on the field provided:

As you might have expected, it will output a similar result.

There might be a little difference here since the custom block was literally made of existing blocks on your website.

For example, you can see that the background color of the note box covers a lot more (and looks better too):

Building Custom Gutenberg Blocks

Creating custom WordPress blocks is now easier and more accessible, even without coding expertise.

With the evolving landscape of WordPress tools, users can effortlessly personalize and enhance their websites, tailoring them to unique specifications and improving overall user experience.

This marks a significant step forward in democratizing web design, making it possible for anyone to craft a dynamic and functional website.