Useful Thematic Filters

Posted

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>&copy; %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.

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

24 thoughts on “Useful Thematic Filters

  1. Eugen R. wrote:

    That was useful too. But, any idea why I didn’t get a pingback? I discovered this only via blog stats

    • Devin wrote:

      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.

  2. Great list and love your child theme design, especially the code blocks. Subscribed!

  3. Flick wrote:

    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.

  4. Ari Salomon wrote:

    Great list. I agree – thematic is useful but requires a time investment up front to conquer.

  5. This post is excellent. Well written, clear and super informative.

    Thank you!

  6. kathy wrote:

    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?

    • Devin wrote:

      If they are essential keywords and you don’t have elsewhere on the site, it will have an effect SEO. Good to note.

  7. kathy wrote:

    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.

    • Devin wrote:

      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.

  8. kathy wrote:

    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;
    }

  9. Cool list Devin! Your own Thematic child theme looks very good as well.

  10. Jonny wrote:

    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

  11. blue2x wrote:

    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.

  12. Pingback: How I used the Thematic framework on my blog

  13. Joachim wrote:

    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

    • Devin wrote:

      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.

    • Devin wrote:

      @Joachim I updated the post to show you what that looks like.

  14. Irfan wrote:

    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?

  15. Theodoro Caliari wrote:

    @Devin
    Man, I am very hookie with thematic framework and yours posts helps me a lot! Thanks for share so good information about this framework, wordpress and more! God bless you dude! :)

    Hugs from Brazil!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>