Twenty Seventeen child theme

⚠️ Warning: To be able to follow the steps of this tutorial, you are required you to have coding knowledge. Regretfully we can't provide support for custom coding. If you can't achieve what you are looking for or if you're not sure how to follow the instructions, hire a developer. We are also unable to provide support for problems happening because of custom codes.

This documentation can help you replace the Twenty Seventeen theme homepage header image with our slider.

Original Twenty Seventeen theme header (left) and Twenty Seventeen child theme header with Smart Slider (right)

1

Go to the FTP of your website and create a child folder

/wp-content/themes/twentyseventeen-child-theme/

2

Create a style.css file in this folder

/wp-content/themes/twentyseventeen-child-theme/style.css

and write this code in it:

/*
Theme Name: Twentyseventeen child theme
Template: twentyseventeen
*/
@import url('../twentyseventeen/style.css');

.has-header-image.home div.custom-header{
    height:auto!important;
}

.has-header-image.twentyseventeen-front-page .site-branding{
    position:relative!important;
}

3

Create a template-parts folder

/wp-content/themes/twentyseventeen-child-theme/template-parts/

and a header folder in it:

/wp-content/themes/twentyseventeen-child-theme/template-parts/header

4

Copy the header-image.php file from twentyseventeen into your folder

From: /wp-content/themes/twentyseventeen/template-parts/header/header-image.php

To: /wp-content/themes/twentyseventeen-child-theme/template-parts/header/header-image.php

5

Modify the code

Currently it looks like this:

<?php
/**
 * Displays header media
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
?>
<div class="custom-header">
        <div class="custom-header-media">
            <?php the_custom_header_markup(); ?>
        </div>
    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header -->

You should create an "if" condition, that if you are on the homepage, then our slider's shortcode should run, while if you aren't there, run the original code:

<?php
/**
 * Displays header media
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
?>
<div class="custom-header">
    <?php 
    if(is_home() || is_front_page()){
        echo do_shortcode('[smartslider3 slider=6]');
    } else {
    ?>       
        <div class="custom-header-media">
            <?php the_custom_header_markup(); ?>
        </div>
    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>   
    <?php } ?>
</div><!-- .custom-header -->

So the added lines are these:

<?php 
if(is_home() || is_front_page()){
        echo do_shortcode('[smartslider3 slider=6]');
} else {
?>

<?php } ?>

6