Support » Fixing WordPress » Header Image

  • Hi..
    New to wordpress, but not to webdesign and php.
    Just getting familiar with the default 20/10 theme and I am struggling to find the code that loads the header image.. I have searched both the style.css and header.php files in the 20/20 folder but cannot find the code.. I know the image name and location but where is the code that loads this image?
    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    <?php
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    							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, 'post-thumbnail' );
    					else : ?>
    						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    					<?php endif; ?>

    btw:
    modifications to Twenty Ten will be overwritten with the next update of wp;
    it is recommended to create a child theme: http://codex.wordpress.org/Child_Themes

    alchymyth beat me to it 🙂

    Hi
    Thanks for your input , but I still do not understand..
    Firstly I guess its a page as its the page that first loads when I enter the site.
    But if I want to change the image or if I want to call the image and position with css how do I achieve this.. I cannot see where?
    I know how to place and position the image within css, but how do I remove the call to the exisiting header image?
    Below is the relevant bit from header.php
    ——-
    <div id=”header”>
    <div id=”masthead”>
    <div id=”branding” role=”banner”>
    <?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1’ : ‘div’; ?>
    <<?php echo $heading_tag; ?> id=”site-title”>
    <span>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>
    </span>
    </<?php echo $heading_tag; ?>>
    <div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>

    <?php
    // Check if this is a post or page, if it has a thumbnail, and if it’s a big one
    if ( is_singular() &&
    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, ‘post-thumbnail’ );
    else : ?>
    <img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />
    <?php endif; ?>
    </div><!– #branding –>

    <div id=”access” role=”navigation”>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class=”skip-link screen-reader-text”>“><?php _e( ‘Skip to content’, ‘twentyten’ ); ?></div>
    <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
    </div><!– #access –>
    </div><!– #masthead –>
    </div><!– #header –>
    Thanks again

    Michael

    (@alchymyth)

    Forum Moderator

    it might help if you could describe what you would like to achieve.

    in style.css of the theme, the css style for the image is:

    /* This is the custom header image */
    #branding img {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }

    and there is an option under ‘dashboard’ ‘appearance’ ‘header’

    Are you trying to hide the header image using css?

    If that’s what you’re trying to achieve, then here is what you’ll have to do:

    In your css file, look for this code:

    #branding IMG
    {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	clear: both;
    	display: block;
    }

    replace the display: block;
    with display: none;

    Hi..
    What I would like to do is place a smaller image as a header graphic.
    Thanks

    Michael

    (@alchymyth)

    Forum Moderator

    you can change the header images size, which will be used by the ‘header’ option in ‘appearance’, in functions.php of the theme:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
    	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header Image’ is closed to new replies.