The learning curve on Thematic is a bit steep if you’ve never used filters and hooks before. The Thematic guide is a great place to start, and by looking at the functions files of other released themes I’ve found most of what I need. But here’s my growing list of Thematic filters for easy reference:
Replace the Blog Title with Your Logo
//Replace Blog Title with Your Logo
function remove_thematic_blogtitle() {
remove_action('thematic_header','thematic_blogtitle', 3);
}
add_action('init','remove_thematic_blogtitle');
function child_logo_image() {
//Add your own logo image code
//Here's an example
?>
<h1><a href="/" title=""><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt=""/></a></h1>
<?php
// End Example
}
add_action('thematic_header','child_logo_image', 3);
Add a Search Form to the Header
function add_search(){
include (TEMPLATEPATH . '/searchform.php');
}
add_action('thematic_header','add_search');
Add “Home” to Menu Options
// Add 'Home' Menu Item
function childtheme_menu_args($args) {
$args = array(
'show_home' => 'Home',
'menu_class' => 'menu',
'echo' => true
);
return $args;
}
add_filter('wp_page_menu_args', 'childtheme_menu_args');
Remove Blog Description
//Remove Blog Description
function remove_thematic_blogdescription() {
remove_action('thematic_header','thematic_blogdescription',5);
}
add_action('init','remove_thematic_blogdescription');
Remove the Post Footer
add_filter('thematic_postfooter','my_postfooter');
function my_postfooter() {
// The Sound of One Hand Clapping
}
add_filter('thematic_postfooter','my_postfooter');
Add a Twitter Link Under Each Post
function childtheme_postfooter($output) {
$twitterlink = '<p><a href="http://www.twitter.com/devinsays">Follow me on Twitter</a></p>';
return ($twitterlink . $output);
}
add_filter('thematic_postfooter','childtheme_postfooter');
Add Google Analytics Tracking Code
//Google Analtyics
function analytic_footer() {?>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "XXXXXXX";
urchinTracker();
</script>
<? }
add_filter ('thematic_after', 'analytic_footer');
Add Thumbnail Support
// Add Thumbnail Support for Theme (introduced in 2.9)
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
Change the Footer Message in Your Site to:
“Copyright (Current Year) (Your Blog Name) | (Link to Admin Page) | (Link to RSS)”
// Generate footer code
function childtheme_footer($thm_footertext) {
$date = date('Y');
$blog_name = get_bloginfo('name');
$admin_url = get_bloginfo('wpurl') . '/wp-admin';
$entries_rss = get_bloginfo('rss2_url');
$thm_footertext = sprintf(
'<p>© %s %s | <a href="http://wptheming.com/2009/10/useful-thematic-filters/">Site Admin</a> | <a href="http://wptheming.com/2009/10/useful-thematic-filters/">Entries RSS</a></p>',
$date, $blog_name, $admin_url, $entries_rss);
return $thm_footertext;
}
add_filter('thematic_footertext', 'childtheme_footer');
Add a Favicon
function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');
Removing Plug-In Code
A lot of times plug-ins will insert unnecessary stylesheets and scripts. Here’s some filters to remove some of that cruft in popular plug-ins. Although it’s listed here under Thematic filters, you can use the following code on any WordPress site.
// Remove Page Navi CSS
function childtheme_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles', 100 );
Removing and Renaming Widget Areas
This feature is in the trunk version of Thematic. It should be publicly released when WordPress 2.9 comes out, but you can download it via SVN if you want to get a jump on it. For a more detailed tutorial on widget areas with Thematic read this post in the forums.
/* Defining Widget Areas */
function remove_widget_areas($content) {
unset($content['1st Subsidiary Aside']);
unset($content['2nd Subsidiary Aside']);
unset($content['3rd Subsidiary Aside']);
unset($content['Index Top']);
return $content;
}
add_filter('thematic_widgetized_areas', 'remove_widget_areas');
function rename_widgetized_areas($content) {
$content['Primary Aside']['args']['name'] = 'Sidebar';
$content['Index Bottom']['args']['name'] = 'Home Content';
return $content;
}
add_filter('thematic_widgetized_areas', 'rename_widgetized_areas');
Disable Header Scripts
If you’re not using drop down menus, no need to load the header scripts.
function childtheme_remove_scripts() {
remove_action('wp_head','thematic_head_scripts');
}
add_action('init', 'childtheme_remove_scripts');
Other Resources
If you’ve ever been to the Thematic forums, you’ve no doubt noticed Christopher Goßmann’s awesome presence. Here’s his code snippets for changing/styling layouts.
Design Notes has a few snippets, some of which I added to this list.
Here’s 6 Useful Thematic Snippets for related posts, linkable post images, and removing default scripts and stylesheets.
If you’re interested in using non-standard web fonts, check out this article for How to Add Typekit to your Thematic Child Themes
Thanks to Justin Tadlock for the PageNavi CSS removal code.
That was useful too. But, any idea why I didn’t get a pingback? I discovered this only via blog stats
Hey Eugen. Pingbacks are enabled, so I’ll have to look into it. But I’m glad you found the site. Thanks again for your post.
Great list and love your child theme design, especially the code blocks. Subscribed!
I used the footer code. Thanks for sharing!
I have found this page through WPatch.com and think it is incredibly useful! Thanks for also linking to other resources as well for reference.
Great list. I agree – thematic is useful but requires a time investment up front to conquer.
This post is excellent. Well written, clear and super informative.
Thank you!
I noticed that in your framework when you replace the blog title w/ a logo you also remove the blog description completely instead of just hiding it. Do you think there is any SEO loss when you don’t have that h tag?
If they are essential keywords and you don’t have elsewhere on the site, it will have an effect SEO. Good to note.
Well what if you set the logo to be the background image of the title link, and then set the text-indent on the blog-description ? I might try that later… except then how do you set the width and height attributes of the title link? Hmmm… the image is definitely easier in that sense. Idk either if that’d be considered spam by the SEO gods as most of the time that description is part of the graphic, and is the legit blog description anyway.
Hey Kathy. When I get a chance I’ll update the child theme to mirror how WooThemes does it:
<div id=”logo”>
<a href=”#” title=”#”><img src=”logo.png” /></a>
<h1><a href=”#”>Site Title Hidden</a></h1>
<span>Site Description Hidden</span>
</div><!– /#logo –>
As a side note, anything that’s set to display:block; can get a height and width.
I altered your admin-panel-functions.php file to include the code below. Basically it keeps the logo img that you had, but also puts the blog-title (in a span) and the blog description back in.. except that if there is a logo detected in the Options panel, then they both get a class=”hide” so they can be thrown off the page. For SEO, which one gets the h1 tag probably depends on what your site description and site names are relative to your keywords but to stay sane for right now I just went w/ how Thematic currently handles it.
/*
* Replace Blog Title with Logo
*/
function add_childtheme_logo() {
global $my_shortname;
$logo = get_option($my_shortname . '_logo');
if (!empty($logo)) {
remove_action('thematic_header','thematic_blogtitle', 3);
remove_action('thematic_header','thematic_blogdescription',5);
add_action('thematic_header','childtheme_logo', 3);
add_action('thematic_header','child_blogdescription',5);
}
}
add_action('init','add_childtheme_logo');
function childtheme_logo() {
global $my_shortname;
$logo = get_option($my_shortname . '_logo');
if (!empty($logo)) { ?>
<a href="/" title="" rel="home"><img src="/scripts/timthumb.php?src=&w=600&zc=1" alt="" />
<?php
}
}
and then for style I just had to style the hide class. this is probably overkill, but i wanted the thing gone! i
.hide{
text-indent: -9999px;
margin-left: -9999px;
height:0;
overflow: hidden;
}
Cool list Devin! Your own Thematic child theme looks very good as well.
Its my understanding that if your site uses the s.e.o plugin (which many do) you do not have to worry about logo code replacing blog title
Cool tips, used the disable header scripts and favicon tips in my blog. I just have a question though. Most thematic websites have like google page speed score of 70 to 80. The page speed suggests that I enable compression, on the jquery.js file, you think its a good idea to compress this file and other files as well? I mostly edit the style.css file only.
Try installing the WC3 total cache plugin. Cached files should load quicker than dynamic ones- and it has options for js and css compression. You can also try removing js files that aren’t needed on every page: http://wptheming.com/2009/12/optimize-plug-in-script-wordpress/
Pingback: How I used the Thematic framework on my blog
Actually I handled to replace the Blog Title, but I can not insert the LOGO :-(
function child_logo_image() {
//Add you logo image code
Could you tell me an example for the logo image code? If i use the html code I got an unexpected error.
Thanks a lot
Joachim
Just paste in an image tag. Make sure you you close the php tags if you are pasting straight html, or escape the quotes if you use echo instead.
@Joachim I updated the post to show you what that looks like.
It looks like bloginfo(‘template_url’) is calling up the parent (the actual Thematic theme). What would be the workround if you wanted to keep images in the child theme folder?
bloginfo(‘stylesheet_url’)
http://codex.wordpress.org/Function_Reference/bloginfo
I think you mean:
bloginfo(‘stylesheet_directory’)
The stylesheet_url grabs the actual style.css location.
Thanks for the post by the way.