Topic: How can I replace the default header image with my own in a Child theme?

How can I replace the default header image with my own in a Child theme?

Bowe
Participant

@bowromir

14 years, 9 months ago
Hi,

I’m building my own Child Theme and I want to replace the default header image with my own. I see that the default header functions are put in functions.php:
```
/* Set the defaults for the custom header image (http://ryan.boren.me/2007/01/07/custom-image-header-api/) */

define( 'HEADER_TEXTCOLOR', 'FFFFFF' );

define( 'HEADER_IMAGE', '%s/_inc/images/default_header.jpg' ); // %s is theme dir uri

define( 'HEADER_IMAGE_WIDTH', 1250 );

define( 'HEADER_IMAGE_HEIGHT', 125 );
```
I want these to be replaced with my own constants in my child themes functions.php without having to modify the original functions.php.

Is this possible and if so, how do I do this?

Thanks in advance guys

Viewing 5 replies - 1 through 5 (of 5 total)

Jean-Pierre Michaud
Participant

@nexia

14 years, 9 months ago

you can see here how i did it…

http://smalah.com/

http://smalah.com/ecole/

… you just need the CSS file for your child theme, and you add this:

#header {

background: url( style/default_header.jpg) !important;

height: 155px;

} /* i made the height bigger as i wanted to add the logo below search box… */

I use the exact same theme for the whole site, with a dozen of blogs… so how i did it is simple… i edit the header.php and add this just above the </head> as in this demo:

<?php wp_head(); ?>

<?php

global $blog_id;

echo ‘<style type=”text/css”>

@import url( http://smalah.com/wp-content/themes/smalah/style/style_’ . $blog_id . ‘.css );

</style>

‘;

?>

</head>

and the file related to that function contain this:

#header {

background: url(header_1.jpg) !important;

}

… this is overriding the header image… with the !important thing…

but there is a logical problem.. we usually use !important to override a prefered css style, but it is actually used all over the place inside the 1.2 theme, making it illogically used.

Bowe
Participant

@bowromir

14 years, 9 months ago

Ah great nexia, I did not think about using the !important css attribute.. I wish their was a cleaner way, but this will do for now Thanks

Jean-Pierre Michaud
Participant

@nexia

14 years, 9 months ago

if you do not edit anything else than the header, you do not need the step 3, you edit the step 2 to make it fit..

Kevin Pine
Participant

@kevinpine

14 years, 8 months ago

You can upload a custom header image right from the admin UI. In the Appearance section there is a Custom Header option.

qbuster
Participant

@qbuster

14 years, 7 months ago

Yes there is, Unfortunately it doesn’t work (and has been reported as a bug but the issue appears to have been closed without resolution).