Is it possible to add a button, svg and extra text paragraph to header image on the twentyseventeen theme? This is an example of what look I'm trying to achieve https://github.com/ppass5/Childtheme_example_images/blob/master/Hero.png and where it sits currently https://github.com/ppass5/Childtheme_example_images/blob/master/Screen%20Shot%202018-08-20%20at%207.37.07%20PM.png.

I'm guessing in involves PHP to the site-branding file, but not really sure.

Thanks for the help!


I'm guessing in involves PHP to the site-branding file, but not really sure.

yes it does. You to create a child theme based on the twentyseventeen theme, and add create a new custom header.php file with the modifications you need, in order to style your header. Your custom twenty seventeen header file would look something like,

 * 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 WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<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 wp_head(); ?>

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

    <header id="masthead" class="site-header" role="banner">

        <?php get_template_part( 'template-parts/header/header', 'image' ); ?>

        <?php if ( has_nav_menu( 'top' ) ) : ?>
            <div class="navigation-top">
                <div class="wrap">
                    <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
                </div><!-- .wrap -->
            </div><!-- .navigation-top -->
        <?php endif; ?>
         <!-- your custom button -->

    </header><!-- #masthead -->


     * If a regular post or page, and not the front page, show the featured image.
     * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
    if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
        echo '<div class="single-featured-image-header">';
        echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
        echo '</div><!-- .single-featured-image-header -->';

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

Notice the place where I have inserted a custom button with the html comment <!-- your custom button -->

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.