Volatyl Hooks List

Have you read up on hooks yet? If not, read this first.

To understand hook placement, use the visual hooks guide.

Below is a list of all Volatyl hooks and examples of how you can use them in your child theme’s functions.php file.

Before HTMLvol_before_html

This is the first content inside of the opening <body> tag of your site. Use this hook to build a “Hello Bar” style attention grabber.

Show me an example!

// Custom site banner
function custom_site_banner() { ?>
	Consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_before_html', 'custom_site_banner' );

After HTMLvol_after_html

This is the last content on your page just inside of the closing </body> tag.

Show me an example!

// Custom site footer
function custom_site_footer() { ?>
	Consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_after_html', 'custom_site_footer' );

Header Topvol_header_top

This displays inside of your header above where your site title and site tagline are located. Try turning off your site title and site tagline to build your own header layout with HTML.

Show me an example!

// Custom header
function custom_header() { ?>
	Displays above all else in your header and remains visible on the landing page template
<?php }
add_action( 'vol_header_top', 'custom_header' );

Header Bottomvol_header_bottom

This displays inside of your header below where your site title and site tagline are located.

Show me an example!

// Custom header
function custom_header_bottom() { ?>
	Displays below all else in your header and is removed on the landing page template
<?php }
add_action( 'vol_header_bottom', 'custom_header_bottom' );

Footer Topvol_footer_top

This displays inside of your footer at the very top. If you have the Fat Footer activated, this will display above that.

Show me an example!

// Custom footer
function custom_footer() { ?>
	Displays above all else in your footer and is removed on the landing page template
<?php }
add_action( 'vol_footer_top', 'custom_footer' );

Footer Bottomvol_footer_bottom

This displays inside of your footer at the bottom. If you have the Fat Footer activated, this will display below that but above the site information area.

Show me an example!

// Custom footer
function custom_footer_bottom() { ?>
	Displays below fat footer but above site information and is removed on the landing page template
<?php }
add_action( 'vol_footer_bottom', 'custom_footer_bottom' );

Site Informationvol_site_info

This displays just after (inline) the site copyright area. If you remove the Volatyl attribution, you can build your own copyright section here.

Show me an example!

// Custom site information
function custom_site_info() { ?>
	Displays after default attribution and is visible on landing page template
<?php }
add_action( 'vol_site_info', 'custom_site_info' );

Headlinervol_headliner

Better known as a “Feature Box,” this displays beneath your header but above your content. Learn more about the Headliner here.

Show me an example!

// Custom headliner
function custom_headliner() { ?>
	Consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_headliner', 'custom_headliner' );

Footlinervol_footliner

Much like the Headliner, this area can be used to highlight important information below the main content area. Learn more about the Footliner here.

Show me an example!

// Custom footliner
function custom_footliner() { ?>
	Consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_footliner', 'custom_footliner' );

Before Content Area – vol_before_content_area

Only active on full-width HTML structure, use this hook to add full-width sections to your layout.

Show me an example!

// Custom top liner
function custom_top_liner() { ?>
	Only visible using the full-width HTML structure setting, consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_before_content_area', 'custom_top_liner' );

After Content Area – vol_after_content_area

Only active on full-width HTML structure, use this hook to add full-width sections to your layout.

Show me an example!

// Custom bottom liner
function custom_bottom_liner() { ?>
	Only visible using the full-width HTML structure setting, consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_after_content_area', 'custom_bottom_liner' );

Before Content – vol_before_content

Only active on page-width HTML structure, use this hook to add stacked sections to your layout above your content (content and sidebars).

Show me an example!

// Custom page-width top liner
function custom_page_width_top_liner() { ?>
	Only visible using the page-width HTML structure setting, consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_before_content', 'custom_page_width_top_liner' );

After Content – vol_after_content

Only active on page-width HTML structure, use this hook to add stacked sections to your layout below your content (content and sidebars).

Show me an example!

// Custom page-width bottom liner
function custom_page_width_bottom_liner() { ?>
	Only visible using the page-width HTML structure setting, consider your site's <a href="http://volatylthemes.com/structure/">HTML structure</a> to build in this hook.
<?php }
add_action( 'vol_after_content', 'custom_page_width_bottom_liner' );

Before Content Column – vol_before_content_column

This is the very top of the content column before the article feed on your blog home, archive, and single posts only.

Show me an example!

// Custom above content column
function custom_above_content() { ?>
	Displays above the content column in any layout
<?php }
add_action( 'vol_before_content_column', 'custom_above_content' );

After Content Column – vol_after_content_column

This is the very bottom of the content column after  the article feed on your blog home, archive, and single posts only.

Show me an example!

// Custom below content column
function custom_below_content() { ?>
	Displays below the content column in any layout
<?php }
add_action( 'vol_after_content_column', 'custom_below_content' );

Before Article Header – vol_before_article_header

This displays above the article headline and byline (if byline items are displayed).

Show me an example!

// Custom above single post title
function custom_above_post_title() { ?>
	Displays above single post title only on single posts templates
<?php }
add_action( 'vol_before_article_header', 'custom_above_post_title' );

After Article Header – vol_after_article_header

This displays beneath the article headline and byline (if byline items are displayed). Many bloggers place ads in this area.

Show me an example!

// Custom below single post title and byline
function custom_below_post_title_byline() { ?>
	Displays below single post title and headline only on single posts templates
<?php }
add_action( 'vol_after_article_header', 'custom_below_post_title_byline' );

Last Byline Item – vol_last_byline_item

Displays as the last item in the byline any time the byline is shown. Your content will appear before the “edit” link as that link is not seen by visitors.

Show me an example!

// Custom below single post title and byline
function custom_byline_item() { ?>
	Displays as the last item any time the byline is shown.
<?php }
add_action( 'vol_last_byline_item', 'custom_byline_item' );

Single Post Footer – vol_post_footer

This displays below your articles but above the comments. Use this area as a call-to-action after a vistor reads your content.

Show me an example!

// Custom single post footer
function custom_post_footer() { ?>
	Displays below single posts above the comments
<?php }
add_action( 'vol_post_footer', 'custom_post_footer' );

Before Sidebar 1 – vol_before_sidebar_1

This displays directly above Sidebar 1 in all layouts.

Show me an example!

// Custom before sidebar 1
function custom_before_sidebar_1() { ?>
	Displays above leftmost sidebar on all layouts
<?php }
add_action( 'vol_before_sidebar_1', 'custom_before_sidebar_1' );

After Sidebar 1 – vol_after_sidebar_1

This displays directly below Sidebar 1 in all layouts.

Show me an example!

// Custom after sidebar 1
function custom_after_sidebar_1() { ?>
	Displays below leftmost sidebar on all layouts
<?php }
add_action( 'vol_after_sidebar_1', 'custom_after_sidebar_1' );

Before Sidebar 2 – vol_before_sidebar_2

This displays directly above Sidebar 2 in all layouts.

Show me an example!

// Custom before sidebar 2
function custom_before_sidebar_2() { ?>
	Displays above rightmost sidebar on all layouts
<?php }
add_action( 'vol_before_sidebar_2', 'custom_before_sidebar_2' );

After Sidebar 2 – vol_after_sidebar_2

This displays directly below Sidebar 1 in all layouts.

Show me an example!

// Custom after sidebar 2
function custom_after_sidebar_2() { ?>
	Displays below rightmost sidebar on all layouts
<?php }
add_action( 'vol_after_sidebar_2', 'custom_after_sidebar_2' );

To better understand hook placement, use the visual hooks guide!

Return to docs