WordPress have done a lot of the work for us in version 3.00, and have created the setting of headers for posts and pages, all we have to do is offer the option to our theme users, so lets add support for the new headers feature.
In part one we looked at creating a child theme for an existing Artisteer theme, in part two we added the changes in WordPress version 3 for menu functions, in part three another nice little function is the new backgrounds, WordPress has a lot more header support and applying these changes from the admin panel.
You can download the example Parent theme Here : Example 2.4 Theme (2435)
You can download the example Child theme part 2-4 Here: Artisteer Theme Upgrade Part 2-4 (976)
If you have been following this series of tutorials you will have your child theme, download the Child Theme part 2-4 file and replace the file called functions.php, and copy the images folder to your child themes folder.
We have moved all the setup functions into a function and we will look at what you need to change for a different theme.
Next we are telling WordPress where our header.jpg file has been moved to, we have created this folder as we wil be adding multiple headers in the next tutorial, but for now we are only giving the Admin the abaility to change the theme header, or upload a header to any post or page using the WordPress standard thumbnail support.
For a legacy theme you should find these lines and change the width and height to match your themes header.jpg, the one you have copied across to /images/headers/ this is used to resore the default image
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI. define( 'HEADER_IMAGE', get_bloginfo('stylesheet_directory') .'/images/headers/header.jpg' ); // Add the width and height of your header image here define( 'HEADER_IMAGE_WIDTH', apply_filters( $childthemename .'_header_image_width', 874 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( $childthemename .'_header_image_height', 225 ) );
In the header.php we have added code betwwen the art-header-jpg Div
<div class="art-header-jpeg"> <?php // Start Twenty Ten theme code - 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 >= 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; // End Twenty Ten theme code - Check if this is a post or page, if it has a thumbnail, and if it's a big one ?> </div>
Visit the admin panel and look at Appearance > Header and we have a new section where we can upload a new header image.
When you select a new header WordPress will crop the image to size, so if the header images are slightly larger there is no problem, in the images folder of this part download you will find the header and background used in this tutorial.
When we select Crop and Publish we have the new header installed and we can visit the website.
Pretty cool we have a new look and feel, but there is more, we added thumbnail support for our headers, so on any page or post I can show a custom header, when you edit a post or page there is an option to ‘set featured image’, we will use page 2 and upload our default header.
Now when we load Page 2 the header is updated with our custom header.
Now you have custom headers in your Legacy Artisteer theme.
Page Background: Butterfly Background 02
New Header: Created with XHeader (free version available)
Code Samples: Twenty Ten Theme
Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.
All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.
You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.
This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.