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.

WordPress Initialization
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.

<head>
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:

Top Bar Left Widgets #top-bar-left-widgets
Top Bar Right Widgets #top-bar-right-widgets
Widgets Above Header #widgets-above-header
Wrapper #wrapper
Header Container #header-container
Header #header
Header Widgets #header-widgets
Left Header Widgets #left-header-widgets
Right Header Widgets #left-header-widgets
Widget Area Below Header #horizontal-outer-widgets-1
Container #container
Main Column #main-col / #single-col
Breadcrumbs #subnav
Main Content #content
Sidebar Container #sidebar-container
Static Tabbed Sidebar #tab-box
Wide Sidebar (Top) #wsidebar-top
Sidebar 2 #sidebar-2
Sidebar 2 (Bottom) #sidebar-2-b
Sidebar 1 #sidebar-1
Sidebar 1 (Bottom) #sidebar-1-b
Wide Sidebar (Bottom) #wsidebar-bottom
Widget Area Above Footer #horizontal-outer-widgets-2
Footer #page-footer

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:

<body>
suffusion_before_page, suffusion_before_begin_wrapper

Widgets Above Header #widgets-above-header
Wrapper #wrapper

suffusion_document_footer, wp_footer

Navigation Bar Above Header  

Navigation Bar Above Header
<nav> #nav-top suffusion_can_display_top_navigation
Top Bar Left Widgets
<div> #top-bar-left-widgets

Sliding Panel for Top Bar Right Widgets
<div> #top-bar-right-spanel suffusion_can_display_sliding_panel
Sliding widget panel, shown without #nav-top if there is no navigation bar

Top Bar Right Widgets
<div> #top-bar-right-widgets

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_navigation filter hook for selectively disabling it.

Widgets Above Header  

Widgets Above Header
<div> #widgets-above-header
suffusion_can_display_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_header filter 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  

Wrapper
<div> #wrapper
suffusion_after_begin_wrapper
Header Container
<div> #header-container
Widget Area Below Header
<div> #horizontal-outer-widgets-1
Container
<div> #container

suffusion_after_end_container

Widget Area Above Footer
<div> #horizontal-outer-widgets-2
Footer
<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  

Header Container
<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> #header

Header Widgets
<div> #header-widgets

Left Header Widgets
<div> #left-header-widgets
Navigation Bar Below Header <nav> #nav suffusion_can_display_main_navigation
Right Header Widgets
<div> #right-header-widgets

Widget Area Below Header  

Widget Area Below Header
<div> #horizontal-outer-widgets-1
suffusion_can_display_widget_area_below_header

Container  

Container
<div> #container
suffusion_after_begin_container
Main Column
<div> #main-col / #single-col
Sidebars
<div> #sidebar-container

suffusion_before_end_container

Main Column  

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

Breadcrumbs
<div> #subnav
suffusion_can_display_hierarchical_navigation,
suffusion_can_display_breadcrumb_navigation, suffusion_breadcrumb_text
Main Content
<div> #content
suffusion_after_begin_content

Page Navigation

suffusion_before_end_content

Full Post Layout  

Main Content
<div> #content
suffusion_after_begin_content

Individual Post 1
<article> #post-id .post .full-post
Individual Post 2
<article> #post-id .post .full-post
Individual Post 3
<article> #post-id .post .full-post
Page Navigation

suffusion_before_end_content

Excerpt Layout  

Main Content
<div> #content
suffusion_after_begin_content

Individual Post Excerpt 1
<article> #post-id .post .excerpt

Thumbnail
Excerpt Content
Individual Post Excerpt 2
<article> #post-id .post .excerpt

Thumbnail
Excerpt Content
Individual Post Excerpt 3
<article> #post-id .post .excerpt

Thumbnail
Excerpt Content
Page Navigation

suffusion_before_end_content

Tiled Layout  

Main Content
<div> #content
suffusion_after_begin_content

Individual Post Tile 1
<article> .suf-tile

Thumbnail
<div> .suf-tile-image
Title
<h2> .suf-tile-title
Excerpt Content
<div> .suf-tile-text
Individual Post Tile 2
<article> .suf-tile

Thumbnail
<div> .suf-tile-image
Title
<h2> .suf-tile-title
Excerpt Content
<div> .suf-tile-text
Individual Post Tile 3
<article> .suf-tile

Thumbnail
<div> .suf-tile-image
Title
<h2> .suf-tile-title
Excerpt Content
<div> .suf-tile-text
Page Navigation

suffusion_before_end_content

Mosaic Layout  

Main Content
<div> #content
suffusion_after_begin_content

Mosaic
<div> .suf-mosaic
Mosaic Thumbs
<div> .suf-mosaic-thumbs

Individual Post Thumb 1
<div> .suf-mosaic-thumb-container
Individual Post Thumb 2
<div> .suf-mosaic-thumb-container
Individual Post Thumb 3
<div> .suf-mosaic-thumb-container
Page Navigation

suffusion_before_end_content

List Layout  

Main Content
<div> #content
suffusion_after_begin_content

List
<ul> or <ol>
Page Navigation

suffusion_before_end_content

Individual Posts  

Individual Post
<article> #post-id .post
suffusion_after_begin_post

Title Container
<div>.title-container

Date
<div> .date
Title
<div> .title

.postdata suffusion_permalink_text

Entry Container
<div> .entry-container

Post Content
<div> .entry .entry-content
suffusion_content

suffusion_after_content

suffusion_before_end_post

Comments
<div> #comments
Only shown if you are viewing a single page or post, not on archive views, categories etc.

Comments  

Comments
<div> #comments

Comment List
<ol> .commentlist

Individual Comments
<li> .comment
suffusion_before_comment

Comment Content
<div> .comment-body

suffusion_after_comment

Sidebar Container  

Sidebar Container
<div> #sidebar-container
Static Tabbed Sidebar
<div> #tab-box
Sidebar Wrap
<div> #sidebar-wrap
Wide Sidebar (Top)
<div> #wsidebar-top
Sidebar Shell 2
<div> #sidebar-shell-2
suffusion_before_second_sidebar
Sidebar 2
<div> #sidebar-2

suffusion_between_second_sidebars

Sidebar 2 (Bottom)
<div> #sidebar-2-b

suffusion_after_second_sidebar

Sidebar Shell 1
<div> #sidebar-shell-1
suffusion_before_first_sidebar
Sidebar 1
<div> #sidebar-1

suffusion_between_first_sidebars

Sidebar 1 (Bottom)
<div> #sidebar-1-b

suffusion_after_first_sidebar

Wide Sidebar (Bottom)
<div> #wsidebar-bottom

Widget Area Above Footer  

Widget Area Above Footer
<div> #horizontal-outer-widgets-2
suffusion_can_display_widget_area_above_footer

Site Footer
<div> #page-footer
suffusion_page_footer, suffusion_can_display_site_footer
The #page-footer element is only shown if the footer is outside the wrapper, but the #cred element is always shown.
Credits
<table> #cred