Twentyten child theme add custom header images

So you need to add your own custom image in the images array of your Twentyten child theme? It’s is not to hard, here we go…

  • Add a functions.php to your child theme directory if you didn’t have one already.
  • Now add this code to your Twentyten child theme functions.php
add_action( 'after_setup_theme', 'my_child_theme_setup' );
 
function my_child_theme_setup() {
 
	define( 'HEADER_IMAGE', get_stylesheet_directory_uri() .'/images/headers/header.jpg' );
	// uncomment the line below to change height of the header
	//define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 100 ) );
 
	function my_child_remove_twenty_ten_headers(){
		unregister_default_headers( array(
			'berries',
			'cherryblossom',
			'concave',
			'fern',
			'forestfloor',
			'inkwell',
			'path' ,
			'sunset')
			);
	}
 
	add_action( 'after_setup_theme', 'my_child_remove_twenty_ten_headers', 11 );
 
        // remove custom header uploads option
	// requires minimal wp 3.1 
	function my_child_remove_custom_header_uploads(){
 
		remove_theme_support( 'custom-header-uploads' );
 
	}
 
	//add_action( 'after_setup_theme', 'my_child_remove_custom_header_uploads', 11 );
}
 
// Add our own custom headers packaged with the child theme.
// Put images in the child theme template directory 'images/headers/'
register_default_headers( my_child_theme_headers() );
 
/* Build the Header Array from the theme headers */
// Just loop through the folder and return a list of images
// No need to add thumbnails as they are created automatic if they don't exist
function my_child_theme_headers() {
	global $themename;
	$list = array();
	$imagepath = STYLESHEETPATH .'/images/headers/';
	$imageurl = get_stylesheet_directory_uri();
	$dir_handle = @opendir($imagepath) or die("Unable to open $path");
 
	while($file = readdir($dir_handle)){
 
		if($file == "." || $file == ".."){continue;}
 
		$filename = explode(".",$file);
		$cnt = count($filename); $cnt--; $ext = $filename[$cnt];
 
		if(strtolower($ext) == ('png' || 'jpg')){
 
			if (!strpos($file, '-thumbnail') > 0) { // exclude thumbnails from list
				if (!strpos($file, '-thumbnail')) { // create thumbnail
					image_resize( $imagepath.$file, 240, 48, true, 'thumbnail');
				}
					$header = array(
						'url' => $imageurl .'/images/headers/' .$file,
						'thumbnail_url' => $imageurl .'/images/headers/' .$filename[0] .'-thumbnail.' .$ext,
						'description' => __( $filename[0], $themename )
					);
					array_push($list, $header);
				}
			}
		}
	return $list;
}
  • Add your custom image to the template directory in /images/headers/. (If you have no ‘images’ directory add one.) We will name the default image header.jpg. Make sure you use the right size for the images. The header image should be 940 x 198 pixels and the thumbnail is created automatic.

So now we are done and end up with only our child theme custom header image(s) showing up in the WordPress admin under Appearance -> Header. If you had already set another image you will have to reset the settings to the default settings. If not the custom header image should show up already.

UPDATE: Now it is possible to hide the upload custom header images if you use WordPress version 3.1. Just un-comment the ‘add_action’ part in function my_child_theme_setup.

11 Reacties

Voeg toe →

naar mijn weten heb ik dat (allemaal) gedaan, maar ’t werkt niet…dan raken we echter op een heel ander onderwerp dan de rotator 🙂

Poging 1 inmiddels achter de rug, maar nog niet gelukt! Probeerde jouw suggesties in het originele twenty ten theme door te voeren, omdat mijn child theme nog niet werkt (weet niet waarom, maar wordt niet zichtbaar in mijn dash board)…dacht eenvoudigweg de orig. images in ‘images/headers’ met die van mij te kunnen vervangen, maar dat pikte ie niet. De header images bleven verwijzen naar de originele paden…waardoor er geen image verscheen (had ik namelijk gedelete)…

Om je child theme te laten werken hoef je alleen een style.css bestand aan te maken in een nieuwe map in wp-content/themes/.

In style.css zet je minimaal het volgende:

/*
Theme Name: Template voor mijn website
Theme URI: http://wordpress.org/
Description: child theme mijn website
Author: mijn Naam
Version: 1.0
Template: twentyten
*/

@import url("../twentyten/style.css");

Dan zou ie wel zichtbaar moeten worden.

Poging 1 achter de rug, maar nog niet gelukt…mijn chid theme werkt namelijk nog niet (wordt niet zichtbaar i/m’n dashboard – waardoor ik getracht heb jouw suggesties via de originele twenty-ten theme door te voeren. Dacht simpelweg mijn images te uploaden in ‘images/headers’ en die van twenty-ten eruit te halen, maar dat ging niet zo makkelijk 🙂 De paden bleven namelijk gewoon naar de originele rotator images wijzen…

Ik heb de plugin getest in WP 3.1 met een child theme van twentyTen en dan werkt de header rotator plugin gewoon. Alleen kun je geen plaatjes uploaden in via de header upload optie. Je moet handmatig (ftp) de plaatjes in de /my-child-theme/images/header/ map zetten. Als je bijvoorbeeld maar 2 plaatjes hebt wisselt het plaatje niet altijd zichtbaar omdat hij er willekeurig een kiest en hij wisselt natuurlijk alleen bij een pagina reload.

Bedankt voor je snelle reactie hrbrt…het nadeel van de rotator is dat je niet je eigen images kunt gebruiken en dat is net wat ik wil 🙂

Geef een reactie