Documentation

Canvas Custom Hooks: Examples

Needed

Minimum Requirements: Canvas V5.x
Keep the Canvas Hook/Filter Reference on hand, as it will come in handy using the techniques explained below.

The Canvas Hook Manager provides an intuitive user interface for adding custom text, HTML and shortcodes at any of the many custom hook points provided by Canvas. This could be extremely useful for adding social icon shortcodes below each blog post, adding a notice DIV tag to the header of your website, or almost any use you could think of. Sometimes, however, you’d only need to display something on a specific page, or you need a slightly more advanced hook for a specific action. In this tutorial, we’ll explain how to create your own custom hooks to be used in place of the Hook Manager’s field for a specific hook. As mentioned above, Canvas provides a vast array of custom hook points, which are all listed in our Canvas Hook and Filter Reference. To “hook on” to a function, you’ll need:

The label of the hook you want to hook onto (for example, `woo_loop_after`).
A function which we’ll use to display your custom content.
An `add_action()` line to perform the “hooking”.

The basics

↑ Back to top

As mentioned in the list above, our example will use the `woo_loop_after` hook. This could easily be `woo_post_after` or `woo_footer_before`. They all function in the same way. Now that we know where we want the new content to display, lets move on to creating our custom function for adding the content. The basic skeleton of the function looks as follows:

<?php
    function woo_hook_content_loop_after () {
        $content = '';
        echo $content;
    } // End woo_hook_content_loop_after()
?>

The above function creates an empty variable called `$content` and then runs `echo` to display that variable’s content. Thus, whatever you assign to `$content` will display on the screen. Another option, if you’re more comfortable simply with HTML and don’t want to edit the code to work within PHP (this code may be a JavaScript advert code, for example), would be as follows:

1

2

3

4

5

6

7

<?php
    function woo_hook_content_loop_after () {
?>
<div id="test-code">This is my custom code. Replace this DIV tag with your code.</div><!--/#test-code-->
<?php
    } // End woo_hook_content_loop_after()
?>

Advanced logic

↑ Back to top

Up until now, the cases mentioned and code snippets provided could easily be achieved by using the Canvas Hook Manager instead. We want to something more advanced, right? Right. Let’s assume that the code we want to execute is a simple banner advert, and that we only want to display it after all the posts have been listed on our category archives. Lets start by assembling the necessary pieces we require in order to compile this code: Our advertising code

1	`<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg"` `/></a>`

Our function skeleton

1

2

3

4

5

6

7

<?php
    function woo_hook_content_loop_after () {
?>
<div id="test-code">This is my custom code. Replace this DIV tag with your code.</div><!--/#test-code-->
<?php
    } // End woo_hook_content_loop_after()
?>

Combining the above two snippets, we achieve the following result:

1

2

3

4

5

6

7

<?php
    function woo_hook_content_loop_after () {
?>
<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg" /></a>
<?php
    } // End woo_hook_content_loop_after()
?>

This simply displays the advert code after each loop (homepage, archives, search, etc). If this is what we’re after, we can stop here. However, we want a little bit more that that, so let’s continue. WordPress contains several Conditional Tags which can be used to determine when do display content or perform specific actions. In this case, we only want the content to display at the bottom of category archives, so we use the `is_category()` conditional tag. This would look as follows:

<?php
    function woo_hook_content_loop_after () {
        if ( is_category() ) {
?>
<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg" /></a>
<?php
        } // End IF Statement
    } // End woo_hook_content_loop_after()
?>

The final step we need to do is to tell WordPress to look for our new function when it reaches the `woo_loop_after` hook point. This is done using the `add_action()` function, as follows:

1

2

3

<?php
    add_action( 'woo_loop_after', 'woo_hook_content_loop_after', 12 );
?>

The last setting, `12`, is the priority setting. Adding multiple hooks to the same hook point and changing this priority value allows you to control the order in which your custom functions are executed. We’ve now added an advert to the end of a category archive, using a custom hook and a few short lines of code in your theme’s `functions.php` file. As can be seen, this process can be used to achieve almost anything you’d desire, by simply combining your custom code with a small PHP function and some WordPress conditional tags. The finished result should look like this, following the above example:

The result produced using a custom hook in Canvas.

Finished code snippets

↑ Back to top

<?php
    add_action( 'woo_loop_after', 'woo_hook_content_loop_after', 12 );
    function woo_hook_content_loop_after () {
        if ( is_category() ) {
?>
<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg" /></a>
<?php
        } // End IF Statement
    } // End woo_hook_content_loop_after()
?>

Taking this code further

↑ Back to top

As mentioned above, it’s possible to take this code snippet as far as you desire. With some knowledge of PHP and how WordPress constructs each page, it’s possible to harness the power of a WordPress query. In the example below, we’ll display the advert code after the third blog post on category archives.

<?php
    add_action( 'woo_post_after', 'woo_hook_content_post_after', 12 );
    function woo_hook_content_post_after () {
        global $wp_query;
        $current_count = $wp_query->current_post + 1;
        if ( is_category() && ( $current_count == 3 ) ) {
?>
<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg" /></a>
<?php
        } // End IF Statement
    } // End woo_hook_content_post_after()
?>

&& is PHP’s way of saying “and”. Let’s take this even one step further and display the advert code after every second blog post, and only on search results screens.

<?php
    add_action( 'woo_post_after', 'woo_hook_content_post_after_search', 12 );
    function woo_hook_content_post_after_search () {
        global $wp_query;
        $current_count = $wp_query->current_post + 1;
        if ( is_search() && ( $current_count % 2 == 0 ) ) {
?>
<a href="https://woocommerce.com/"><img src="https://woocommerce.com/ads/468x60b.jpg" /></a>
<?php
        } // End IF Statement
    } // End woo_hook_content_post_after_search()
?>

Using % is PHP’s way of saying “remainder” (modulus). “$current_count % 2 == 0″ checks if the value currently stored in $current_count is a multiple of 2.