Antonio Sanchez

Storefront theme required.
Please report any bug or layout break you find.
Once installed this plugin adds a drop down menu to the frontend admin bar showing different options.
<h4>With this plugin you can:</h4>
<ol>
<li>Show Storefront Hooks: Select this option to see the Storefront theme’s hooks in their actual locations.</li>
<li>Show Storefront Filters: Select this option to see the Storefront theme’s filters list.</li>
<li>Show WooCommerce Hooks: Select this option to see the WooCommerce plugin’s hooks in their actual locations on your current theme. WooCommerce plugin must be active for you to see this option.</li>
<li>Display functions hooked in Storefront and WooCommerce action hooks.</li>
<li>Display remove_action() hints for hooked functions in Storefront and WooCommerce action hooks.</li>
</ol>
This plugin is built to work with the Storefront Theme.
<h4>Roadmap</h4>
<ol>
<li>Include Storefront Markup to help identifying HTML containers.</li>
<li>Include WooCommerce Markup to help identifying HTML containers.</li>
</ol>
Feel free to ask for new features.

Storefront Visual Hook Guide

Find Storefront and WooCommerce hooks (action hooks) quick and easily by seeing their actual locations inside your theme.

bennettmcelwee

Code Markup is a WordPress plugin that makes it easy to include program code samples in your posts. You can even include HTML markup in the code sample; Code Markup magically knows which characters should be displayed as code and which should be rendered as HTML.
The plugin works by escaping most special HTML tags and characters so they display exactly as typed, but leaving certain ones alone so they will render as normal HTML. The default set of allowed tags is the standard formatting tags like em, strong, span and so on. You can control this explicitly, or implicitly by specifying the language of the code block. For example, in a normal code block, will be rendered as emphasised text, but in an HTML code block, will be displayed as .
(I have to use square brackets instead of angle brackets because of the WordPress Extend site formatting.)
USAGE
<ol>
<li>
Enclose any code inside a <code> block.
</li>
<li>
Use <code markup=”…” lang=”…”> to specify appearance of code.
<ul>
<li>Include any HTML markup you like in the code, for example to add emphasis to certain sections.</li>
<li>Separate <code> blocks should be nested within a <pre> block to preserve whitespace.</li>
</ul>
</li>
<li>
If you want to fine-tune how Code Markup treats your code, use the markup and lang attributes on the code tag to specify how Code Markup should handle it.
<ul>
<li><code> or <code markup=”default”> allows common HTML tags to be rendered, and displays everything else exactly as written.</li>
<li><code markup=”none”> displays content exactly as written ? no markup is rendered.</li>
<li><code markup=”all”> renders content as HTML ? all markup is rendered.</li>
<li><code markup=”em strong a”> treats , and <a> tags as HTML markup ? everything else is displayed exactly as written. You can put whatever tags you like in the markup attribute, separated by spaces. As a special case, you can include the comment tag ? this means that HTML comments <!– like this –> will be ?rendered? as normal HTML comments (i.e. not displayed).</li>
<li><code lang=”html”> or <code lang=”xhtml”> displays content exactly as written, the same as <code markup=”none”>.</li>
</ul>
</li>
<li>
The markup attribute overrides the lang attribute.
</li>
<li>
Separate <code> blocks should be nested within a <pre> block to 
preserve whitespace.
</li>
</ol>

Code Markup

Code Markup is a WordPress plugin that makes it easy to include program code samples in your posts.

Storefront Visual Hook Guide vs Code Markup