Add Image Size in a Twenty Ten Child Theme

I’ve seena few people stumble on this site searching for a way to add a featured/thumbnail image size to their child theme. This is something I needed to do recently, so we will take a look at it. This is also in preparation for tomorrows article where we will add a thumbnail image to the post list page in the admin panel. If we don’t create a new image size, the default header image size gets used, that obviously looks terrible in the list of posts on the admin side. We need nice little thumbnails. Here’s how to do it:

First off, if you recall a while back we had set up an after_theme_setup function in our child theme. This is going to be the best place to add in our image size. So here is the function from that article:

// 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' );

That is our function for overriding twentyten’s default header image size, and we also added in our own default header image. Let’s add in our new featured image/thumbnail size there. First here is the add_image_size code by itself:

add_image_size ( 'admin-thumb', 100, 60, true );

You can obviously use any image sizes you need. And add as many as you want. I just need this one image right now, to be able to use in tomorrow’s tutorial for adding in a thumbnail to the admin panel post list. Let’s take a look at how to add the image size to our voodoochild_setup.

// 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_image_size ( 'admin-thumb', 100, 60, true );

// 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 if you aren’t using this function we set up to modify the header, we still need to put the add image size in properly. It would look like this:

// VOODOOCHILD ADD IMAGE SIZE
function voodoo_add_image_size(){

add_image_size ( 'admin-thumb', 100, 60, true );

}

add_action( 'after_setup_theme', 'voodoo_add_image_size' );

So either way, you need to add the image size inside a hook on after_setup_theme. You have it displayed here either way, with a bunch of other functions, or all alone. Now go get yourself some new image sizes to play with in your theme. You can do a lot of creative stuff with various image sizes. Icons, backgrounds, etc.

Leave a Reply