Additional Post Formats For TwentyTen Child Theme, And Post Formats in General

EDIT: I recently found out a better way to add post formats to a Twenty-Ten child theme, scroll to the bottom of the post to check it out!

As we announced yesterday, WordPress 3.1 was released. Hopefully you have all upgraded by now. If not, get to it. Remember to always keep your install up to date with the latest release. Not just for the cool new features, but for security too. Anyway, if you recently upgraded to 3.1, you may be asking yourself the same question as I see others asking. Where are my post formats? WordPress 3.1 promised lots of different post formats, where are they? Let’s answer that question and tell you how to get them going if you don’t have them.

First thing to realize, post formats are a theme feature. Your theme needs to activate theme. So if you are using the TwentyTen theme, the only post formats available to you are Aside and Gallery (and Standard). But this isn’t too hard to remedy. We’re going to add in post format support for themes in general first. Then we will cover adding additional post formats to a twentyten child theme.

First up, the general stuff. Adding post formats to a theme is very easy to do. First visit the codex entry and decide which ones you would like to add from the available list. It’s simply one line of code added to you functions.php file:

//THEME SUPPORT FOR POST FORMATS
add_theme_support( 'post-formats', array( 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) );

You may not need or want them all. Here’s my line of thinking. I activate them all. I can assign posts to them if I want. I don’t have to style them all. But this way they are available. Down the road if I want to style them, my appropriate posts are already assigned to the formats. If I don’t style them, they look like normal posts, so nothing changes. And if I switch to a new theme that has these formats activated and styled, it’s like I planned ahead! Really the ones you activate and use are up to you.

OK, so that was the easy part. Now lets move on to adding additional formats to the twentyten theme by way of a child theme. If you’ve been following along with our customization tutorials so far for twentyten child themes, you know we already have a function set up to customize the header. Mine is called voodoochild_setup in the example, and it runs on after_setup_theme. For some reason just adding in additional post formats to this function doesn’t work. I tried and tried. So we have to do some copying from the twentyten theme here. We need to grab the entire twentyten_setup function from twentyten’s functions.php and copy it to our child theme. So take all this:

function twentyten_setup() {

	// This theme styles the visual editor with editor-style.css to match the theme style.
	add_editor_style();

	// Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories.
	add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

	// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

	// Add default posts and comments RSS feed links to head
	add_theme_support( 'automatic-feed-links' );

	// Make theme available for translation
	// Translations can be filed in the /languages/ directory
	load_theme_textdomain( 'twentyten', TEMPLATEPATH . '/languages' );

	$locale = get_locale();
	$locale_file = TEMPLATEPATH . "/languages/$locale.php";
	if ( is_readable( $locale_file ) )
		require_once( $locale_file );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
	) );

	// This theme allows users to set a custom background
	add_custom_background();

	// Your changeable header business starts here
	if ( ! defined( 'HEADER_TEXTCOLOR' ) )
		define( 'HEADER_TEXTCOLOR', '' );

	// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
	if ( ! defined( 'HEADER_IMAGE' ) )
		define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

	// We'll be using post thumbnails for custom header images on posts and pages.
	// We want them to be 940 pixels wide by 198 pixels tall.
	// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

	// Don't support text inside the header image.
	if ( ! defined( 'NO_HEADER_TEXT' ) )
		define( 'NO_HEADER_TEXT', true );

	// Add a way for the custom header to be styled in the admin panel that controls
	// custom headers. See twentyten_admin_header_style(), below.
	add_custom_image_header( '', 'twentyten_admin_header_style' );

	// ... and thus ends the changeable header business.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'berries' => array(
			'url' => '%s/images/headers/berries.jpg',
			'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Berries', 'twentyten' )
		),
		'cherryblossom' => array(
			'url' => '%s/images/headers/cherryblossoms.jpg',
			'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Cherry Blossoms', 'twentyten' )
		),
		'concave' => array(
			'url' => '%s/images/headers/concave.jpg',
			'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Concave', 'twentyten' )
		),
		'fern' => array(
			'url' => '%s/images/headers/fern.jpg',
			'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Fern', 'twentyten' )
		),
		'forestfloor' => array(
			'url' => '%s/images/headers/forestfloor.jpg',
			'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Forest Floor', 'twentyten' )
		),
		'inkwell' => array(
			'url' => '%s/images/headers/inkwell.jpg',
			'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Inkwell', 'twentyten' )
		),
		'path' => array(
			'url' => '%s/images/headers/path.jpg',
			'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Path', 'twentyten' )
		),
		'sunset' => array(
			'url' => '%s/images/headers/sunset.jpg',
			'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Sunset', 'twentyten' )
		)
	) );
}

And paste it into your functions.php in your child theme. I put it above my customized function for modifying the header. I recommend you do the same. Now here’s the thing. This is kind of a pain, since we made our custom function to override portions of this very function we are now placing into our child theme. But, this does give you options. Let’s talk about them.

You can just paste this twentyten_setup function in your child functions.php and edit the post formats portion and leave it at that. Your override custom function you made earlier will continue to work. That’s the route I took. Or you can delete your custom function and make those edits directly in the twentyten_setup now that it is in your child theme. You are able to add your default header image and tweak the sizes directly here. It’s up to you. Like I said I kept my custom function and just tweaked the format line.

