Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

  • Avatar of Bowe
    Bowe
    Participant

    @bowromir

    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)
  • 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.

    Avatar of Bowe
    Bowe
    Participant

    @bowromir

    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 ;)

    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.. ;)

    Avatar of Kevin Pine
    Kevin Pine
    Participant

    @kevinpine

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

    Avatar of qbuster
    qbuster
    Participant

    @qbuster

    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).

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

You must be logged in to reply to this topic.