";
print_r($post_excerpt);
print_r($post);
echo "";
}
add_filter("default_excerpt", "my_filter_test");
Variable Hook Names
Remember when we looked at the publish_post action? In fact, this is not used anymore; it was renamed in version 2.3 to {$new_status}_{$post->post_type}. With the advent of custom post types, it was important to make the system flexible enough for them. This new hook now takes an arbitrary status and post type (they must exist for it to work, obviously).
As a result, publish_post is the correct tag to use, but in reality, you will be using {$new_status}_{$post->post_type}. A few of these are around; the naming usually suggests what you will need to name the action.
Who Is Hooked On Who?
To find out which function hooks into what, you can use the neat script below, courtesy of WP Recipes. Use this function without arguments to get a massive list of everything, or add a tag to get functions that are hooked to that one tag. This is a great one to keep in your debugging tool belt!
function list_hooked_functions($tag=false){
global $wp_filter;
if ($tag) {
$hook[$tag]=$wp_filter[$tag];
if (!is_array($hook[$tag])) {
trigger_error("Nothing found for '$tag' hook", E_USER_WARNING);
return;
}
}
else {
$hook=$wp_filter;
ksort($hook);
}
echo '';
foreach($hook as $tag => $priority){
echo "
$tag
";
ksort($priority);
foreach($priority as $priority => $function){
echo $priority;
foreach($function as $name => $properties) echo "\t$name
";
}
}
echo '';
return;
}
Creating Your Own Hooks
A ton of hooks are built into WordPress, but nothing is stopping you from creating your own using the functions we’ve looked at so far. This may be beneficial if you are building a complex plugin intended for wide release; it will make your and other developers’ jobs a lot easier!
In the example below, I have assumed we are building functionality for users to post short blurbs on your website’s wall. We’ll write a function to check for profanity and hook it to the function that adds the blurbs to the wall.
Look at the full code below. The explanation ensues.
function post_blurb($user_id, $text) {
$text = apply_filters("blurb_text", $text);
if(!empty($text)) {
$wpdb->insert('my_wall', array("user_id" => $user_id, "date" => date("Y-m-d H:i:s"), "text" => $text), array("%d", %s", "%s"));
}
}
function profanity_filter($text) {
$text_elements = explode(" ", $text);
$profanity = array("badword", "naughtyword", "inappropriatelanguage");
if(array_intersect($profanity, $text_elements)) {
return false;
}
else {
return $text;
}
}
add_filter("blurb_text", "profanity_filter");
The first thing in the code is the designation of the function that adds the blurb. Notice that I included the apply_filters() function, which we will use to add our profanity check.
Next up is our profanity-checking function. This checks the text as its argument against an array of known naughty words. By using array_intersect(), we look for array elements that are in both arrays — these would be the profane words. If there are any, then return false; otherwise, return the original text.
The last part actually hooks this function into our blurb-adding script.
Now other developers can hook their own functions into our script. They could build a spam filter or a better profanity filter. All they would need to do is hook it in.
Mixing And Matching
The beauty of this system is that it uses functions for everything. If you want, you can use the same profanity filter for other purposes, even outside of WordPress, because it is just a simple function. Already have a profanity-filter function? Copy and paste it in; all you’ll need to do is add the one line that actually hooks it in. This makes functions easily reusable in various situations, giving you more flexibility and saving you some time as well.
That’s All
Hopefully, you now fully understand how the hooks system works in WordPress. It contains an important pattern that many of us could use even outside of WordPress.
This is one aspect of WordPress that does take some time getting used to if you’re coming to it without any previous knowledge. The biggest problem is usually that people get lost in all of the filters available or in finding their arguments and so on, but with some patience this can be overcome easily. Just start using them, and you’ll be a master in no time!
(al)
© Daniel Pataki for Smashing Magazine, 2011.
]]>Video URL: guid; ?>
s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included. Further reading: Safari Developer Library -webkit-box-reflect Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you. It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property. Examples This reflection would be shown under its parent element and have a spacing of 5 pixels: -webkit-box-reflect: below 5px; This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)): -webkit-box-reflect: right 0 url(mask.png); Further reading: Safari Developer Library -webkit-marquee Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping. The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.) Example .marquee { white-space: nowrap; overflow:-webkit-marquee; width: 70px; -webkit-marquee-direction: forwards; -webkit-marquee-speed: slow; -webkit-marquee-style: alternate; } There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text. The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment. Further reading: Safari Developer Library Gecko-Only Properties font-size-adjust Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust. This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise. Example If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes). p { font-family:Verdana, Arial, sans-serif; font-size: 12px; font-size-adjust: 0.58; } Supported by: Gecko. Further reading: Mozilla Developer Network image-rendering A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs. This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to