Child Themes / header.php

  • I have read the documentation available at Child Themes, Templates

    It promises that “your child theme can overwrite any file in the parent theme: simply include a file of the same name in the child theme directory, and it will overwrite the equivalent file in the parent theme directory.“

    Parent Theme: TwentyTwelve (v1.1)
    Child Theme: TwentyTwelve-child (an original name thunked-up by me)

    ? Given: if I copy my parent header.php to header.php.BAK, make specific changes to the parent theme’s header.php, the changes work on the site when TwentyTwelve is activated.

    ? Given: I move the modified header.php from my parent into my child, and rename parent’s original and untouched header.php.BAK to header.php.

    ? I activate my child theme, TwentyTwelve-child, which now contains the modified and “it worked when it was a parent” header.php.

    ? Results: the promise of my child’s header.php overwriting (or more precisely, overriding) my parent’s header.php fails to be realized. The changes don’t occur.

    Insert proverbial and oft heard “HELP!” followed by “pretty please?” and a grateful and heart-felt”Thank you!”

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You copy header.php from your parent theme and paste it into your Child Theme (no renaming) and then modify header.php (in your Child Theme).

    Thread Starter krashtestdumby

    (@krashtestdumby)

    Which is, if you read my first post again, exactly what I did. And it doesn’t work!

    Basically… If I move it back to the parent, make the parent active, it works. If I move it back to the child, it doesn’t work.

    Which is the problem.

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

    Thread Starter krashtestdumby

    (@krashtestdumby)

    Okie dokie. I did some more research using Araxis Merge to compare rendered output. Keeping it as short as possible…

    When I add my code to the parent header.php, I get the following output in the rendered page:

    <style type="text/css" id="custom-background-css">
body.custom-background { background-color: #e6e6e6; }
</style>
<style type="text/css">
body.custom-background {
... my code goes here ...
}
</style>
</head>

    When I reset the parent to its normal header.php, and move my changes to the child header.php, this is what gets output in the rendered page:

    <style type="text/css">
body.custom-background {
... my code goes here ...
}
</style>
</head>

    So, I copied the missing 3 lines of code rendered by the parent when my changes are in the parent header.php, into my child’s header.php, reset the parent header.php to the original copy and voila! It works!

    Shouldn’t be that way. But, that’s the way it is. And Bob’s your uncle!

    CSS changes go in the child theme style.css file, not the header.php file.

    Thread Starter krashtestdumby

    (@krashtestdumby)

    Oh, and before anyone asks…

    In both TwentyTwelve and my child, I currently have the Background Image set to No Image. However, once upon a time, TwentyTwelve did have a Background Image set to an image. So I suspect a setting somewhere gets toggled that generates those missing 3 lines of code from then until the cows come home.

    I’ll do some more tinkering with the child after lunch, and get back to you…

    Please post a link to your site for CSS help.

    what are you trying to achieve with the edited code?
    what code did you edit or add in haeder.php (not the rendered lines, but the lines that seem to make problems)?

    did you also set the custom background (dashboard – appearance – background) while the child theme was active?

    Thread Starter krashtestdumby

    (@krashtestdumby)

    CSS changes in the parent wernt working. Probably because it generates those 3 lines of code even though I don’t have a background image set, and they were preventing y desired CSS changes from working.

    Which is why I went to modifying header.php to get my desired changes. E.G.:

    <style type="text/css">
body.custom-background {
background: #a359a5; /* Old browsers */

background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), -moz-linear-gradient(top,  #a359a5 0%, #ffffff 16%, #000000 17%, #000000 18%, #ffffff 19%, #a359a5 100%); /* FF3.6+ */
background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a359a5), color-stop(16%,#ffffff), color-stop(17%,#000000), color-stop(18%,#000000), color-stop(19%,#ffffff), color-stop(100%,#a359a5)); /* Chrome,Safari4+ */
background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), -webkit-linear-gradient(top,  #a359a5 0%,#ffffff 16%,#000000 17%,#000000 18%,#ffffff 19%,#a359a5 100%); /* Chrome10+,Safari5.1+ */
background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), -o-linear-gradient(top,  #a359a5 0%,#ffffff 16%,#000000 17%,#000000 18%,#ffffff 19%,#a359a5 100%); /* Opera 11.10+ */
background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), -ms-linear-gradient(top,  #a359a5 0%,#ffffff 16%,#000000 17%,#000000 18%,#ffffff 19%,#a359a5 100%); /* IE10+ */
background-image: url('https://mydomain.com/wp-content/uploads/2013/08/hbg_purple41.png'), linear-gradient(to bottom,  #a359a5 0%,#ffffff 16%,#000000 17%,#000000 18%,#ffffff 19%,#a359a5 100%); /* W3C */
background-repeat: repeat-x; background-position: top left; background-attachment: fixed;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a359a5', endColorstr='#a359a5',GradientType=0 ); /* IE6-9 */

}
</style>
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Child Themes / header.php’ is closed to new replies.