So, I figured that tweaking the Thematic WordPress theme that I recently selected as the basis for my blog would present no challenge whatsoever. I mean, it’s PHP, right? Well, yeah, but …
The stumbling block
Child themes and the filter system. Period. I don’t think I’ve ever stumbled across a less-intuitive design. (Admittedly, this post is less about filters and more about hooks and actions, but filters bend the mind as soon as the average person encounters them.)
The author(s) of the theme have posted a fairly-useful guide to customization here, but there’s still a bit of grokking and head-scratching required if this is new to you. Of course, once you “get it”, it’s easy — just like most other abstract concepts. So, let’s dive right in assuming you have set up your child theme according to the example that Thematic provides, and you’ve activated it.
One foot in front of the other
First, you’ll need to create a custom function to remove (undo?) the default thematic_access() action in the thematic_header() hook. Add this bit to your child theme’s functions.php file:
|
1 2 3 4 5 |
// Remove the default page-level nav
function remove_thematic_access($content) {
remove_action('thematic_header', 'thematic_access', 9);
}
add_action('init', 'remove_thematic_access'); |
If you were to save now and view your blog, you’d see that the navigation bar is missing entirely. Good. You’re half way there.
Now, it’s a matter of creating a custom action and inserting it into the thematic_header() hook in the same position as the action you just removed (which is what that '9' is all about.) Add this to your functions.php file:
|
1 2 3 4 5 6 7 8 9 10 |
// Create category-level nav
function custom_childtheme_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>">< ?php _e('Skip to content', 'thematic'); ?></a></div>
<div class="menu">
<ul class="sf-menu sf-js-enabled">< ?php wp_list_categories('title_li='); ?></ul>
</div>
</div><!-- #access -->
< ?php }
add_action('thematic_header', 'custom_childtheme_access', 9); |
Save and voila. If you’re curious about some of those magick words, the Google machine is your best bet.
The finish line
Granted, there may be a more shorthand way to do this (e.g., the hardcoded CSS styles?), but this seems to work for me.
For more context, following is a tidbit from the authors’ wiki listing the available hooks and actions. As always, I hope this helps someone. Cheers!
The following theme hooks can be used to modify Thematic through your Child Theme functions.php file or even a custom plugin.
Theme Hooks
thematic_before()
Located in header.php just after the opening body tag, before anything else.
thematic_aboveheader()
Located in header.php just before the header div.
thematic_header()
This hook builds the content of the header div and loads the following actions:
| Action | Position Number |
|---|---|
| thematic_brandingopen() | 1 |
| thematic_blogtitle() | 3 |
| thematic_blogdescription() | 5 |
| thematic_brandingclose() | 7 |
| thematic_access() | 9 |
thematic_belowheader()
Located in header.php just after the header div.
thematic_abovecomments()
thematic_abovecommentslist()
thematic_belowcommentslist()
thematic_abovetrackbackslist()
thematic_belowtrackbackslist()
thematic_abovecommentsform()
thematic_show_subscription_checkbox()
thematic_belowcommentsform()
thematic_show_manual_subscription_form()
thematic_belowcomments()
thematic_abovemainasides()
thematic_betweenmainasides()
thematic_belowmainasides()
thematic_abovefooter()
thematic_after()
Cool Man. I will be using these later on! Thanks!