Recently I’ve built a website for a private clinic using WordPress. To make website administration as simple as possible I added a few custom WordPress blocks. Here I’ll show you how to create a simple WordPress block by yourself.
Using the right tools you can create a custom WordPress Gutenberg editor block in just a few minutes. Here’s how you do that.
Creating custom WordPress block without leaving WordPress admin panel
To create a custom block in WordPress you’ll need to download a free WordPress plugin called Genesis Custom Blocks. No worries, you don’t need to use Genesis Framework based theme to use this plugin – it works with any theme which supports WordPress blocks.
First step – install custom WordPress blocks plugin
Go to Plugins >> Add new, and install Genesis Custom Blocks plugin.
Once plugin is activated you’ll find it’s settings in WordPress admin panel >> Custom blocks.
Second step – create custom WordPress block fields
Once plugin is activated go to Custom Blocks >> Add New to start building your first custom Gutenberg editor block.
Now you’re in the Builder tab where you’ll make the actual block structure and will define it’s name:
- Enter custom WordPress block name at the top
- Select icon for a block – it’s name and icon will be shown in page or post for website editors.
- WordPress editors usually search for a block by entering it’s name. You may specify additional keywords to make sure website editors will find the block they need as easy as possible.
- Select if block needs to be shown in pages, in posts, or in both types of content.
WordPress block is basically a list of fields. In this example we’ll create four fields in our block:
- Image field for doctor image
- Text field for doctor name
- Textarea field for short doctor biography
- File field for doctor’s CV – website editor will be able to upload a PDF file directly in the block.
To create a new field, click + button, and select field settings:
- Enter field label
- Enter field name / slug (will be used in html template)
- field type
- field width
Some blocks have additional settings like placeholder, help text etc. So you may even add instructions how to use the field directly in WordPress editor.
Once you add all the fields hit Publish.
After publishing custom block you’ll be notified that you can add this file to your theme (by clicking icon in the red square), or you mau switch to Template Editor tab and create block HTML and CSS code there.
Third step – create custom WordPress block HTML markup and CSS
Once we have our custom WordPress block structure in place, the next thing we need is to create HTML template for it. Template is used to display custom block for website visitors.
Once you’re in Template Editor tab, click Markup, and create any HTML structure you want.
To display field values, enclose field slug in 2 brackets. For example {{doctor-image}} , {{cv-file}} , etc.
You may check for more information about field usage and markup in official plugin documentation here.
To add CSS styling to your block, click CSS in the same Template Editor tab.
That’s it – your custom WordPress block is ready to use.
If you’ll ever want to edit styling, html markup or custom fields, you can always edit your custom WordPress block in Custom Blocks list. So don’t worry if you’re not sure how your block needs to look like – you can update it later.
How to use custom WordPress block in pages and posts
To start using your created block in WordPress you just go to the page or post you want, and add the block the same way as you add any other block.
Click + where you want the block to appear, enter block name, and choose it.
Fill your new block. Data will be visible the same way as in native WordPress blocks so your customer’s website administrators won’t have any problems using them.
You may add as many custom blocks as you like in the same page or post.
Enjoy your new custom block in WordPress!
As you see adding new custom blocks in WordPress is really easy and straightforward. You just need the right plugin, some basic HTML and CSS skills, and you can build anything with WordPress without cumbersome third party page builders.
You may create as many custom WordPress blocks as you want, add styling to them from WordPress admin, and build custom WordPress websites without ever leaving WordPress admin panel.
