Child theme: custom template files break styling

  • Resolved oweskeez

    (@oweskeez)


    8 years, 5 months ago

    Hello,

    I have created a child theme using the exact instructions this link provides:

    https://codex.www.ads-software.com/Child_Themes

    But when I add my custom header.php and footer.php to the child theme to override the header and footer of the parent, all styling on the site breaks. The header and footer markup is displayed but with no styling AND the styling for the unedited body section also breaks. The link above clearly states:

    “if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.”

    I have done just that, included my own header/footer.php in child directory, and it is displayed on my site but with no styling, and the rest of the styling for the unedited body section is also broken.

    I can include relevant code snippets upon request, but seeing as there is no need to call these files in functions.php or anywhere else, I feel this may not be necessary.

    Thanks a lot and sorry if this is a stupid question.

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

  • what is the full code of your header.php and footer.php?

    Thread Starter oweskeez

    (@oweskeez)

    Hey Michael,

    Here is my header:

    <nav>
  <img id="nav-logo" src="../images/logo.png" alt=""/>
  <ul id="nav-links">
    <li><a href="../index.php">Home</a></li>

<!--services-dropdown-->
    <li>
      <a href="../services/services.php">Services<i class="fa fa-caret-down" aria-hidden="true" style="padding-left: 5px;"></i></a>
        <ul class="services-dropdown">
          <li><a href="../services/services.php?0" id="show-design">Design</a></li>
          <li><a href="../services/services.php?1">Drawing</a></li>
          <li><a href="../services/services.php?2">Prototyping</a></li>
        </ul>
    </li>
<!--services-dropdown-->

    <li><a href="../pricing/pricing.php">Pricing</a></li>
    <li><a href="../shop">Shop</a></li>
    <li><a href="../team/team.php">Team</a></li>
    <li><a href="../gallery/gallery.php">Gallery</a></li>
    <li><a href="../contact/contact.php" id="contact-link">Contact</a></li>
  </ul>
</nav>

<!--mobile-nav-->
        <button class="hamburger">☰</button>
        <button class="cross">˟</button>
        <div class="menu">
          <ul>
                <li><a href="../team/team.php">Team</a></li>
                <li><a href="../pricing/pricing.php">Pricing</a></li>
                <li><a href="../gallery/gallery.php">Gallery</a></li>
                <li><a href="../shop">Shop</a></li>
          </ul>
        </div>
<!--mobile-nav-->

    Here is my footer:

    <footer>
  <div class="footer-cta">
    <p>
      Have any questions or looking for asisstance?
    </p>
    <a href="../internals/contact.php">Contact Us</a>
  </div>
  <div class="footer-left">
    <p class="footer-links">
      <img class="footer-logo" src="../images/logo.png" alt=""/>
      <a href="../index.php">Home |</a>
      <a href="../services/services.php">Services |</a>
      <a href="../team/team.php">Team |</a>
      <a href="../pricing/pricing.php">Pricing |</a>
      <a href="../shop/shop.php">Shop |</a>
      <a href="../gallery/gallery.php">Gallery |</a>
      <a href="../contact/contact.php">Contact |</a>
    </p>
  </div>
  <div class="footer-right">
    <a href="#"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a>
  </div>
</footer>

    Thanks for your help!

    your header is not calling any stylesheets or any usually integrated information like the <head> section, nor the recommended wp_head(); nor does the footer call wp_footer().

    https://codex.www.ads-software.com/Theme_Development

    have a look at the default header and footer files of your theme …

    Thread Starter oweskeez

    (@oweskeez)

    Hey Michael,

    Thanks for your response. The header/footer have no <head> section because I am calling them as PHP includes on each page of my site.

    The best method I read to get the stylesheets to call is using wp_enqueue_scripts but that did not seem to work.

    Would you suggest I add a head section to header/footer and call my stylesheet there, or use the above enqueue method.

    I am still confused on why the rest of the styling for the site broke, I did not do anything to the body section and yet its styling broke.

    Thanks again.

    Theme Author CyberChimps

    (@cyberchimps)

    @oweskeez,

    Yes, in child theme you can overwrite parent theme core files.

    But, please make sure you copy all the required code in Child theme Header.php file, first.

    As @michael says, you should have WordPress default functions called : wp_head(), body_class() etc.,

    Please consider to copy Header.php file as it is into your child theme, and only edit the content below <body> tag.

    Further, please confirm with your child theme functions.php file.
    If needed, enqueue the parent style.css – using wp_enqueue_scripts

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Child theme: custom template files break styling’ is closed to new replies.