Monthly Archives: April 2010

I’m speaking at WordCamp Chicago

I am speaking at WordCamp Chicago 2010

I’m excited to announce that I’m going to be headed to my childhood home metropolitan area to speak at WordCamp Chicago (and not just because it is happening only a few blocks from Mr. Beef on Orleans) . I’ll be presenting a talk entitled Building Child Themes that will be geared toward helping beginning developers take the next step in their child theme development, and solidify best practices for intermediate and advanced developers.  The talk will take place at 2:00pm and is part of the developer track.

I haven’t decided exactly what areas I’ll be addressing, but I plan to draw upon the Thirty Ten and Dirty Ten themes published on this site and the Thematic Theme Options theme that I’ve been working on recently. As I write my talk over the next month, you’ll find more information here. You can can follow my WordPress Feed if you’re looking to keep up to date on it. If you have any specific child theme questions that you’d like for me to address, please comment below.  Chicago, I can’t wait to see you!

Tweets from the week before 2010-04-26

Dirty Ten, a Twenty Ten Child Theme using Output Buffers

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:

  1. It makes code harder to read.
  2. 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.

<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-&gt;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('#&lt;div id="site-description"&gt;.*&lt;/div&gt;#',"$0".new_header_widget() ,$buffer);
	echo $header;
}

function clear_buffer_post_thumbnail($html){
	clear_buffer();
	return $html;
}

Our next step is to register our widget and add a function that will add the content of our widget.

/**
* 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>
					&lt;li&gt;&lt;a href='http://aaron.jorb.in'&gt;Wordpress Developer Aaron Jorbin&lt;/a&gt; creates themes and plugins for both the masses and the individual&lt;/li&gt;<br>					&lt;li&gt;&lt;a href='http://aaron.jorb.in/thirtyten'&gt;Thirty Ten&lt;/a&gt; is a Twenty Ten Child theme designed to teach you how to make child themes&lt;/li&gt;<br>				&lt;/ul&gt;<br>			&lt;/li&gt;<br><br>			&lt;li id="meta" class="widget-container"&gt;<br>				&lt;h3 class="widget-title"&gt;&lt;?php _e( 'Meta', 'twentyten' ); ?&gt;&lt;/h3&gt;<br>				&lt;ul&gt;<br>					&lt;?php wp_register(); ?&gt;<br>					&lt;li&gt;&lt;?php wp_loginout(); ?&gt;&lt;/li&gt;<br>					&lt;?php wp_meta(); ?&gt;<br>				&lt;/ul&gt;<br>			&lt;/li&gt;<br>&lt;?php endif; // end Header widget area ?&gt;<br>			&lt;/ul&gt;<br>		&lt;/div&gt;&lt;!-- #headerwidget .widget-area --&gt;<br>&lt;?<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' =&gt; 'Header Widget Area',<br>		'id' =&gt; 'header-widget-area',<br>		'description' =&gt; __( 'The widget area in the Header.  Optimized to use three widgets' , 'dirtyten' ),<br>		'before_widget' =&gt; '&lt;li id="%1$s" class="widget-container %2$s"&gt;',<br>		'after_widget' =&gt; "&lt;/li&gt;",<br>		'before_title' =&gt; '&lt;h3 class="widget-title"&gt;',<br>		'after_title' =&gt; '&lt;/h3&gt;',<br>	) );<br><br>}<br><br>

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:

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

You can check out Dirty Ten, or Download it and use it.  You can also clone it from the mercurial repository.

Tweets from the week before 2010-04-12