Introduction to hooks in WordPress

September 30, 2017 By - Usama Muneer | 122

    Introduction

    While developing WordPress themes and plugins, hooks plays an important role by providing a set of WordPress core functions and let developers tie their own code within. In this article, we’ll discover what hooks are & how do we use them, we’ll also go through the different types of hooks by seeing some examples in between.

    How to use Hooks?

    When working with hooks in WordPress, you need to figure out what hook you need to tie your code into and then you’ve to write the code to modify the data you need or run whatever action you need. This might sounds a bit confusing, but you’ll understand the concept.

    Types of Hooks

    Hooks are divided into two sub-categories “Actions” & “Filters“. If you would like to hook in your own functions, the process is quite simple.

    • For Actions, you’ll want to know the name of the hook, as well as when exactly it runs.
    • For Filters, you also need to know the name of the hook, but you want to know what value you are going to get and have to return, as well.
    • Most Importantly, you need the name of the function where you have all your code.

    Action Hooks

    Actions are triggered by specific events that take place in WordPress, such as publishing a post, changing themes, or displaying WordPress admin area. An Action is a custom PHP function defined in your theme or plugin and hooked, i.e. set to respond, to some of these events.

    The Format

    add_action( $hook, $function_to_add, $priority, $accepted_args );

    The required parameters of the add_action function are the hook and function to add. The priority is an optional integer value based on a scale of 1 to 999 that determines the priority of order for functions tied to that specific hook. Higher priority means it runs later, lower priority means earlier. The last parameter is used less often and it is for when you need to pass or accept multiple arguments.

    Example

    The most basic examples of a action hooks, that normally exists in every single WordPress site, are the wp_head and wp_footer action hooks. Both of these are placeholders that are located inside the header of the theme and in the footer of the theme. Typical uses of these two action hooks are to place analytic tracking codes or to add some additional CSS files to a WordPress page

    <?php
       add_action( 'wp_head', 'twt_action_hook_example' );
       function twt_action_hook_example () {
          echo '<meta name="description" content="This is the meta description for the web tier" />' . "";
       } 
    ?>

    Available Action Hooks

    You can see the list of available action hooks on the WordPress codex Website.

    Filter Hooks

    Filters are functions that WordPress passes data through before taking some action with the data (such as adding it to the database or sending it to the browser screen). Filters sit between the database and the browser (when WordPress is generating pages), and between the browser and the database (when WordPress is adding new posts and comments to the database).

    The Format

    add_filter( $tag, $function_to_add, $priority, $accepted_args );

    The add_filter works the same way as add_action. You will also have to be careful because sometimes a hook exists as both an action and a filter, or a filter and a function. You will see the real difference with the actual function you call.

    Remember that, for a filter, the function_to_add both receives a value and has to return it at the end of the function. Actions, on the other hand, simply run the code they need to and don’t return a value.

    Example

    Custom code is added as a filter using the add_filter() function. The following code adds a example-text to the end of each blog post, only for single posts.

    <?php
       add_filter( 'the_content', 'twt_filter_hook_example' );
    
       function twt_filter_hook_example ( $content ) {
          if ( is_single() ) {
             $content .= '<div class="example-text">Hows that?</div>' . "";
          }
          return $content;
       }
    ?>

    The above code adds a new div tag to the end of the content of our blog post, only when on a single blog post screen.

    A filter hook is like using the str_replace() function in PHP. You give it some data, manipulate, replace or reformat the data and return the new content out at the end.

    Available Filter Hooks

    You can see the list of available action hooks on the WordPress codex Website.

    Final Words

    You can play around with the WordPress hooks a bit, try changing and moderating stuff around your website and let us know if you get stuck somewhere in between.Moreover, you can also remove action or filter hooks by using remove_action() and remove_filter() functions.

    remove_action( $tag, $function_to_remove, $priority );
    remove_filter( $tag, $function_to_remove, $priority );

    You can also follow us on Twitter.

    Reference Readings

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    No Related Posts Found