Site icon WP Smith

How to Add a Default Custom Header to Your Genesis Child Theme

Recently, I needed to add a header that the client may want to be able to change later. So the obvious solution is a custom header that defaulted to whatever I needed to make it. So here's what I did:

[php]
// Add Custom Header
define( 'HEADER_TEXTCOLOR' , 'ffffff'); //change the number to whatever you want
define( 'HEADER_IMAGE' , CHILD_URL . '/images/logo.png');
define( 'HEADER_IMAGE_WIDTH' , 960 ); //change the number to whatever you want
define( 'HEADER_IMAGE_HEIGHT' , 200 ); //change the number to whatever you want

// gets included in the site header
function wps_header_style() {
?><style type="text/css">
#header {
background: url(<?php header_image(); ?>);
}
</style><?php
}

// gets included in the admin header
function wps_admin_header_style() {
?><style type="text/css">
#headimg {
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
background: no-repeat;
}
</style><?php
}

add_custom_image_header( 'wps_header_style', 'wps_admin_header_style' );
[/php]

If you do not want them to be able to change the color of the text then...

[php]
// Add Custom Header
define( 'NO_HEADER_TEXT' , true );
define( 'HEADER_TEXTCOLOR' , '');
define( 'HEADER_IMAGE' , CHILD_URL . '/images/logo.png');
define( 'HEADER_IMAGE_WIDTH' , 960 ); //change the number to whatever you want
define( 'HEADER_IMAGE_HEIGHT' , 200 ); //change the number to whatever you want

// gets included in the site header
function wps_header_style() {
?><style type="text/css">
#header {
background: url(<?php header_image(); ?>);
}
</style><?php
}

// gets included in the admin header
function wps_admin_header_style() {
?><style type="text/css">
#headimg {
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
background: no-repeat;
}
</style><?php
}

add_custom_image_header( 'wps_header_style', 'wps_admin_header_style' );
[/php]