Thematic WordPress Framework Toolbox: 10 Very Helpful Hooks

I have been using the WordPress Thematic theme framework with a child theme for a handful of my last projects. I have put together a list of some of the great functions that I came across. Some of them where fairly easy to come by but a few others took a bit of digging to find the right solutions.

Using a Child theme gives you the full advantage of the Thematic Framework but without having to go into the core and mess things up. You can jump right in and use Thematic as your theme but what if you need to upgrade the this Thematic theme? Well you’re going to lose all of your changes.  Not to mention that it also keeps things clean and very thing in one place.

From ThemeShaper: “First things first: make a file in your Child Theme folder called functions.php and add the PHP opening and closing tags to the first and second line () using your favorite text editor (I use Smultron). Make sure you don’t have any extra lines before or after these tags. We’re going to be inserting the following snippets of code on the lines in-between these tags. Now you’re ready to make your WordPress Child Theme sing.”

Adding a fully customizable menu.

// Add custom child menu.

function childtheme_menu() { ?>
<div id="menu">

<ul>
<li class="<?php if ( is_page('home') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/category/home/" title="projects">Home</a></li>
<li class="<?php if ( is_page('about') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/category/about/" title="design tutorials">About</a></li>
<li class="<?php if ( is_page('inspiration') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/category/inspiration/" title="inspiration">Inspiration</a></li>
<li class="<?php if ( is_page('contact') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/category/contact/" title="online resources">Contact</a></li>
</ul>
</div>
<?php }

add_filter( 'wp_page_menu', 'childtheme_menu' );

Remove default Thematic actions and move the menu above the header

// Remove default Thematic actions and move the menu above the header
 function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}

add_action('init','remove_thematic_actions');

Create a custom access div with the menu and search box

// Create a custom access div with the menu and search box
function search_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>
            <?php childtheme_menu('sort_column=menu_order') ?>
    <form action="http://www.designshifts.com/results" id="cse-search-box">
      <div id="searchform">
        <input type="hidden" name="cx" value="005955267248137649603:yq_a9qfijrs" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" value="" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>

        </div><!-- #access -->
<?php }
add_action('thematic_belowheader','search_access',9);

Add Widget area in header

// Add Widget area in header
function add_header_aside($content) {
        $content['Header Aside'] = array(
                'args' => array (
                        'name' => 'Header Aside',
                        'id' => 'header-aside',
                        'before_widget' => thematic_before_widget(),
                        'after_widget' => thematic_after_widget(),
                        'before_title' => thematic_before_title(),
                        'after_title' => thematic_after_title(),
                ),
                'action_hook'   => 'thematic_header',
                'function'              => 'thematic_header_aside',
                'priority'              => 0,
        );
        return $content;
}
add_filter('thematic_widgetized_areas', 'add_header_aside');

// And this is our new function that displays the widgetized area
function thematic_header_aside() {
        if (is_sidebar_active('header-aside')) {
                echo thematic_before_widget_area('header-aside');
                dynamic_sidebar('header-aside');
                echo thematic_after_widget_area('header-aside');
        }
}

Adding a custom excerpt

// Add filter to the_content
	add_filter('the_content', 'my_excerpts');

function my_excerpts($content = false) {

// If this is the home page, an archive, or search results
	if(is_front_page() || is_archive() || is_search() || is_category()) :
		global $post;
		$content = $post->post_excerpt;

	// If an excerpt is set in the Optional Excerpt box
		if($content) :
			$content = apply_filters('the_excerpt', $content);

	// If no excerpt is set
		else :

			$content = $post->post_content;
			$content = strip_shortcodes($content);
			$content = str_replace(']]>', ']]&gt;', $content);
			$content = strip_tags($content);
			$excerpt_length = 55;
			$words = explode(' ', $content, $excerpt_length + 1);
			if(count($words) > $excerpt_length) :
				array_pop($words);
				array_push($words, ' <a href="'.get_permalink().'" class="read">Read more</a>');
				$content = implode(' ', $words);
			endif;
			$content = '<p>' . $content . '</p>';

		endif;
	endif;

// Make sure to return the content
	return $content;
}

