• 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]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi,

    I don’t see any issues with the URL you provided.

    https://captionpro.com.au:443/AlekaConsulting/

    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.

    Thread Starter Simon Kravis

    (@simonkravis)

    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.

    Thread Starter Simon Kravis

    (@simonkravis)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding Video header to twentysixteen-child them’ is closed to new replies.