Hooks API

This documentation assumes an audience experienced with WordPress and web development, with intermediate to advanced skills in php, css, html.

Note :The following hooks API is relevant with the Classical style option. For the modern style, it’s recommended to override the template of the block you need to customize, from a child theme.

The Classical / Modern styles option can be set in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


The Customizr theme is entirely built on an extensible filter and action hooks API, which makes customizations safer and easier, without ever needing to modify the core structure. In other words, Customizr’s code acts like a collection of plugins that can be enabled, disabled or extended.

As of today, there are [czr-hooks] hooks (filters and actions) available for developers in the theme.

If you are not comfortable with the WordPress hooks API, you may want to read this excellent beginner’s guide on WordPress hooks written by Electricfeet. More advanced developers will find many working examples of hooks implementation in the Customizr code snippets section of this website.

Note : remember to always use a child theme when you add custom functions to a WordPress theme.

How to use the Customizr hooks API ?

When you really get the concept of filter and action hooks in WordPress, there’s not limit to what you can do. This is how this CMS has been built, around this hook concept. (just look the core code, they are everywhere!), and this is also why it is so popular : hooks make the code very easily extensible, modular and clean.

Now how to use them ?

Instead of re-explaining again the WordPress hooks concept or review the whole WordPress hooks function reference, I will rather use a simple example here.

Note : the code example below has to be pasted in your functions.php file.

 

In the Customizr theme, the header is rendered with functions hooked to one single action hook named : ‘__header’, while the footer is displayed with functions hooked to the action hook named ‘__footer’.

How to remove ( unhook ) all those actions ? With a function called remove_all_actions().

The following code will remove all actions of __header and __footer when displaying a 404 error page.

add_action('template_redirect' , 'set_hooks');
function set_hooks() {
  //the following says : "if the current context is not 404 error, then do nothing (return) "
  if ( ! is_404() )
    return;
  //remove actions
  remove_all_actions('__header');
  remove_all_actions('__footer');
}

Note : As you can see in the snippet above, the hooks are set in the template_redirect action. I could have simply written the following code in functions.php :

remove_all_actions('__header');
remove_all_actions('__footer');

But of course this would have removed the header and footer in all contexts : home, page, single posts,….

If you need to use conditional tags in WordPress (like is_page(), is_home(), is_single(), is_search(), is_404() ) , be aware that most of them use the global $wp_query object. This $wp_query object is generated by WordPress in every pages but bear in mind that the functions.php file is called before the $wp_query is fully built.

In other words, if you write conditional tags in your functions.php file, they will just not work if they are not fire after the $wp_query has been built.

That’s where the hook named template_redirect is useful. The template_redirect hook is run when the $wp_query has been built, you can then use conditional_tags in this hook.

More examples : check the code snippet section.

 

 

Structural actions hooks

General Customizr action hooks structure

 

<html>									
	<?php do_action( '__before_body' ); ?>								
	<body>								
									
		<?php do_action( '__before_header' ); ?>							
		<header>							
			<?php do_action( '__header' ); ?>						
		</header>							
		<?php do_action( '__after_header' ); ?>							
									
		<?php do_action( '__before_main_wrapper' ); ?>						
		<div id="main-wrapper">							
			<?php do_action( '__before_main_container' ); ?>						
									
			<div class="container" role="main">						
				<div class="row column-content-wrapper">					
					<?php do_action( '__before_article_container'); ?>				
					<div id="content" class="article-container">				
						<?php do_action ('__before_loop'); ?>			
							<?php do_action ('__before_article'); ?>		
							<article>		
								<?php do_action( '__loop' ); ?>	
							</article>		
							<?php do_action ('__after_article'); ?>		
						<?php do_action ('__after_loop'); ?>			
					 </div><!--.article-container -->				
					<?php do_action( '__after_article_container'); ?>				
				</div><!--.row -->					
			</div><!-- .container role: main -->						
									
			<?php do_action( '__after_main_container' ); ?>						
		</div><!--#main-wrapper"-->							
		<?php do_action( '__after_main_wrapper' ); ?>							
									
		<?php do_action( '__before_footer' ); ?>							
		<footer id="footer">							
			<?php do_action( '__footer' ); ?>						
		</footer>							
		<?php wp_footer(); ?>							
		<?php do_action( '__after_footer' ); ?>							
	</body>								
	<?php do_action( '__after_body' ); ?>								
</html>

Header action hooks structure

<div class="brand span3"><!-- logo or site title wrapper -->				
	<?php do_action( '__before_logo' ); ?>							
		<a>SITE TITLE OR LOGO</a>						
	<?php do_action( '__after_logo' ); ?>							
</div>								
								
<div class="container outside">	<!--tagline wrapper -->						
	<h2 class="site-description">TAGLINE</h2>							
</div>								
								
<?php do_action( 'before_navbar' ); ?>								
<div class="navbar-wrapper clearfix span9">		
	<div class="navbar notresp row-fluid pull-left">				
	      	<div class="navbar-inner" role="navigation">				
	      		<div class="row-fluid">					
				<?php do_action( '__navbar' ); ?>				
			</div><!-- .row-fluid -->					
		</div><!-- /.navbar-inner -->						
	</div><!-- /.navbar notresp -->							
</div><!-- /.navbar-wrapper -->								
<?php do_action( '__after_navbar' ); ?>

 

Left

<div class="span3 left tc-sidebar">
   <div id="left" class="widget-area" role="complementary">
        <?php do_action( "__before_left_sidebar" );##hook of social icons ?>
          	<!-- Widgets here -->
        <?php do_action( "__after_left_sidebar" ); ?>
    </div><!-- #left -->
</div><!--.tc-sidebar -->

 Right

<div class="span3 right tc-sidebar">
   <div id="right" class="widget-area" role="complementary">
        <?php do_action( "__before_right_sidebar" );##hook of social icons ?>
          	<!-- Widgets here -->
        <?php do_action( "__after_right_sidebar" ); ?>
    </div><!-- #right -->
</div><!--.tc-sidebar -->

 

<div class="container footer-widgets">								
	<div class="row widget-area" role="complementary">			
		
		<?php do_action("__before_footer_widgets") ?>		
		
		<div id="footer_one" class="span4">		
			<?php do_action("__before_footer_one_widgets") ?>	
				<!-- WIDGETS IF ANY -->
			<?php do_action("__after_footer_one_widgets") ?>	
		</div><!-- #footer_one -->		

		<div id="footer_two" class="span4">		
			<?php do_action("__before_footer_two_widgets") ?>	
				<!-- WIDGETS IF ANY -->
			<?php do_action("__after_footer_two_widgets") ?>	
		</div><!-- #footer_two -->

		<div id="footer_three" class="span4">		
			<?php do_action("__before_footer_three_widgets") ?>	
				<!-- WIDGETS IF ANY -->
			<?php do_action("__after_footer_three_widgets") ?>	
		</div><!-- #footer_three -->

		<?php do_action("__after_footer_widgets") ?>

	</div><!-- .row.widget-area -->
</div><!-- .container.footer-widgets -->

<div class="colophon">
	<div class="container">
		<div class="row-fluid">
			<?php do_action( '__colophon' ); ?>
		</div><!-- .row-fluid -->
	</div><!-- .container -->
</div><!-- .colophon -->
  • Header

  • Content

  • Global display

  • Admin/Setup