Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to add navigation to the default slider.js of twentyfourteen. I have tried lots of ways, but I don't understand how must I do it. Any suggestions to make this work?

index.php

<div class="slider">
<?php 
    query_posts('post_type=slider');
    if (have_posts()) { 
        $slider_index=1;
        while(have_posts()): the_post(); $image=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'home_slider');?>

            <div rel="<?php echo $slider_index;?>" class="slide_element">
                <img src="<?php echo $image[0];?>" title="<?php the_title();?>" />
                <div class="center">
                    <h2><?php echo get_the_excerpt();?></h2>

                    <?php } ?>
                </div>
            </div>
        <?php $slider_index++; endwhile;?>     

slider.js

    // Default settings.
$.featuredslider.defaults = {
    namespace: 'slider-',     // String: prefix string attached to the class of every element generated by the plugin.
    selector: '.slides > li', // String: selector, must match a simple pattern.
    animationSpeed: 600,      // Integer: Set the speed of animations, in milliseconds.
    controlsContainer: '',    // jQuery Object/Selector: container navigation to append elements.

    // Text labels.
    directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
    prevText: featuredSliderDefaults.prevText, // String: Set the text for the "previous" directionNav item.
    nextText: featuredSliderDefaults.nextText  // String: Set the text for the "next" directionNav item.

};
share|improve this question

1 Answer 1

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-',
} );
}
} );
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.