Understanding Filter Hooks In WordPress

I’m really getting hooked (no pun intended) with theme development in WordPress. Last week I wrote about using action hooks and today we are going to take a look at how filter hooks can help us in building a more flexible WordPress theme.

This tutorial was inspired by Ian Stewart’s Thematic. When I started to research on theme frameworks, I looked at Thematic’s source and I was really overwhelmed at the code. I had no idea where to start and there were more files inside than the usual WordPress theme files that you would normally see. So I decided to just do it and start coding hoping that I would learn them as I go along.

I’ve tried to simplify filter hooks in this tutorial and we’re going to look at one of the functions which is apply_filters() and see how we can make our theme more flexible.

Select Your Theme

For simplicity’s sake we’re going to use and edit the “classic” (wp-content/themes/classic) WordPress theme that is included in every installation. Feel free to follow along if you’re going to use your own theme but be prepared to make some adjustments because markup may slightly vary.

Theme Functions File

As you develop WordPress themes especially with creating child themes you will find that you will have to interact with the theme functions file on a daily basis so try to get comfortable with it.

Open up functions.php inside the classic folder and place this code:

function postheader()
{
	global $id;

	// Create post edit link
    $edit .= ' <a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $edit .= '" title="Edit Post">';
    $edit .= 'Edit This</a>';

	//Build post title
	$title = '<h3 class="storytitle">';
	$title .= '<a href="';
	$title .= get_permalink();
	$title .= '" rel="bookmark">';
	$title .= get_the_title();
	$title .= "</a></h3>\n";

	//Build meta info
	$meta = '<div class="meta">Filed under: ';
	$meta .= get_the_category_list(', ') . " &#8212; ";
	$meta .= get_the_tag_list(__('Tags: '), ', ', ' &#8212; ');
	$meta .= get_the_author() . " @ ";
	$meta .= get_the_time();
	$meta .= $edit;
	$meta .= '</div>';

	//Build postheader
	$postheader = $title . $meta;

	echo apply_filters('postheader', $postheader);
}

We created a function to output HTML by using the apply_filters() function.

We are going to use this function to replace the hard-coded HTML in our template file with our postheader() function.

Flexible Template File

Let’s open up index.php and delete the following markup:

<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>

Then place the following code:

<?php postheader(); ?>

Try to refresh your browser and you shouldn’t see any drastic changes inside your markup and in your design. It’s because all we did is just get the previous markup and put them all inside a function so we can spit the code to our template file.

Customize Using Filters

Here is where all your hardwork will pay off. When you start to build child themes from the “classic” theme for example, you now have the ability to customize the post title and the post meta of your child theme without editing a single template file.

Let’s say we want to add a div around our post title. To do that let’s go back to your functions.php and add the following: (let’s imagine that this is the functions.php of your child theme):

function child_postheader()
{?>
	<div class="post-title"><h2>This is my cuztomized post title!</h2></div>
	<div class="meta">This is my customized meta tag!</div>
<?php }

add_filter('postheader', 'child_postheader');

This time we’re using another filter function which is add_filter to override the design. Refresh your browser and you should see the customizations that you have made. Cool huh?

Why Should I Do This?

You should take this approach if you intend to build a theme framework. Take note that theme frameworks are not just blank or naked wordpress themes like Starkers. Think of them as a parent theme from which you can create child themes. Theme frameworks can speed up development and lets you customize almost any design without touching any of the template files.

I hope you experiment and work on your own themes with the application of actions and filter hooks. Your thoughts and feedback are always welcome. Thanks for stopping by.