Twenty fourteen slider navigation doesn’t work

Question

You can go and check this tutorial by Josh Pollock. I’ve extracted (qouted) parts of that tutorial.

Adding these options will allow you to set the mobile layout and the number of posts for each layout in the Admin interface, removing the need for code changes if you want to change the settings.

    function awesome_2014_customize_register() {

global $wp_customize;

//add extended featured content section

//add controls
$wp_customize->add_setting( 'num_posts_grid', array( 'default' => '6' ) );
$wp_customize->add_setting( 'num_posts_slider', array( 'default' => '6' ) );
$wp_customize->add_setting( 'layout_mobile', array( 'default' => 'grid' ) );

$wp_customize->add_control( 'num_posts_grid', array(
'label' => __( 'Number of posts for grid', 'text-domain'),
'section' => 'featured_content',
'settings' => 'num_posts_grid',
) );

$wp_customize->add_control( 'num_posts_slider', array(
'label' => __( 'Number of posts for slider', 'text-domain'),
'section' => 'featured_content',
'settings' => 'num_posts_slider',
) );

$wp_customize->add_control( 'layout_mobile', array(
'label' => __( 'Layout for mobile devices', 'text-domain'),
'section' => 'featured_content',
'settings' => 'layout_mobile',
'type' => 'select',
'choices' => array(
'grid' => 'Grid',
'slider' => 'Slider',
),
) );
}

add_action( 'customize_register', 'awesome_2014_customize_register' );

Specifying A Different Layout For Mobile Devices

 function awesome_2014_theme_mod( $value ) {

    if ( wp_is_mobile() ){
    return get_theme_mod( 'layout_mobile', 'grid' );
    } else {
    return $value;
    }
    }

    add_filter( 'theme_mod_featured_content_layout', 'awesome_2014_theme_mod' );

> Setting the Number of Posts For Each Layout

function awesome_2014_get_featured_posts( $posts ){

$fc_options = (array) get_option( 'featured-content' );

if ( $fc_options ) {
$tag_name = $fc_options['tag-name'];
} else {
$tag_name="featured";
}

$layout = get_theme_mod( 'featured_content_layout' );
$max_posts = get_theme_mod( 'num_posts_' . $layout, 2 );

$args = array(
'tag' => $tag_name,
'posts_per_page' => $max_posts,
'order_by' => 'post_date',
'order' => 'DESC',
'post_status' => 'publish',
);

$new_post_array = get_posts( $args );

if ( count($new_post_array) > 0 ) {
return $new_post_array;
} else {
return $posts;
}

}

add_filter( 'twentyfourteen_get_featured_posts', 'awesome_2014_get_featured_posts', 999, 1 );

Making the Slider Auto-Scroll. Now, add this code to functions.php:

//dequeue/enqueue scripts
function awesome_2014_featured_content_scripts() {
wp_dequeue_script( 'twentyfourteen-script' );
wp_dequeue_script( 'twentyfourteen-slider' );

wp_enqueue_script( 'awesome_2014-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '' , true );
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'awesome_2014-slider', get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js', array( 'jquery', 'awesome_2014-script' ), '' , true );
wp_localize_script( 'awesome_2014-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'awesome_2014' ),
'nextText' => __( 'Next', 'awesome_2014' )
) );
}
}
add_action( 'wp_enqueue_scripts' , 'awesome_2014_featured_content_scripts' , 999 );

This code also removes both of the parent theme’s functions.js file. In order to get the slider to work seamlessly with the full version of Flexslider and ensure that the existing CSS is applied, we do need to make a small tweak to the theme’s functions.js file. Copy that file to the child theme’s /js folder, open it up and at the bottom replace the Initialize Featured Content Slider code with the following:

 // Initialize Featured Content slider.
_window.load( function() {
if ( body.is( '.slider' ) ) {
$( '.featured-content' ).flexslider( {
selector: '.featured-content-inner > article',
controlsContainer: '.featured-content',
slideshow: true,
slideshowSpeed: 4500,
namespace: 'slider-',
} );
}
} );

Related Posts: