0

I am building a custom WP theme for the first time. Just started trying to put specific header template files with my different page templates. For some reason, when I use "get_header(X)" to call a specific header template, the page in the browser displays the correct header at the top, but then replicates the main header (from header.php) at the end of the page, below the footer.

Homepage displaying correctly

EYFS" type page displaying correct, different header at top, with the main header incorrectly replicated below the footer

I can't see where in the code this is being called from, but when I look at the source in browser, it is clear to see the full contents of header.php inserted below the footer. Have included the code from my "page-eyfs.php" template, which calls the 'eyfs' header template at the start.

Site is only local currently

    <?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package thatnurserylife
*/

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>

<!Adding Google Fonts into Header so that they will apply on all pages. Will call the fonts directly from style.css!>

<style>
    @import url('https://fonts.googleapis.com/css?family=Mali|Questrial&display=swap');

    .headertitle{
    margin: auto;
    font-family: 'Mali', cursive;
    font-size: 3vw;

    }

    .headertitlebold{
    font-weight: bold;
    }

    .headerboxes{
    overflow: hidden;
    width: 100%;
    }

    .headerboxesside{
    float: left;
    width: 25%;
    padding-bottom: 500em;
    margin-bottom: -500em;

    }

    .headerboxesmid{
    float: left;
    width: 50%;
    display: flex;
    margin: auto;
    padding-bottom: 500em;
    margin-bottom: -500em;
    min-width: 500px;

    }

    .headerlogo{
    height: 15em;
    width: auto;
    margin: auto;
    float: left;
    position: relative;
    padding: 0 0 0 0;
    }

.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>

</head>

<body <?php body_class(); ?>>


<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'thatnurserylife' ); ?></a>

    <header>   
     <div class="headerboxes">
        <div class="headerboxesside" style="background-color:#fff">
            <p>     </p>
        </div>

        <div class="headerboxesmid" style="background-color:#fff">

            <img class="headerlogo" src="/wp-content/uploads/logo.png" alt="Should be a logo here!" /> 
            <div class="headertitle">
            <h> all you need to love <br><strong>thatnurserylife</strong></h>
            </div>
        </div>

        <div class="headerboxesside" style="background-color:#fff">
            <p>  </p>
        </div>

     </div>

        <!-- .site-branding -->



            </div>


    <nav id="site-navigation" class="main-navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'thatnurserylife' ); ?></button>
        <?php
        wp_nav_menu( array(
            'theme_location' => 'menu-1',
            'menu_id'        => 'primary-menu',
        ) );
        ?>
    </nav><!-- #site-navigation -->
</header>   <!-- #masthead -->

<div id="content" class="site-content">

^This is the code for the main/homepage header, which appears correctly^

<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package thatnurserylife
*/

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>

<!Adding Google Fonts into Header so that they will apply on all pages. Will call the fonts directly from style.css!>

<style>
    @import url('https://fonts.googleapis.com/css?family=Mali|Questrial&display=swap');

    .headertitle{
    margin: auto;
    font-family: 'Mali', cursive;
    text-align: left;
    font-size: 4em;

    }

    .headertitlebold{
    font-weight: bold;
    }

    .headerboxes{
    overflow: hidden;
    width: 100%;
    }

    .headerboxesside{
    float: left;
    width: 25%;
    padding-bottom: 500em;
    margin-bottom: -500em;

    }

    .headerboxesmid{
    float: left;
    width: 50%;
    display: flex;
    margin: auto;
    padding-bottom: 500em;
    margin-bottom: -500em;

    }

    .headerlogo{
    height: 15em;
    width: auto;
    margin: auto;
    float: left;
    position: relative;
    padding: 0 0 0 0;
    }

.clearfix::after {
content: "";
clear: both;
 display: table;
}
</style>

</head>

<body <?php body_class(); ?>>


<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'thatnurserylife' ); ?></a>

    <header>   
     <div class="headerboxes">
        <div class="headerboxesside" style="background-color:#fff">
            <p>     </p>
        </div>

        <div class="headerboxesmid" style="background-color:#fff">

            <img class="headerlogo" src="/wp-content/uploads/EYFS_logo.png" alt="Should be EYFS logo here!" /> 
            <div class="headertitle">
            <h> EYFS Activity Plans</h>
            </div>
        </div>

        <div class="headerboxesside" style="background-color:#fff">
            <p>  </p>
        </div>

     </div>

        <!-- .site-branding -->



            </div>


    <nav id="site-navigation" class="main-navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'thatnurserylife' ); ?></button>
        <?php
        wp_nav_menu( array(
            'theme_location' => 'menu-1',
            'menu_id'        => 'primary-menu',
        ) );
        ?>
    </nav><!-- #site-navigation -->
</header>   <!-- #masthead -->

<div id="content" class="site-content">

^This is the code for the alternative header which is displaying correctly at the top, with the main header incorrectly displayed beneath the footer^

    <?php /* Template Name: EYFS type */ ?>
<?php
/**
* 
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site may use a
* different template.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
* @package thatnurserylife
*/

get_header('eyfs');


?>

<div>
    <h2>This is an EYFS type page</h2>
</div>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

    <?php
    while ( have_posts() ) :
        the_post();

        get_template_part( 'template-parts/content', 'page' );

        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;

    endwhile; // End of the loop.
    ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

^This is the code from the EYFS page template^

  • Hello! Can you edit your question to include code for those headers and the template involved? It's not possible to debug the problem from just screenshots – Tom J Nowell Sep 3 at 11:24
  • Thanks for responding - have added the bits of code. In copying it I noticed that my alternative header template doesn't have a "Template Name" bit at the top of the code in the way that the page template does - could this be the problem? – Sam Green Sep 3 at 11:34
  • headers don't need template name comments at the top, but your page template file does or it won't show up as an option in the editor – Tom J Nowell Sep 3 at 11:38
  • And you're absolutely sure that template-parts/content-page.php or template-parts/content.php don't contain a call to get_header? – Tom J Nowell Sep 3 at 11:40
  • Yep, they definately don't have that call, nor any reference to headers so far as I can see – Sam Green Sep 3 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.