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.



Write a reply

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