• I’m attempting to customize the Twenty Ten theme. I’d like to use a different header for my pages. I’m using the one column page design. Which files should I edit and how to use a header on these pages that’s not as tall as the default?

    Thanks in advance for your advice.

    –jody.

Viewing 3 replies - 1 through 3 (of 3 total)
  • First of all, if you are altering the twentyten theme you simply must do it in a child theme. That said, you can manage most aspects of your header image from Dashboard –> Appearance –> Header. Certainly, that’s all you need in order to specify a different header image globally.

    It won’t help you if you want to specify a different header for pages rather than posts, though, and it won’t help you change the size of the image container.

    The output of the header image HTML in twentyten is determined by the following code in header.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; ?>

    The constants HEADER_IMAGE_HEIGHT and HEADER_IMAGE_WIDTH are set in fuctions.php:

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

    As you can see, the comments tell you how you can change those. Or you could just edit header.php in your child theme, of course. This makes the size change globally, though.

    To make changes to the header image dependent on whether it’s a page or a post, you need to use a conditional tag, as demonstrated in the first code example from twentyten shown above.

    If this child theme is going to be solely a matter for you (and perhaps your company/employers) you may be prepared to go in for much more in the way of hard coding values rather than setting constants and/or calling functions to determine values at runtime.

    For example if you want one image for posts and one image for pages and they are different sizes, you might simply create an if() statement in header.php to determine whether you’re dealing with a page or a post and then simply hard code the image tag, with appropriate height and width attributes, in each branch, perhaps just using bloginfo('stylesheet_url')/images or whatever to get the path to your image.

    HTH

    PAE

    Thread Starter jodyrrr

    (@jodyrrr)

    Hello P.

    Thanks for taking the time to reply. Putting a few lines of code in header.php sounds like the best solution. Do you have any suggestions as to what the if() statement would be. I’m sorely lacking in understanding of code, I confess.

    Thanks.

    –jody.

    It really depends on what condition you’re testing for

    ??

    But to try to be a bit more helpful, you could take a look at the documentation for conditional tags. Pick the one(s) that is/are appropriate for you.

    I’d also just like to stress again that it is very important that you create a child theme before you do anything else (if you haven’t done so already) and that you copy header.php to your child theme and edit it there and not in twentyten. The link to the documentation for child themes is in my previous post above.

    HTH

    PAE

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Ten inside page header question’ is closed to new replies.