Arms crossed picture of James Auble
Genesis Custom Blocks Plugin Screenshot

Create a Wordpress Custom Theme with Genesis Custom Blocks

PublishedJun 2nd, 2022

Are you a Wordpress developer who's spent most if not all of your time developing custom Wordpress themes using what is now called the Classic Editor?

Or maybe you're a new-ish Wordpress dev who entered the Wordpress landscape after Gutenberg was already shipped as the main editor, but found yourself reverting back to the Classic Editor with the now famous Classic Editor Plugin.

There's no shortage of Wordpress devs who are disenchanted with the direction Wordpress has taken towards becoming a "Page Builder" blogging platform. I have been in the past--and still consider myself one of them.

As I discovered recently (albeit a little late to the party), it isn't difficult to join the Gutenberg--blocks-page-builder family.

TL;DR

There are a couple easy ways to create Wordpress Blocks without resorting to setting up under-documented Wordpress CLI's and plugin development environments. Today I'm just gonna focus on one of those ways: Genesis Custom Blocks by StudioPress.

Install Wordpress

I recommend you install the most recent version of Wordpress as block support is changing rapidly and Genesis Blocks features will likely rely on more recent versions of Wordpress.

If you've never set up Wordpress on your own machine, this tutorial could possibly.

Install Genesis Custom Blocks Plugin

You can easily install the plugin by searching within the Wordpress Admin under Plugins > Add New and searching for Genesis. Locate Genesis Custom Blocks in the results and install and activate it.

Genesis Custom Blocks Wordpress Plugin Card

You should now see a Custom Blocks item in the Wordpress Admin sidebar menu.

genesis custom blocks wordpress admin sidebar menu entry

Create a Hello World Block

1. First, click on Add New under Custom Blocks in the Wordpress sidebar menu.

2. Let's give our new block a title of "Hello World".

3. Now we can add our first field by clicking on the + icon.

genesis add field to blog screenshot

4. Enter a title for our field of "Hello World" and you should see the slug field automatically populate with a slugified version of our new field title. Because Genesis Custom Blocks does now create a unique ID for each instance of our block, let's create an additional field of type Number and title it "ID" with a slug of id.

genesis hello world block fields

5. Without filling out some of the options settings like default value, placeholder, etc... we're going to publish our new block by clicking Publish in the top right corner. You should now see a blue info box that tells you were in your project Genesis will look for the PHP template for this block.

genesis block new block next step screenshot

6. We could do just what it says and create our single PHP block template /blocks/block-hello-world.php, or as explained here, we can create a directory inside our /blocks/ directory using the slug of our new block, and then create a block.php file within that for our new block's template.

screenshot of our genesis blocks directory in vs code

7. Let's also add a preview.php file that's used to preview our new block in the Wordpress Block Editor, and a block.css file that will contain our new block's CSS.

screenshot of genesis new block directory with preview and css

8. Let's now add some basic markup to our block.php file to render our block's content.

<div class="hello_world" id="<?php block_field('id') ?>">
  <span class="hello_world__text">
    Hello, <?php block_field('name') ?>
  </span>
</div>

Also, copy/paste this same markup into our preview.php so that we have something visually to look at while editing.
Our block is very simple and should display just fine in the Wordpress block editor, but often times you'll likely need to optimize the markup in your preview.php to play nicer with the block editor.

9. We'll also add some styles to our block.css file to test out how we can style our block.

.hello_world {
  padding: 20px;
  margin: auto;
  background: black;
  border: 3px solid magenta;
  color: white;
  max-width: 200px;
  text-align: center;
}

10. We can now create an instance of our block in the block editor. Navigate to a page where you want to use our new block and add a new block. Fill out the text name and id field and update the page. Click outside of our block and you should see a preview of our new block. Click Update in the top right of the editor and check out the frontend for this page/post and we should see the same presentation of our block that we see in the editor.

That's it!

Hope you enjoyed this little Genesis Custom Blocks walk-through and code on web assassins.

Need a web developer?

Contact Me
Back to Blog
Scrolldown Icon