Creating custom hook locations for GeneratePress

On a website I’ve been working on, I needed a way to add my own custom hooks into my own layouts.

Since I use GeneratePress, we can make use of all the great hooks that GP has to offer. However, where this falls short is if you are using the Elements feature for creating your own layouts, but still want the ability to use GP’s location controls to hide/show blocks based on certain conditions.

Where this came in handy was when I wanted to add a button into my Page Hero element template, but only on certain pages. Now I could use have used my Logged in/out condition in Gutenberg tutorial that allows me to apply any condition I want, but this could cause my main Block - Page Hero element to become cluttered and confusing.

Instead, my solution was to create a custom block (or shortcode) that I could place into the Page Hero template and then hook in like any another hook.

I have created 2 solutions, a Blockstudio block and a Shortcode

Blockstudio Method

Create a new block inside of Blockstudio and copy and paste the snippets below into their respective files.

Block.json

        {
   "$schema": "https://app.blockstudio.dev/schema",
   "apiVersion": 2,
   "name": "the-creative-tinker/custom-hook",
   "title": "Custom hook",
   "description": "Add custom hook location",
   "category": "blockstudio",
   "icon": "pressthis",
   "blockstudio": {
      "attributes": [
         {
            "id": "hook",
            "type": "text",
            "label": "Hook name"
         }
      ]
   }
}
      
Copy