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.
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
*
* @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="">
<?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('|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
*
* @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="">
<?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('|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 /
*
* @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^