Markup and Hook Reference
This is a draft of the markup and hooks reference. This article is in the process of being completed. The high level layout diagram is complete, but not the individual associations of the hooks to the layout areas.
Suffusion is armed with a large number of hooks to help eager developers. The following is an attempt to list the hooks and where they are invoked. The concept for presenting the hooks in such a manner has been lifted straight from a similar attempt for Thematic. Action hooks and Filter hooks are highlighted differently.
The complete lists of action hooks and filter hooks are also available.
WordPress Initialization
These hooks are defined in the load process of WordPress, prior to displaying any content.
suffusion_load_additional_text_domains, suffusion_skin_setup_{$suffusion_skin_name}, suffusion_filter_template_prefixes, suffusion_filter_template_sidebars, suffusion_set_template_widths
Document <head>
These hooks are defined in the <head> section of the document. This is the section where stylesheets, JS files and RSS links are included.
suffusion_document_header, suffusion_query_posts, wp_head
Document <body>
Your site’s display is controlled largely by the markup defined in the <body> HTML element. Consequently the largest number of hooks pertain to this section of your page.
Broadly speaking, this is the high-level markup of your site:
#nav-top
#nav
Each relevant area in the above has its own markup and is associated with appropriate hooks.
The <body> Element
Some hooks are applied before the above content is rendered and some after:
suffusion_before_page, suffusion_before_begin_wrapper
suffusion_document_footer, wp_footer
Navigation Bar Above Header
<nav> #nav-top suffusion_can_display_top_navigation
<div> #top-bar-right-spanel suffusion_can_display_sliding_panel
Sliding widget panel, shown without #nav-top if there is no navigation bar
Things to note about this section:
- Menus for this area can be configured via Suffusion Options → Other Graphical Elements → Navigation Bar Above Header, or Appearance → Menus.
- Menus for this area can be styled via Suffusion Options → Skinning → Navigation Bar Above Header.
- Do not add menus to the Top Bar Left Widgets and the Top Bar Right Widgets if you are expecting a drop-down. Instead, either assign them as above.
- The Top Bar Right Widgets can be configured to have a sliding panel. Check the settings under Suffusion Options → Sidebars → Top Bar Right Widgets for this.
- This whole section can be disabled for each page using the Additional Options for Suffusion → General Settings options. Additionally you could use the
suffusion_can_display_top_navigationfilter hook for selectively disabling it.
Widgets Above Header
Things to note about this section:
- This widget area is ideal for displaying ads.
- You can use the
suffusion_can_display_widgets_above_headerfilter hook to selectively disable this section. - If a plugin like Widget Logic evaluates this widget area to have no widgets, the widget area will disappear automatically.
Wrapper
<div> #wrapper
suffusion_after_begin_wrapper
<div> #header-container
<div> #container
suffusion_after_end_container
<div> #page-footer
Things to note about this section:
- This element wraps everything apart from the Navigation Bar Above Header and the Widgets Above Header.
- The Header Container may or may not be in the wrapper, depending on the choice you have made in Other Graphical Elements → Header → Header Layout Style
- The wrapper can be skinned via Skinning → Main Wrapper.
Header, Navigation Bar Below Header
<div> #header-container
suffusion_can_display_open_header, suffusion_can_display_closed_header, suffusion_page_header
(Shown inside or outside #wrapper depending on options)
<header> #header
Widget Area Below Header
Container
<div> #container
suffusion_after_begin_container
<div> #main-col / #single-col
<div> #sidebar-container
suffusion_before_end_container
Main Column
<div> #main-col, or <div> #single-col
suffusion_page_navigation, suffusion_before_begin_content
The element is #single-col if the “No Sidebars” template is used, otherwise it is #main-col
<div> #subnav
suffusion_can_display_hierarchical_navigation,
suffusion_can_display_breadcrumb_navigation, suffusion_breadcrumb_text
<div> #content
suffusion_after_begin_content
suffusion_before_end_content
Full Post Layout
<div> #content
suffusion_after_begin_content
<article> #post-id .post .full-post
<article> #post-id .post .full-post
<article> #post-id .post .full-post
suffusion_before_end_content
Excerpt Layout
<div> #content
suffusion_after_begin_content
<article> #post-id .post .excerpt
<article> #post-id .post .excerpt
<article> #post-id .post .excerpt
suffusion_before_end_content
Tiled Layout
<div> #content
suffusion_after_begin_content
<article> .suf-tile
<div> .suf-tile-image
<h2> .suf-tile-title
<div> .suf-tile-text
<article> .suf-tile
<div> .suf-tile-image
<h2> .suf-tile-title
<div> .suf-tile-text
<article> .suf-tile
<div> .suf-tile-image
<h2> .suf-tile-title
<div> .suf-tile-text
suffusion_before_end_content
Mosaic Layout
<div> #content
suffusion_after_begin_content
<div> .suf-mosaic
<div> .suf-mosaic-thumbs
<div> .suf-mosaic-thumb-container
<div> .suf-mosaic-thumb-container
<div> .suf-mosaic-thumb-container
suffusion_before_end_content
List Layout
<div> #content
suffusion_after_begin_content
<ul> or <ol>
- Individual Post Title 1 <a> .entry-title suffusion_get_post_title_and_link
- Individual Post Title 2 <a> .entry-title suffusion_get_post_title_and_link
- Individual Post Title 3 <a> .entry-title suffusion_get_post_title_and_link
suffusion_before_end