By default, the WordPress header and footer are typically the same on every page of the site. But what happens when you want to create a landing page with a simplified version of both the header and footer? Or when you want to construct a brand new header but don’t want the public to see it until you are done? By using multiple headers and footers we can quickly and easily solve these problems. This post will walk you through the steps for creating multiple headers and footers on your very own WordPress site!
Step One: Duplicate your header.php file and name it header-new.php. You can replace the word new with something that makes sense for your website.
Step Two: Open up the Page.php file associated with the template that you want to use. Then replace the normal header code with the code below. Update the page id number with the correct page number on your site. Change the get_header(‘new’) to match the alias used in step one.
<?php
if(is_page(10)) {
get_header('new');
}
else {
get_header();
}
wp_head();
?>
Step Three: Make your changes within the header-new.php file, and walah! You have successfully created a second header!
If you’re looking to create a second footer, simply follow the steps above but make your changes to the footer-new.php file instead.
I want to add to my theme different logo that will be used on sticky header when user scrolls the page. I edit Underscores theme so I added the code to customizer.php and the whole function looks like this:
function mytheme_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
if ( isset( $wp_customize->selective_refresh ) ) {
$wp_customize->selective_refresh->add_partial(
'blogname',
array(
'selector' => '.site-title a',
'render_callback' => 'mytheme_customize_partial_blogname',
)
);
$wp_customize->selective_refresh->add_partial(
'blogdescription',
array(
'selector' => '.site-description',
'render_callback' => 'mytheme_customize_partial_blogdescription',
)
);
}
$wp_customize->add_setting('sticky_header_logo');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'sticky_header_logo', array(
'label' => 'Sticky Header Logo',
'section' => 'title_tagline',
'settings' => 'sticky_header_logo',
'priority' => 8
)));
}
add_action( 'customize_register', 'mytheme_customize_register' );Add this code header.php or any.php
<div class="site-branding-alternative">
<?php
$sticky_logo_url = get_theme_mod( 'sticky_header_logo' );
if ($sticky_logo_url )
echo '<img src="'.$sticky_logo_url.'" alt = "logo alt test" class="sticky_logo_class">';
?>
</div>