Twenty Seventeen theme

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

Step 1

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

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

Step 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.blog div.custom-header{
    height:auto;
}

Step 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

Step 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

Step 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 } ?>

Step 5

Activate your child theme.