Add a custom post header

// Add a custom post header
function childtheme_postheader() {
    global $post;

    if (is_page()) { ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
    <?php } elseif (is_404()) { ?>
        <h1 class="entry-title">Yikes! Not Found</h1>
    <?php } elseif (is_single()) { ?>
		<h1 class="entry-title"><?php the_title(); ?></h1>
		<div class="entry-meta">
			<span class="author vcard"><?php $author = get_the_author(); ?><?php _e('By ', 'thematic') ?><span class="fn n"><?php _e("$author") ?></span></span>
			<span class="meta-sep">|</span>
			<span class="entry-date"><abbr class="published" title="<?php get_the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('F jS, Y') ?></abbr></span>
		</div><!-- .entry-meta -->
    <?php } else { ?>
		<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf(__('Permalink to %s', 'thematic'), wp_specialchars(get_the_title(), 1)) ?>" rel="bookmark"><?php the_title() ?></a></h2>
		<?php if ($post->post_type == 'post') { // Hide entry meta on searches ?>
		<div class="entry-meta">
			<span class="author vcard"><?php $author = get_the_author(); ?><?php _e('By ', 'thematic') ?><span class="fn n"><?php _e("$author") ?></span></span>
			<span class="meta-sep">|</span>
			<span class="entry-date"><abbr class="published" title="<?php get_the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('F jS, Y') ?></abbr></span>
		</div><!-- .entry-meta -->
		<?php } ?>
    <?php }
}
add_filter ('thematic_postheader', 'childtheme_postheader');

Add a custom post footer

