Wordpress Themes - WP Forum at BFA - jQuery Post Slider....where to put javascript files

Hi All,

I am trying to integrate FlexSlider into my theme to use as a post slider and I have followed this tutorial to try to do so and have done everything the way they have specified:

http://return-true.com/2012/04/insta...rdpress-theme/

I have this in my page-home.php

Code:

<div class="flex-container">

  <div class="flexslider">

        <ul class="slides">

        <?php

        query_posts(array('category_name' => 'food', 'posts_per_page' => 3));

        if(have_posts()) :

            while(have_posts()) : the_post();

        ?>

          <li>

                <?php the_post_thumbnail(); ?>

                <p class="flex-caption"><?php the_excerpt(); ?></p>

          </li>

        <?php

            endwhile;

        endif;

        wp_reset_query();

        ?>

        </ul>

  </div>

</div>

This is in my functions.php:

Code:

function my_add_scripts() {

    wp_enqueue_script('flexslider', get_bloginfo('stylesheet_directory').'js/jquery.flexslider-min.js', array('jquery'));

    wp_enqueue_script('flexslider-init', get_bloginfo('stylesheet_directory').'js/flexslider-init.js', array('jquery', 'flexslider'));

}

add_action('wp_enqueue_scripts', 'my_add_scripts');



function my_add_styles() {

    wp_enqueue_style('flexslider', get_bloginfo('stylesheet_directory').'js/flexslider.css');

}

add_action('wp_enqueue_scripts', 'my_add_styles');

integrated here:

Code:

<?php

$bfa_ata_version = "3.7.3";



// Load translation file above

load_theme_textdomain('atahualpa');



// To disable some default WP filters, remove the '#' character

#remove_filter('the_content', 'wptexturize');

#remove_filter('the_excerpt', 'wptexturize');

#remove_filter('comment_text', 'wptexturize');

#remove_filter('the_title', 'wptexturize');

add_filter('widget_text', 'do_shortcode');





function my_add_scripts() {

    wp_enqueue_script('flexslider', get_bloginfo('stylesheet_directory').'js/jquery.flexslider-min.js', array('jquery'));

    wp_enqueue_script('flexslider-init', get_bloginfo('stylesheet_directory').'js/flexslider-init.js', array('jquery', 'flexslider'));

}

add_action('wp_enqueue_scripts', 'my_add_scripts');

function my_add_styles() {

    wp_enqueue_style('flexslider', get_bloginfo('stylesheet_directory').'js/flexslider.css');

}

add_action('wp_enqueue_scripts', 'my_add_styles');







// get default theme options

include_once (TEMPLATEPATH . '/functions/bfa_theme_options.php');

// Load options

include_once (TEMPLATEPATH . '/functions/bfa_get_options.php');

list($bfa_ata, $cols, $left_col, $left_col2, $right_col, $right_col2, $bfa_ata['h_blogtitle'], $bfa_ata['h_posttitle']) = bfa_get_options();

And then I created the file they specified called flexslide-init.js with this in it:

Code:

(function($) {

    $(window).load(function() {

        $('.flexslider').flexslider({

                    animation: 'slide',

                    controlsContainer: '.flex-container'

            });

    });

})(jQuery)

All of the files are in the JS folder (including the CSS file. I have tried extending the file path to the full /www/wp-content/themes/atahualpa373/js with no difference.

So far all I have managed to achieve is getting the page to put out the first three posts with their excerpts, and the post titles are underneath the posts.

It obviously works for lots of other people so I'm no sure why its not working on mine.

Help?

Dani