1

I created a child theme of the Twenty Sixteen Wordpress theme. I've read that I can edit the header.php file and it will change on all pages.

My problem is, it is only changing for the home page. How do I get header to be the same on all pages? What I added to my child header.php file is:

• A link in head tag for fonts

• I added an additional header tag

• I added an image to the header tag, with the class="site-header", under the div tag "site-branding"

Below is my code

 <?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link id="themify-icon-font-css" media="all" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php endif; ?>
    <?php wp_head(); ?>
</head>

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

<header class="cherry-header">
<div class="cherry-header-main">
<div class="cherry-nav2">
<a href="*"><i class="fa fa-twitter fa-fw fa-lg"></i></a>
<a href="*"><i class="fa fa-facebook fa-fw fa-lg"></i></a>
<a href="*"><i class="fa fa-youtube fa-fw fa-lg"></i></a>

</div>
<div class="cherry-nav1">
<form action="http://localhost:8888/thetutorialjournal-wp/" class="search-form" method="get" role="search">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field">
    </label>
    <button class="search-submit" type="submit"><span class="screen-reader-text">Search</span></button>
</form>

</div>

</div>
</header>
<header id="masthead" class="site-header" role="banner">
            <div class="site-header-main">
                <div class="site-branding">
                <img src="image/TSM-logo-BW.png">
                </div><!-- .site-branding -->

                <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
                    <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>

                    <div id="site-header-menu" class="site-header-menu">
                        <?php if ( has_nav_menu( 'primary' ) ) : ?>
                            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                                <?php
                                    wp_nav_menu( array(
                                        'theme_location' => 'primary',
                                        'menu_class'     => 'primary-menu',
                                     ) );
                                ?>
                            </nav><!-- .main-navigation -->
                        <?php endif; ?>

                        <?php if ( has_nav_menu( 'social' ) ) : ?>
                            <nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">
                                <?php
                                    wp_nav_menu( array(
                                        'theme_location' => 'social',
                                        'menu_class'     => 'social-links-menu',
                                        'depth'          => 1,
                                        'link_before'    => '<span class="screen-reader-text">',
                                        'link_after'     => '</span>',
                                    ) );
                                ?>
                            </nav><!-- .social-navigation -->
                        <?php endif; ?>
                    </div><!-- .site-header-menu -->
                <?php endif; ?>
            </div><!-- .site-header-main -->

            <?php if ( get_header_image() ) : ?>
                <?php
                    /**
                     * Filter the default twentysixteen custom header sizes attribute.
                     *
                     * @since Twenty Sixteen 1.0
                     *
                     * @param string $custom_header_sizes sizes attribute
                     * for Custom Header. Default '(max-width: 709px) 85vw,
                     * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
                     */
                    $custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
                ?>
                <div class="header-image">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                    </a>
                </div><!-- .header-image -->
            <?php endif; // End header image check. ?>
        </header><!-- .site-header -->
  • 3
    How does your code look, please show what you did already in the header.php. – Charles Feb 25 '16 at 7:08
  • @Charles I made changes above...I guess what I am trying to ask is what are the different things that prevent your header.php from not showing on all pages? – Loni Negron Feb 26 '16 at 3:40
1

I figured it out thanks to: Marian Heddesheimer YouTube video https://youtu.be/S4Hz0NqPGDM

This was simple enough code, I just didn't understand the Wordpress Codex examples.

This is the code for social link icons:

<link id="themify-icon-font-css" media="all" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">

This is the code for my logo:

<a href="<?php echo home_url() ?>"><img src="<?php echo get_stylesheet_directory_uri() ?>/image/TSM-logo-BW.png" alt="logo"></a>

I knew my images folder and the css folder for my font icons were supposed to be within the child directory, but my head began to swirl with uncertainty because when placed in parent directory they only showed up in homepage. This video completely answered all my headaches! Thank You! :)

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.