Beans HTML API Visual Hooks Guide

Hey People,

So, while on my learning curve, I decided to create a plugin, get to know Beans more, and perhaps make something helpful...

Coming from Genesis, I always found the Genesis Visual Hooks Guide useful.

I found this in the forum from a while ago:

I do agree with Thierry, this idea is somewhat redundant, everything we need is to be found in the inspector. But since I was already on my journey I completed the plugin. I have however tried to make it complimentary to development mode.

It only displays the possible action hooks that have been created by the HTML API markup, using the data-markup-id. These being:

  • {$markup_id}_before_markup
  • {$markup_id}_prepend_markup
  • {$markup_id}_append_markup
  • {$markup_id}_after_markup

It adds an admin toolbar dropdown that lets you display the hooks individually, choosing as many as you like. There is also a link to display all of the possible action hooks, which is a bit crazy, there's a lot of them, alongside a link to clear whatever hooks are showing, and a link to enable/disable the plugin functionality.

Plugin Github Link


(need to click on the link, then img icon to display the screenshot.)

I would've used Cloudup, but they are no longer accepting signups, so I had to fallback to my Amazon CloudDrive.


Show hooks selectively

Show All Possible hooks

All gets a bit crazy and confusing... Soooo many possible hooks

Any and all comments are welcomed.



Thank you very much Jeff for creating this plugin! It is great to see all the hooks available in Beans in a visual way.

Have a great day!

Paal Joachim

Write a reply

Login or register to write a reply, it's free!