Introducing “Hooks”
What Are Hooks?
Hooks are specific points in the codebase of a Theme where you can insert your own custom code. They allow you to add new features in specific points without altering the core code of the Theme.
In the previous way, if you want to add HTML meta tag, css or js source in the <head> section, you need to edit theme header.php. as we know, modifying default stock themes is no recommended.
So with “Hooks”, you can insert your own custom code to add new features without touching theme code, except custom.php of course.
Example:
In this example, I want to add “meta keywords” that is not exist by default, the html code of meta keywords is like this:
<meta name="keywords" content="Arcade, Game, HTML5 Game">
In the previous way, you need to put it directly in theme header.php, like this:
With hooks, you can add that meta keywords like this:
function meta_keywords_func(){
echo '<meta name="keywords" content="Arcade, Game, HTML5 Game">';
}
add_to_hook('head_top', 'meta_keywords_func');
Or using anonymous function:
add_to_hook('head_top', function(){
echo '<meta name="keywords" content="Arcade, Game, HTML5 Game">';
});
More robust example with Extra Fields :
function meta_keywords_func(){
global $game;
global $base_taxonomy;
if($base_taxonomy === 'game'){ // Single game page
if($game){
$value = $game->getExtraField('meta_keywords');
if($value){ // Have meta keywords value
echo '<meta name="keywords" content="'.$value.'">';
}
}
}
}
add_to_hook('head_top', 'meta_keywords_func');
You can put these functions in custom.php, or your custom theme functions.php
So, Hooks is just make a simple things become complicated right?
Actually, yes. But with “Hooks”, you can using stock theme and add/insert your custom code and feature without worrying to be overridden during theme update.
Also, with “Hooks,” plugin developers can insert their code features into the theme automatically. Theme developers can also make their themes more flexible and extensible.
If you’re a theme developer, you can put hook points or run specific hook with this:
<?php run_hook('the_hook_key') ?>
‘the_hook_key’ can be ‘after_game_iframe’, ‘before_game_iframe’ or others key you want to name it.
And just to be clear, in the “head” section, it’s not <?php run_hook('head_top') ?> but <?php the_head('top') ?>
Also there are 2 type of head, <?php the_head('top') ?> and <?php the_head('bottom') ?> , the placement is like this:
Hope you’re understand how it works based on screenshot above.
We decide to divide it into 2 part than use single ‘head’ key because in the first place we did not planned to add “Hooks” features so, all meta, link and other head section tags is hardcoded. By divided into 2 position, you can decide to add your custom code in the top or bottom.
You can add hook in the bottom head with this:
<?php add_to_hook('head_bottom', 'meta_keywords_func'); ?>
We use the_head() for head section because we also add default code into it.
As of the date this post is published, “17/09/2023,” none of the stock themes have implemented Hooks, but they will be implemented soon.
Hooks are introduced in CloudArcade v1.6.7
