Step by step guide to making a TwentyTen child theme

Step 3: Let’s modify the structure

If layout or structure changes are needed, we can make changes to individual templates. Let’s start with the header. I would prefer to have a cleaner layout and would like to remove the banner image.

To do this we need to make a copy of the header.php in your child theme and make edits to it.

In the header.php template, you will notice that lines 68 to 96 is the piece of code that displays the header if there is one.
That code looks like this:

<?php
	// Compatibility with versions of WordPress prior to 3.4.
	if ( function_exists( 'get_custom_header' ) ) {
		// We need to figure out what the minimum width should be for our featured image.
		// This result would be the suggested width if the theme were to implement flexible widths.
		$header_image_width = get_theme_support( 'custom-header', 'width' );
	} else {
		$header_image_width = HEADER_IMAGE_WIDTH;
	}

	// Check if this is a post or page, if it has a thumbnail, and if it's a big one
	if ( is_singular() &amp;amp;&amp;amp; current_theme_supports( 'post-thumbnails' ) &&
			has_post_thumbnail( $post->ID ) &&
			( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &amp;amp;&amp;amp;
			$image[1] >= $header_image_width ) :
		// Houston, we have a new header image!
		echo get_the_post_thumbnail( $post->ID );
	elseif ( get_header_image() ) :
		// Compatibility with versions of WordPress prior to 3.4.
		if ( function_exists( 'get_custom_header' ) ) {
			$header_image_width  = get_custom_header()->width;
			$header_image_height = get_custom_header()->height;
		} else {
			$header_image_width  = HEADER_IMAGE_WIDTH;
			$header_image_height = HEADER_IMAGE_HEIGHT;
		}
	?>
		<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
	<?php endif; ?>

Simply delete these lines and the banner will vanish.

Comments on posts make sense to me, but I’ve never understood the need for comments on pages, so let’s get rid of these.

Looking at the page.php in the Twenty ten theme, we can see that it calls a file called loop-page.php which in turn calls the comments. Make a copy of the loop-page.php, add it to your child theme and delete the the following line of code:

<?php comments_template( '', true ); >

Voila, your child theme no longer displays comments on it’s pages.

Finally let’s also remove the links to previous and next posts above our posts. The ones at the bottom are sufficient.

<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-above -->

These links are located in our loop.php and loop-single.php files which are used in our index.php and single.php templates.

Making a copy of the loop.php and loop-single.php to our theme we can delete the following code:

<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-above -->