Padd Solutions » header image http://www.paddsolutions.com We provide premium quality WordPress themes, tools, inspirations and functional web solutions to business owners and bloggers. Thu, 02 Feb 2012 10:08:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 How to Add a Custom Header Image http://www.paddsolutions.com/how-to-add-custom-header-image/ http://www.paddsolutions.com/how-to-add-custom-header-image/#comments Fri, 01 Apr 2011 03:57:27 +0000 Dulce http://www.paddsolutions.com/?p=915 Hazy Halo is a WordPress theme that is similar to the popular Twenty Ten theme. Among the best features of Hazy Halo are the ability to customize the header image and highlight the Site Name. The header of your site is very important because it is the first thing that visitors see and it gives a lasting impression on them. It is one of the easiest ways to capture the attention of your target audience. This tutorial will guide you on how to create a theme like Hazy Halo which you can add a custom header image.

Step 1. Create a directory for your default header images.

Ideally, this would be in the images directory of your theme, i.e. %s/images/headers. Variable %s is a placeholder for your theme directory URI.

Step 2. Add the following code to functions.php file.

Note: This code was taken from Twenty Ten’s functions.php file.

add_action( 'after_setup_theme', 'padd_theme_header_setup' );
 
if ( ! function_exists('padd_theme_header_setup') ):
 function padd_theme_header_setup() {
 add_theme_support( 'post-thumbnails' );
 define( 'HEADER_IMAGE', '%s/images/headers/default-header.jpg' );
 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 920 ) );
 define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 225 ) );
 set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 define( 'NO_HEADER_TEXT', true );
 add_custom_image_header( '', 'padd_theme_header_img_style' );
register_default_headers( array (
 'film' => array (
 'url' => '%s/images/headers/film.jpg',
 'thumbnail_url' => '%s/images/headers/film-thumbnail.jpg',
 'description' => __( 'Film', 'yourtheme' )
 ),
 'pills' => array (
 'url' => '%s/images/headers/pills.jpg',
 'thumbnail_url' => '%s/images/headers/pills-thumbnail.jpg',
 'description' => __( 'Pills', 'yourtheme' )
 )
 ) );
 }
 endif;
 
if ( ! function_exists( 'padd_theme_header_img_style' ) ) :
 function padd_theme_header_img_style() {
 ?>
<style type="text/css">
   	#header-img {
   		height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
  		width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
   	}
 	#header-img img {
 		border: 0;
 		padding: 0;
 	}
 	#header-img h1, #header-img #desc {
 		display: none;
 	}
 </style>
<?php
}
endif;
 ?>

This code will create a Header tab in the Appearance panel of your Dashboard which allows users to preview the default header image, upload an image from their computer, or select from the gallery of default header images packed with Hazy Halo. Aside from the customized header image, this code also utilizes post thumbnails on single post pages.

Header Image Admin Options

Header Image Admin Options

Here is a brief discussion of the code:

The add_action() function hooks a function on to a specific action.

add_action( 'after_setup_theme', 'padd_theme_header_setup' );

This line tells WordPress to run padd_theme_header_setup() when after_setup_theme finishes its execution.

function padd_theme_header_setup() {
 add_theme_support( 'post-thumbnails' );
 define( 'HEADER_IMAGE', '%s/images/headers/default-header.jpg' );
 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 920 ) );
 define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 225 ) );
 set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 define( 'NO_HEADER_TEXT', true );
 add_custom_image_header( '', 'padd_theme_header_img_style' );

The first line allows your theme to register support for the post thumbnails feature. This allows Hazy Halo to use a post-thumbnail in single posts that is big enough to replace the default header image. On the next line, you set the path of your default header image. In this code, default-header.jpg in the headers directory is set as the header image.

Next, the width and height of the header image are defined. If the image that is uploaded by the user is larger than the defined width and height, it is automatically cropped to the specified width and height. In this code, the header image’s width and height are set to 920px and 225px respectively.

NO_HEADER_TEXT is also set to true because we don’t want to allow changing the header text color. An additional styling for the Site Name is included in Hazy Halo and will be explained later in this tutorial.

You can also add a way for the custom header to be styled in the admin panel through the add_custom_image_header() function, which calls padd_theme_header_img_style.

The second set of code registers the default header images that are packaged with Hazy Halo, namely film.jpg and pills.jpg. You have to modify this code and place your header images and their corresponding thumbnails in the %s/images/headers/ directory.

The third set of code defines the css style for the header image in the admin panel of your dashboard. You don’t have to make any modifications to this code.

Step 3. Add the following code to your header.php file.

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

The header-img section of the page is defined by this code. It checks if the following are true:
a. the page being displayed is a singular post or a page.
b. the post has a thumbnail
c. the post-thumbnail is of the same size or larger than the defined header image width.

If all of these are true, then the post-thumbnail is set as the header image. Otherwise, the default header image is displayed.

Step 4. Create the header.css file for styling the Site Name.

/* = Header, Blog Title and Slogan.
 --------------------------------------------------- */
div#header {
       position: relative;
 }
 div#header-pad {
      height: 225px;
      width: 920px;
      margin: 0 auto;
 }
 div#header h3 {
     display: none;
 }
 div#header .box-masthead {
     float: left;
 }
 div#header .box-masthead .title {
     display: block;
     position: absolute;
     top: 117px;
     left: 0px;
     bottom: 0px;
     background: #fff;
     opacity: 0.8;
     width: 920px;
     z-index: 89;
     margin: 0 0 0 20px;
     padding: 0;
     overflow: hidden;
 }
 div#header .box-masthead .title a {
     display: block;
     margin: 0;
     padding: 30px;
     width: 1000px;
     height: 98px;
     outline: none;
     color: #4a3f2d;
     text-shadow: 0 -1px #000;
     font-size: 45px;
     font-weight: normal;
     line-height: 49px;
     text-decoration: none;
}
 div#header .description {
     display: none;
 }
 div#header .header-img img {
     border: 0;
     padding: 0;
 }

The position of the title is absolute and it starts 117px from the top (about half of the header image). The background color is set to white (#fff) and its opacity is 0.8 so that the title will be highlighted but the header image can still be seen. The title (site name) width is set to 920px and overflow is hidden to cater long titles. Here is an example of a header image with the highligted site name.

Sample header

Header Image with Highlighted Site Name

 

 

No related posts.

]]> http://www.paddsolutions.com/how-to-add-custom-header-image/feed/ 0 WordPress Theme: Little Secret http://www.paddsolutions.com/wordpress-theme-little-secret/ http://www.paddsolutions.com/wordpress-theme-little-secret/#comments Fri, 18 Apr 2008 09:25:51 +0000 Dulce http://www.paddsolutions.com/?p=20
  • WordPress Theme: Trendy Cork
  • WordPress Theme: Lazy Day
  • WordPress Theme: Freedom Wall
    • ]]>     Little Secret is a clean design, valid xhtml and css WordPress theme with 2 columns sidebar. This SEO friendly theme has valid xhtml and css. It is cross-browser compatible with IE, FF, Opera, Flock and Safari. It is easy to customize and tested with WordPress version 2.5.

    Little Secret

    Download Little Secret

    Little Secret theme was made possible in collaboration with Fotobuch, Fruity Web Directory and WordPress Themes Gallery.

    Related posts:

    1. WordPress Theme: Trendy Cork
    2. WordPress Theme: Lazy Day
    3. WordPress Theme: Freedom Wall

    ]]>     http://www.paddsolutions.com/wordpress-theme-little-secret/feed/ 0