In a previous post, How to Display a Banner Only on Posts from a Category in WordPress, I showed a simple technique for achieving just this. In short, the steps I took involved making a copy of single.php from the parent theme over to the child theme, and adding a snippet of code. The code checked if the post had been assigned to the desired category, and if so, added the HTML markup needed for the banner ad. Here, I’d like to show a different, cleaner approach to the same problem. Enter WordPress hooks.

What Are WordPress Hooks?
In the WordPress world, hooks are events, for instance, a blog post being displayed, a post comment being saved, etc. A developer can take advantage of specific events taking place in the ordinary life-cycle of a WordPress operation to make specific modifications to suit his/her project. In WordPress parlance, what’s being hooked are Actions and Filters.

According to the WordPress glossary in the Codex

In WordPress, an Action is a PHP function that is executed at specific points throughout the WordPress Core.

Developers can create a custom Action using the Action API to add or remove code from an existing Action by specifying any existing Hook. This process is called “hooking”.

For example: A developer may want to add code to the footer of a Theme. This could be accomplished by writing new function, then Hooking it to the wp_footer Action.

In other words, if you want to add or remove some code to suit a particular design, a great way to do so is by hooking your own code into a WordPress Action, either an Action provided by the WordPress core or by the theme or plugin you’re using. Here’s a list of Action hooks from the WordPress Codex page.

Filters are functions that, like Actions, allow developers to add modifications to a theme in a clean and easy fashion. However, unlike Actions, instead of adding or removing functionality, Filters modify some output that will be returned by the function.

Usually, Filters get fired before a piece of content is saved or displayed. The developer can then add his/her own function that, by taking that content as an argument in the form of a variable, applies its own modifications to it. Subsequently, that piece of content gets returned so that WordPress either saves it or displays it in the modified way.

Here’s how the WordPress Glossary explains the difference between Actions and Filters:

Custom Filters differ from custom Actions because custom Actions allow you to add or remove code from existing Actions. Whereas custom Filters allow you to replace specific data (such as a variable) found within an existing Action.

Click here for a list of WordPress filters contained in the Codex.

Adding a Banner Ad to the Tonal Child Theme
Let’s go back to the task of adding a banner ad on top of the single post page, but only if the post belongs to a specific category. I called my category Category1. As usual, I used my local copy of the Tonal Child Theme.

Instead of copying over single.php from parent to child, like I did in my previous tutorial, I took advantage of a WordPress Action called the_post. Here’s how I went about it.

1 Creating a functions.php file

Adding functionality to a WordPress child theme is appropriately done via a functions.php file. If you need a concrete example of such a file, simply access functions.php from the parent theme, and go over its contents.

2 Adding the Action Code

Here’s the code snippet that needs to go inside the php opening tag <?php:

function tonalchild_banner_before_content ($post_object) {
if (is_singular(‘post’) && in_category (‘category1’)) {?>

This is a banner ad

<?php }
add_action( ‘the_post’, ‘tonalchild_banner_before_content’ );
Here’s what the code sample above does.

It creates a function named tonalchild_banner_before_content. Note how the function name is prefixed with the theme’s name to avoid the risk of potential conflicts with other functions.
A conditional statement in the function checks if we are on a single post page and also if that post belongs to the Category1 category. If both checks return true, then it adds a bit of HTML markup for the banner ad.
But, how does the function know where and when to add that markup? This is where the right Action hook plays a part.

Next, the new function is hooked up to the the_post Action. Why the_post? Here’s what the Codex says about this hook:

The ‘the_post’ action hook allows developers to modify the post object immediately after being queried and setup.

Because I wanted to make a modification to the post, this was quite a good Action to hook up my function to.

3 Check the Result

Finally, it’s time to check the outcome.

No banner is displayed on the posts listing page, no banner is displayed on single post pages when the post doesn’t belong to the Category1 category. However, a nice, big, salmon-colored banner ad gets displayed on the single post page when the post belongs to the Category1 category.

Great, job done!

To Sum Up
Adding small modifications to personalize any WordPress theme can be done in more than one way. Some ways are better than others. Using Action and Filter hooks whenever possible is certainly a clean, future-proof approach to customization, and fully embodies WordPress best practices.


Leave a comment

Your email address will not be published. Required fields are marked *