After making Thirty Ten, my first Twenty Ten Child Theme, Devin Price asked for an example of a child theme that used output buffers.I’m not a big fan of using output buffers in my themes, but it’s a worthwhile trick to have in your bag. There are two main reasons for this:
- It makes code harder to read.
- It makes it so html isn’t being sent immediately to the browser, which often means your loading time increases
That being said, you shouldn’t be afraid to use them. Just make sure you are documenting your code (which you should be doing anyway), and that you are using some sort of caching so you don’t have to regenerate the page on every load (also something you should be doing anyway).
I’m going to do a quick example and show you how to make a twenty-ten child theme that adds a widget area above the image and below the Site title and Description. To do this we are going to start our buffer at wp-head and then use the filters used for the header image as an action to end it and add our widget.
[php]<br><br>add_action(‘wp_head’, ‘head_buffer’);
/**
* Start our buffer and Use filters as actions and add them to end our buffer depending on the header image
*
*/
function head_buffer(){
ob_start();
if ( is_singular() && has_post_thumbnail( $post->ID ) && $width > HEADER_IMAGE_WIDTH ) :
add_filter(‘post_thumbnail_html’, ‘clear_buffer_post_thumbnail’);
else :
add_filter(‘theme_mod_header_image’, ‘clear_buffer_header_image’);
endif;
}
/**
* Our filter is really an action
*
*/
function clear_buffer_header_image($html){
clear_buffer();
return $html;
}
/**
* The Buffer ender. Clear it, add to it, echo it.
*
* Replace the blank space after our site description div with our header widget. This is called by both
* of our action psuedo filters
*/
function clear_buffer(){
$buffer = ob_get_clean();
$header = preg_replace(‘#<div id="site-description">.*</div>#’,"$0".new_header_widget() ,$buffer);
echo $header;
}
function clear_buffer_post_thumbnail($html){
clear_buffer();
return $html;
}
[/php]
Our next step is to register our widget and add a function that will add the content of our widget.
[php]
/**
* This adds the content of our widget. Could we use a new sidebar-*.php file? yes, but it’s easier to keep all of this in one file
*
*/
function new_header_widget(){
ob_start();
?>
<div id="headerwidget" class="widget-area">
<ul class="xoxo">
<?php if ( ! dynamic_sidebar( ‘header-widget-area’ ) ) : // begin Header widget area ?>
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?&>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"&><?php _e( ‘The Maker’, ‘dirtyten’ ); ></h3>
</ul>
<li><a href=’http://aaron.jorb.in’>Wordpress Developer Aaron Jorbin</a> creates themes and plugins for both the masses and the individual</li><br> <li><a href=’http://aaron.jorb.in/thirtyten’>Thirty Ten</a> is a Twenty Ten Child theme designed to teach you how to make child themes</li><br> </ul><br> </li><br><br> <li id="meta" class="widget-container"><br> <h3 class="widget-title"><?php _e( ‘Meta’, ‘twentyten’ ); ?></h3><br> <ul><br> <?php wp_register(); ?><br> <li><?php wp_loginout(); ?></li><br> <?php wp_meta(); ?><br> </ul><br> </li><br><?php endif; // end Header widget area ?><br> </ul><br> </div><!– #headerwidget .widget-area –><br><?<br> $widget_area = ob_get_clean();<br> return $widget_area;<br>}<br><br>add_action( ‘init’, ‘dirtyten_widgets_init’ );<br><br>/**<br>* Register our widget<br>*<br>*/<br>function dirtyten_widgets_init() {<br> // Area 1<br> register_sidebar( array (<br> ‘name’ => ‘Header Widget Area’,<br> ‘id’ => ‘header-widget-area’,<br> ‘description’ => __( ‘The widget area in the Header. Optimized to use three widgets’ , ‘dirtyten’ ),<br> ‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,<br> ‘after_widget’ => "</li>",<br> ‘before_title’ => ‘<h3 class="widget-title">’,<br> ‘after_title’ => ‘</h3>’,<br> ) );<br><br>}<br><br>[/php]
And that’s about it. It’s 111 lines after comments and white space. I’d strongly encourage you to add your own widgets, unless you want to be advertising for me ;).
The only other part is our css to style the widgets. This is also simple:
[css]<br>@import url('../twentyten/style.css');<br><br>#headerwidget{<br>clear:both;<br>width: 100%;<br>}<br><br>#headerwidget ul li{<br>float: left;<br>width: 280px;<br>margin-right: 30px;<br><br>}<br>[/css]
You can check out Dirty Ten, or Download it and use it. You can also clone it from the mercurial repository.