// Add a custom post footer
function childtheme_postfooter() {
    global $post;

    if (is_single()) { ?>
    	<div class="entry-utility">
    		<?php printf(__('Bookmark the <a href="%1$s" title="Permalink to %2$s" rel="bookmark">permalink</a>.', 'thematic'),
    			get_permalink(),
    			wp_specialchars(get_the_title(), 'double') ) ?>

    <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) : // Comments and trackbacks open ?>
    		<?php printf(__('<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'thematic'), get_trackback_url()) ?>
    <?php elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) : // Only trackbacks open ?>
    		<?php printf(__('Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'thematic'), get_trackback_url()) ?>
    <?php elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) : // Only comments open ?>
    		<?php printf(__('Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'thematic')) ?>
    <?php elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) : // Comments and trackbacks closed ?>
    		<?php _e('Both comments and trackbacks are currently closed.') ?>
    <?php endif; ?>
    <?php edit_post_link(__('Edit', 'thematic'), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>"); ?>

    	</div><!-- .entry-utility -->
    <?php } else { ?>
        <?php if ( $post->post_type == 'post' ) { // Hide entry utility on searches ?>
    		<div class="entry-utility">
    			<span class="comments-link"><?php comments_popup_link(__('Leave a comment', 'thematic'), __('1 Comment', 'thematic'), __('% Comments', 'thematic')) ?></span>
                <?php edit_post_link(__('Edit', 'thematic'), "\t\t\t\t\t<span class=\"meta-sep\">|</span>\n<span class=\"edit-link\">", "</span>\t\t\t\t\t"); ?>
    		</div><!-- .entry-utility -->
        <?php } ?>
    <?php }
}
add_filter ('thematic_postfooter', 'childtheme_postfooter');
Adding the post thumbnail to your excerpt by Creating a new index Loop
//* First we will add the thumbnail feature *//
add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts
set_post_thumbnail_size( 200, 200, true ); // hard crop mode

//* To create our own loop we have to get rid of thematic index loop first.*//
function remove_index_loop() {
 remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');

// Now we will create our own loop.
function thumb_index_loop(){
 while ( have_posts() ) : the_post()  // Start the loop:
 // This is just what we decide to show in each post ?>
 <div id="post-<?php the_ID() ?>">
 <div id="post-image"></div>
 <?php thematic_postheader(); ?>
 <div>
 <div style="float:left; margin:0 15px 0 -15px;" ><?php the_post_thumbnail();  // we just called for the thumbnail ?></div>
 <?php the_content(); ?>

 </div>

 <?php thematic_postfooter(); ?>
 </div><!-- .post -->

 <?php

 endwhile; // loop done, go back up
}
// And in the end activate the new loop.
add_action('thematic_indexloop', 'thumb_index_loop');

Create a custom Category Loop

function remove_categoryloop() {
 remove_action('thematic_categoryloop', 'thematic_category_loop');
}
add_action('init', 'remove_categoryloop');

function my_categoryloop() {
while (have_posts()) : the_post(); // Start the loop:
// This is just what we decide to show in each post ?>
 <div id="post-<?php the_ID() ?>">
 <div id="post-image"></div>
 <?php thematic_postheader(); ?>
 <div>
 <div style="float:left; margin:0 15px 0 -15px;" ><?php the_post_thumbnail();  // we just called for the thumbnail ?></div>
 <?php the_content(); ?>

 </div>

 <?php thematic_postfooter(); ?>
 </div><!-- .post -->

 <?php

 endwhile;
}
add_action('thematic_categoryloop', 'my_categoryloop');

Adding Google Analytics

//add google analytics
function ga(){ ?>

<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-0000000-0']);
 _gaq.push(['_trackPageview']);

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>
<?php }
add_action('thematic_footer', 'ga');

?>

Topher

Chris has a real passion for design and loves to share inspiration and tutorials with the design community. He's the curator here at designshifts.com, a freelance web consultant and developer and has a passion for the great outdoors.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. Posted November 9, 2010 at 1:58 pm | Permalink

    Hi
    Nice article.
    I’ve been trying to add a third aside box using your “Add Widget area in header”.
    By using the modified code below in founctions.php, I got my Product Aside in the admin but can’t make it appear in the view.

    // Add Widget area in header
    function add_product_aside($content) {
    $content['Product Aside'] = array(
    ‘admin_menu_order’ => 210,
    ‘args’ => array (
    ‘name’ => ‘Product Aside’,
    ‘id’ => ‘product-aside’,
    ‘description’ => __(‘The product widget area, most often used as a sidebar.’, ‘thematic’),
    ‘before_widget’ => thematic_before_widget(),
    ‘after_widget’ => thematic_after_widget(),
    ‘before_title’ => thematic_before_title(),
    ‘after_title’ => thematic_after_title(),
    ),
    ‘action_hook’ => ‘widget_area_product_aside’,
    ‘function’ => ‘thematic_product_aside’,
    ‘priority’ => 0,
    );
    return $content;
    }
    add_filter(‘thematic_widgetized_areas’, ‘add_product_aside’);

    // And this is our new function that displays the widgetized area
    function thematic_product_aside() {
    if (is_sidebar_active(‘product-aside’)) {
    echo thematic_before_widget_area(‘product-aside’);
    dynamic_sidebar(‘product-aside’);
    echo thematic_after_widget_area(‘product-aside’);
    }
    }

    I know the original code you provide works perfectly so what am I doing wrong? Any idea?

    Thx for your help

    Hugues

    • Topher
      Posted November 9, 2010 at 2:06 pm | Permalink

      So you want to add the content in to the header using an action hook: ‘action_hook’ => ‘thematic_header’,
      If you try replacing:
      ‘action_hook’ => ‘widget_area_product_aside’,
      with
      ‘action_hook’ => ‘thematic_header’,
      you might get what your after.

      Let me know.

  2. Posted November 10, 2010 at 3:56 pm | Permalink

    Thx for your reply.

    Actually I want to add the content in a new Aside (by default you got Primary Aside and Secondary Aside). I would like to add a Product Aside.

  3. Posted February 2, 2011 at 11:25 am | Permalink

    Thanks for the article!

    I have just struggling to set up a new category function which I have done many time before. Reading your article reminded me that I had forgotten to remove the default category loop.

    You helped stop me loosing any more of the hair over this issue :)

One Trackback

  1. [...] http://www.designshifts.com/wordpress-thematic-hooks/ Esta entrada foi publicada em Dicas, Temas, WordPress. Adicione o link permanente aos seus favoritos. ← Anatomy of a Theme Malware [...]

Post a Comment

Your email is never published nor shared. 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>