How to replace the twentyten image header with my flash banner?

2 Views

I am currently building a site using a child theme for the first time.

Basically, I have a flash banner the client has already had made, and want to replace the twentyten image banner with the flash. I know how to do this by editing the header.php (I think!) but was wondering if there was a better way to do it – using function.php in my child theme perhaps?

Read More

It would be nice if the client could update the theme themselves and not worry about the header being changed back.

Thanks for any contributions.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. A child theme is definitely the way to go for the reason you outlined: upgradability. To start with, here is the documentation for creating child themes: http://codex.wordpress.org/Child_Themes

    You’ll want to create the child theme directory and edit the style.css file as described in the Child Theme documentation link above. After that, simply copy the header.php file from the twentyten directory into the directory and modify it to include the Flash element you have. By copying the header.php to a child theme, it will override the parent theme’s version and be preserved after an update to the parent theme.

    This is the block you want to edit, as it creates the header image:

    <?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && 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' ) ) &&
        $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID );
elseif ( get_header_image() ) : ?>
    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

    I would just delete that entire PHP block, and replace it with the <object> code for your flash element. You’ll want to make sure the flash element is exactly 940 pixels across, though, or it might look strange/break the design.

    The header image PHP block is located on line 68 of my header.php (in the WordPress 3.1 twentyten theme), and it’s located directly below the following:

    <div id="site-description"><?php bloginfo( 'description' ); ?></div>

    Note that this isn’t foolproof. If the twentyten theme gets updated in the future and contains changes you would like to have in the child theme they won’t appear here. However, to add a hook which replaces the image header with a Flash one would require modifying the base theme’s header.php… a bit of a catch 22. In practice this shouldn’t be much of an issue, though. It’s also the best way in WordPress to handle this sort of thing.

    For reference, here are the changes to the file on its Trac page.