Understanding Filter Hooks In WordPress

11 June 2009 ~ 17 Comments

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.

17 Responses to “Understanding Filter Hooks In WordPress”

  1. SlicedCate 11 June 2009 at 4:41 pm Permalink

    Love the idea! Been getting into WordPress and been needing to mess with templates alot. Will try this out see if it can save some time – thanks :)

  2. JamesD 11 June 2009 at 9:31 pm Permalink

    Thanks for the useful info. It’s so interesting

  3. Lucas 11 June 2009 at 10:48 pm Permalink

    WordPress is so complex yet so simple; little tweaks like this make it fun to learn code. I never thought i would say that. Evar. Thanks for the insight.

  4. Raymond Selda 11 June 2009 at 11:13 pm Permalink

    @SlicedCate: You have two options. It’s either you choose an existing theme framework like Thematic or ThemeHybrid and take some time learning how to customize them or you could build your own framework which can really take a lot of time but in the end you could learn a lot more on theme development.

    @JamesD: You’re always welcome. Thanks for the comment.

    @Lucas: So true. WordPress just keeps getting better and better. Thanks for the comment.

  5. Flex Guy 12 June 2009 at 12:08 am Permalink

    very nice article…keep on the good work

  6. joded 3 July 2009 at 1:44 pm Permalink

    Nicely article

  7. Paul 16 February 2011 at 12:59 am Permalink

    Very interesting article. I never quite understood the role of filter in WP until now.

  8. sergio 5 October 2011 at 2:00 am Permalink

    I can’t see how the code in child_postheader() function would wrap the title generated by the postheader()function.

    If that filter is ment to wrap something else, I don’t see the ralation between both codes.

  9. SPeed_FANat1c 4 January 2012 at 6:11 pm Permalink

    could you explain please, why this does not work for me (I am oveeriding core, not theme function)

    add_filter(‘get_comment_reply_link’, ‘mano_get_comment_reply_link’, 1, 3);

    function mano_get_comment_reply_link($args = array(), $comment = null, $post = null) {

    echo ‘override’;

    global $user_ID;

    $defaults = array(‘add_below’ => ‘comment’, ‘respond_id’ => ‘respond’, ‘reply_text’ => __(‘Atsakyti’),
    ‘login_text’ => __(‘Log in to Reply’), ‘depth’ => 0, ‘before’ => ”, ‘after’ => ”);

    $args = wp_parse_args($args, $defaults);

    if ( 0 == $args['depth'] || $args['max_depth'] comment_post_ID;
    $post = get_post($post);

    if ( !comments_open($post->ID) )
    return false;

    $link = ”;

    if ( get_option(‘comment_registration’) && !$user_ID )
    $link = ‘‘ . $login_text . ‘‘;
    else
    $link = “comment_ID ) ) . “#” . $respond_id . “‘ onclick=’return addComment.moveForm(\”$add_below-$comment->comment_ID\”, \”$comment->comment_ID\”, \”$respond_id\”, \”$post->ID\”)’>$reply_text“;
    //return apply_filters(‘mano_comment_reply_link’, $before . $link . $after, $args, $comment, $post);
    //echo apply_filters(‘mano_comment_reply_link’, $before . $link . $after, $args, $comment, $post);
    echo $before . $link . $after;
    }

    I simply want change text of the reply link on comment.

  10. SPeed_FANat1c 4 January 2012 at 9:14 pm Permalink

    Found the solution:

    there is callback function named custom_comment

    you can create in functions.php function with this name and there print the comment look yourself.

    In it you will use something like this:

    ‘Atsakyti’ ,’depth’ => $depth, ‘max_depth’ => $args['max_depth']))) ?>

    there as you see is array with parameters, and one of them is reply_text, enter you text and should work :)

  11. SPeed_FANat1c 4 January 2012 at 9:15 pm Permalink

    oh, some of the code is hidden in the comment, so its not that usefull :( I hope I will post it later in my website


Leave a Reply