How to create a grid notebook style in WordPress

Learn in this tutorial how to create a custom block style that looks like a handwritten gridded notebook in WordPress.

You know I’m a big fan of taking advantage of block styles.

In this tutorial you’re going to see how to create a custom block style that simulates a grid notebook. That combined with a handwritten typography style can achieve a great handmade effect.

This would be the final result:

Let’s see how to achieve it:

Steps to create a custom style that looks like a grid notebook

1. Register the new style

Add the following code at the end of functions.php or in your functionality plugin:

With this code you are registering a new block style called “Osom Handwritten Note” which will display a gridded notebook sheet layout.

In it you indicate the name of the block to which you are going to add the new style, in this case the paragraph style (core/paraghaph) and you define 3 parameters:

• name: internal name that will also be given by the CSS class.
• label: tag used for the name shown in the editor.
• inline_style: inline CSS to be applied.

Obviously you can customize these parameters to your liking. Now, let’s see what you need to take into account to modify the CSS.

2. Customize the CSS

When registering the new block style you have given a name (name) which translates into a CSS class. Specifically:

• is-osom-handwritten-note

So, that class will be added when you choose that block style and is the one you use to tell it to display the gridded notebook layout.

Adding the CSS inline while registering the block has two very interesting advantages:

1. The CSS is applied on both the frontend and the backend, i.e. you will see the changes also in the editor without having to do anything extra.
2. The CSS is only loaded when that block is used, specifically when the block style is used.

And remember that this is a simple example to inspire you, you can modify the CSS to get the effect you want.

3. Select the block style

The only thing left to do is to add a paragraph block and write what you want.

To apply the new style you have created just go to Block > Styles and select it.

Conclusions

As you can see, with a little bit of code you can get a notebook-like design that you can use to give a more handmade touch to your website.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