Adding Video header to twentysixteen-child them
-
I would like to show a video instead of fixed image in my site home page. I am using a child theme derived from twentysixteen. I tried following the instructions at https://make.www.ads-software.com/core/2016/11/26/video-headers-in-4-7 and the Customize-> Header Image changed to Customize->Header Media, but a message “This theme does not support video headers on this page” appears.
At the moment I cannot even change the image from within WordPress. If I go to Customize-> Header Media and select a different image, the new image is shown as the current header (on the left) but does not appear on the page on the right.
The page I need help with: [log in to see the link]
-
Hi,
I don’t see any issues with the URL you provided.
Do you have another link we can look at?
Thanks!
Hi, please check if you have added the following code inside a function which hooked to after_theme_support.
You can clone whole twentysixteen_setup function to child theme functions.php and add the code.add_theme_support( 'custom-header', array( 'video' => true, ) );
Next, add
<?php the_custom_header_markup(); ?>
in your child theme header.php.
You can replace<div class="header-image">...</div>
with that.Thank you for your prompt response. I am new to WP, having moved from the much simpler environment of GoDaddy Website Builder, which did not have the capability of WP.
Following advice on creating a child theme and the suggestion above, the file C:\inetpub\wwwroot\AlekaConsulting\AlekaConsulting\wp-content\themes\twentysixteen-child\functions.php now contains
<?php date_default_timezone_set("Australia/Sydney"); add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); add_theme_support( 'custom-header', array( 'video' => true, ) ); function my_theme_enqueue_styles() { $parent_style = 'twentysixteen-style'; // This is 'twentysixteen-style' for the Twenty Sixteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } function current_time_date(){ $dt = current_time('timestamp'); return date('F jS, Y, H:i:s',$dt); } add_shortcode( 'time_date', 'current_time_date' ); function themename_custom_header_setup() { $defaults = array( // Default Header Image to display 'default-image' => get_template_directory_uri() . '/images/headers/default.jpg', // Display the header text along with the image 'header-text' => false, // Header text color default 'default-text-color' => '000', // Header image width (in pixels) 'width' => 1000, // Header image height (in pixels) 'height' => 198, // Header image random rotation default 'random-default' => false, // Enable upload of image file in admin 'uploads' => false, // function to be called in theme head section 'wp-head-callback' => 'wphead_cb', // function to be called in preview page head section 'admin-head-callback' => 'adminhead_cb', // function to produce preview markup in the admin screen 'admin-preview-callback' => 'adminpreview_cb', ); } add_action( 'after_setup_theme', 'themename_custom_header_setup' ); add_theme_support( 'custom-header', array( 'video' => true, ) );
There is no Header.php file in C:\inetpub\wwwroot\AlekaConsulting\AlekaConsulting\wp-content\themes\twentysixteen-child. I copied the header.php file from C:\inetpub\wwwroot\AlekaConsulting\AlekaConsulting\wp-content\themes\twentysixteen and amended it to the following:
<?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> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?> <link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>"> <?php endif; ?> <?php wp_head(); ?> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-48471859-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-48471859-1'); </script> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <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 id="masthead" class="site-header" role="banner"> <div class="site-header-main"> <div class="site-branding"> <?php twentysixteen_the_custom_logo(); ?> <?php if ( is_front_page() && is_home() ) : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <?php else : ?> <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p> <?php endif; $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?> <p class="site-description"><?php echo $description; ?></p> <?php endif; ?> </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' ); ?> <?php the_custom_header_markup(); ?> <?php endif; // End header image check. ?> </header><!-- .site-header --> <div id="content" class="site-content">
However, when I go to customize Header Media I only have the option to select an image from the media libary, not a link to a video. Selecting a different image also does not change the background image.
Sorry thar I made typo:
please check if you have added the following code inside a function which hooked to after_theme_support. => hooked to ‘after_setup_theme’Anyway, firstly your functions.php has two of
add_theme_support( 'custom-header', ... )
. Remove both of them, and replace function themename_custom_header_setup() with the following instead:function themename_custom_header_setup() { // Video custom header add_theme_support( 'custom-header', array( 'video' => true, ) ); } add_action( 'after_setup_theme', 'themename_custom_header_setup' );
header.php looks ok for me, so let me see what happens to customize header media.
Still no joy after modifying as you suggested. When I select Customize Header Media I get the message “This theme does not support video headers on this page” and if I browse Media Library for images to show, videos are excluded.
Then I would test if one/some of your plugins conflict.
Or make another child theme with only custom header setting.
In my local environment, child theme of TwentySixteen works OK.
- The topic ‘Adding Video header to twentysixteen-child them’ is closed to new replies.