To add new post formats, just edit line 7 to add in your own. I’m just going to add in a link post format. Here is my final code in my functions.php with twentyten_setup in place, with my post format added to it, and also with my custom voodoochild_setup in place with our previous customizations.

function twentyten_setup() {

	// This theme styles the visual editor with editor-style.css to match the theme style.
	add_editor_style();

	// Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories.
	add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link' ) );

	// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

	// Add default posts and comments RSS feed links to head
	add_theme_support( 'automatic-feed-links' );

	// Make theme available for translation
	// Translations can be filed in the /languages/ directory
	load_theme_textdomain( 'twentyten', TEMPLATEPATH . '/languages' );

	$locale = get_locale();
	$locale_file = TEMPLATEPATH . "/languages/$locale.php";
	if ( is_readable( $locale_file ) )
		require_once( $locale_file );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
	) );

	// This theme allows users to set a custom background
	add_custom_background();

	// Your changeable header business starts here
	if ( ! defined( 'HEADER_TEXTCOLOR' ) )
		define( 'HEADER_TEXTCOLOR', '' );

	// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
	if ( ! defined( 'HEADER_IMAGE' ) )
		define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

	// We'll be using post thumbnails for custom header images on posts and pages.
	// We want them to be 940 pixels wide by 198 pixels tall.
	// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

	// Don't support text inside the header image.
	if ( ! defined( 'NO_HEADER_TEXT' ) )
		define( 'NO_HEADER_TEXT', true );

	// Add a way for the custom header to be styled in the admin panel that controls
	// custom headers. See twentyten_admin_header_style(), below.
	add_custom_image_header( '', 'twentyten_admin_header_style' );

	// ... and thus ends the changeable header business.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'berries' => array(
			'url' => '%s/images/headers/berries.jpg',
			'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Berries', 'twentyten' )
		),
		'cherryblossom' => array(
			'url' => '%s/images/headers/cherryblossoms.jpg',
			'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Cherry Blossoms', 'twentyten' )
		),
		'concave' => array(
			'url' => '%s/images/headers/concave.jpg',
			'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Concave', 'twentyten' )
		),
		'fern' => array(
			'url' => '%s/images/headers/fern.jpg',
			'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Fern', 'twentyten' )
		),
		'forestfloor' => array(
			'url' => '%s/images/headers/forestfloor.jpg',
			'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Forest Floor', 'twentyten' )
		),
		'inkwell' => array(
			'url' => '%s/images/headers/inkwell.jpg',
			'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Inkwell', 'twentyten' )
		),
		'path' => array(
			'url' => '%s/images/headers/path.jpg',
			'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Path', 'twentyten' )
		),
		'sunset' => array(
			'url' => '%s/images/headers/sunset.jpg',
			'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Sunset', 'twentyten' )
		)
	) );
}


// VOODOOCHILD SETUP FUNCTION FOR ADJUSTING HEADER STUFF
function voodoochild_setup(){

// OVERRIDE TWENTYTEN HEADER SIZE
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 1010 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 228 ) );

// ADD IN OUR CUSTOM HEADER IMAGES TO DEFAULT
    $voodoochild_dir =    get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'voodoopress' => array (
            'url' => "$voodoochild_dir/images/voodoopress.jpg",
            'thumbnail_url' => "$voodoochild_dir/images/voodoopressthumb.jpg",
            'description' => __( 'VoodooPress Default', 'voodoochild' )
        )

    ));

}

add_action( 'after_setup_theme', 'voodoochild_setup' );

And that’s it. Our customized headers still work, and we have the link post format added. This is the only way I’ve found so far to make this work. If I find something better in the future, we will revisit this issue. Like I’ve stated before, I want to keep my copying and pasting from the parent theme to a minimum and just use actions, filters, or whatever wherever possible.

Don’t forget our article from a while back about organizing your functions.php. One thing you may want to do with that twentyten_setup is put it in its own file, and just include it near the top of your child functions.php.

Of course this only activates the formats. You still have tonnes of options for using/styling them. I have an article on my blog I wrote before starting VoodooPress explaining what I did. But here on this site, I reall only have edited style.css of my child theme to lend some styling to the formats. You have tonnes of options available which are beyond the scope of this particular article.

Whatever you do, play around, have fun, and we’ll tweak some more real soon!

UPDATE: I asked the question over on stack exchange, and I was right. There is a better and less code intensive way to do this. Let’s check it out. First off, we will leave our existing voodoochild_setup function alone. I have experimented with trying to adjust the priority of it, and that makes the existing code fail. So we will leave that alone and make a new code for functions.php:

add_action( 'after_setup_theme', 'voodoochild_formats', 11 );
function voodoochild_formats(){
     add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link' ) );
}

You can see it looks just like the action we added earlier for voodoochild_setup. The only difference is the addition of the number 11. This changes the priority of our function to run after twentyten’s own twentyten_setup, so it overrides it. We can’t change the priority of voodoochild_setup to 11 and have it work though. So we simply have two different actions. But it’s far less code than bringing the entire twentyten_setup on board!

Leave a Reply to bettiekg1 Cancel reply

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