back to Themify.me

Hooks

WordPress hooks allow you to add or modify stuffs in the theme without having to edit any core template files. It is intended to use by developers with good understanding of WordPress API and PHP. If you are not familiar with PHP, you can archive the similar results by adding modules in Flow templates. This tutorial will give some basic usages of hooks and provide a complete list of hooks available in Flow templates.

Adding Hooks

To add filter or action hooks:

  1. Create a functions.php file in a child theme folder (do not edit the functions.php file in ‘themifyflow’ theme folder)
  2. Now you may apply the action or filter to the hooks (read the sample usages below for examples)

Simple Usage

A common action hook usage is to add custom content to the page rendered in the browser. This sample code will add a text div tag to the header using the tf_hook_header_end hook:


<?php
function theme_header_end() {
echo '<div class="custom-text">Custom Text</div>';
};
add_action('tf_hook_header_end', 'theme_header_end');
?>

To add the content somewhere else, simply specify which action hook name you want to use as the insertion point. For example you can insert the content at the end of the post.


<?php
function theme_post_end() {
echo '<div class="custom-text">Custom Text at the end of the post</div>';
};
add_action('tf_hook_post_end', 'theme_post_end');
?>

Conditional Header Banners

To display different header banner on different pages:


<?php
function add_banner_header_end(){
if(is_home())
echo '<div class="header-banner"><img alt="header banner" src="http://example.com/url/to/image-home.jpg" /></div>';
elseif(is_page(7))
echo '<div class="header-banner"><img alt="header banner" src="http://example.com/url/to/image-page-id-7.jpg" /></div>';
elseif(is_page())
echo '<div class="header-banner"><img alt="header banner" src="http://example.com/url/to/image-page.jpg" /></div>';
elseif(is_single())
echo '<div class="header-banner"><img alt="header banner" src="http://example.com/url/to/image-single.jpg" /></div>';
elseif(is_category())
echo '<div class="header-banner"><img alt="header banner" src="http://example.com/url/to/image-category.jpg" /></div>';
}
add_action('tf_hook_header_end', 'add_banner_header_end');
?>

Run Shortcodes

You can also run shortcodes in the hooks. The example below will add a sample shortcode right after the header area on the homepage only.


<?php
function run_shortcode_layout_before() {
echo do_shortcode('[your_shortcode]');
};
add_action('tf_hook_layout_before', 'run_shortcode_layout_before');
?>

Run PHP Function

Some plugins requires you to add a PHP function call to the template files. Breadcrumb NavXT is one of them. You may use hooks to add PHP function without having to edit the template. The sample below will add the breadcrumb function in the post_start hook of the single post page.


<?php
function breadcrumbs_on_post_start(){
if(function_exists('bcn_display')){
echo '<div class="breadcrumbs">';
bcn_display();
echo '</div>';
}
}
add_action('tf_hook_post_start', 'breadcrumbs_on_post_start');
?>

Additionally, if you would like to trigger this only on single views, you would use:


<?php
function breadcrumbs_on_post_start(){
if( function_exists('bcn_display') && is_single()){
echo '<div class="breadcrumbs">';
bcn_display();
echo '</div>';
}
}
add_action('tf_hook_post_start', 'breadcrumbs_on_post_start');
?>

Available Hooks

Below is a list of all available hooks in the theme:


<body>

<?php tf_hook_body_start(); ?>

<div id="pagewrap">

	<div id="headerwrap">

		<?php tf_hook_header_before(); ?>

		<header id="header">

			<?php tf_hook_header_start(); ?>

			<?php tf_hook_header_end(); ?>

		</header>

		<?php tf_hook_header_after(); ?>

	</div>

	<div id="middlewrap">

		<?php tf_hook_layout_before(); ?>

		<div id="middle" class="pagewidth">

			<?php tf_hook_content_before(); ?>

			<div id="content">

				<?php tf_hook_content_start(); ?>

				<?php tf_hook_post_before(); ?>

				<article class="post">

					<?php tf_hook_post_start(); ?>

					<?php tf_hook_post_end(); ?>

				</article>

				<?php tf_hook_post_after(); ?>

				<?php tf_hook_comment_before(); ?>

				<div class="commentwrap">

					<?php tf_hook_comment_start(); ?>

					<?php tf_hook_commentform_before(); ?>

					<div id="commentform">

						<?php tf_hook_commentform_start(); ?>

						<?php tf_hook_commentform_end(); ?>

					</div>

					<?php tf_hook_commentform_after(); ?>

					<?php tf_hook_comment_end(); ?>

				</div>

				<?php tf_hook_comment_after(); ?>

				<?php tf_hook_content_end(); ?>

			</div>

			<?php tf_hook_content_after(); ?>

			<?php tf_hook_sidebar_before(); ?>

			<div id="sidebar">

				<?php tf_hook_sidebar_start(); ?>

				<?php tf_hook_sidebar_end(); ?>
			</div>

			<?php tf_hook_sidebar_after(); ?>
		</div>

		<?php tf_hook_layout_after(); ?>

	</div>

	<div id="footerwrap">

		<?php tf_hook_footer_before(); ?>

		<footer id="footer">

			<?php tf_hook_footer_start(); ?>

			<?php tf_hook_footer_end(); ?>

		</footer>

		<?php tf_hook_footer_after(); ?>

	</div>

</div>

<?php tf_hook_body_end(); ?>

</body>