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.