Flex Skin Hooks

You can use hooks to interact with the Flex Skin in a programmatic way. This is great for developers or webmasters who need to inject content (or anything else) in a scalable, flexible manner.

Hooks Common to All Templates

  • hook_top_body โ€” insert anything before the HTML output (just after the opening <body> tag) on every page
  • hook_bottom_body โ€” insert anything after the HTML output (just before the closing </body> tag) on every page

Template- and Context-specific Hooks

In the Flex Skin, the following elements each have four hooks associated with them by default:

Blog/Archives Templates:

  • content_container
    • content_section
      • home
        • post_image_row
        • post_container
          • content_column
            • post_headline
            • post_excerpt
            • post_footer
    • pagination_section
      • pagination_container
    • footer_section
      • footer_container

Single Template:

  • content_container
    • byline_section
      • byline_container
    • content_section
      • post_columns
        • content_column
          • single
            • headline_area
        • sidebar_column
          • sidebar
    • author_section
      • author_container
    • cta_section
    • comments_section
      • comments_container
        • comment_list
          • comment_head
    • comment_form_section
      • comment_form_container
        • comment_form
    • footer_section
      • footer_container

Front Page Template:

  • content_container
    • latest_section
      • latest_container
        • front_latest_posts
    • cta_section
    • footer_section
      • footer_container

Page Template:

  • content_container
    • content_section
      • post_columns
        • content_column
          • page
            • headline_area
        • sidebar_column
          • sidebar
    • footer_section
      • footer_container

No Sidebar/Landing Template:

  • content_container
    • content_section
      • post_columns
        • content_column
          • page
            • headline_area
    • footer_section
      • footer_container

If each of the above elements can be represented by $hook, then the four hooks available on each element are as follows:

  • hook_before_$hook (before the opening tag)
  • hook_top_$hook (just after the opening tag)
  • hook_bottom_$hook (just before the closing tag)
  • hook_after_$hook (after the closing tag)

To illustrate, using the header element as an example, these are the four hooks:

  • hook_before_header (before the opening tag)
  • hook_top_header (just after the opening tag)
  • hook_bottom_header (just before the closing tag)
  • hook_after_header (after the closing tag)

The trackbacks element only includes before and after hooks.

As you can see, the Flex Skin provides a ton of specific hook locations for you to reference. And if you don’t see an available hook where you want to inject some content, you can always create your own hooks wherever you want!