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 am doing some maintenance on a blog that I was hired to create a couple of months ago. They wanted to add a slider in, so I started to implement FlexSlider. I ran into a problem though with the slider.

I have added the needed dependencies into the header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/flexslider.css" type="text/css" media="screen" />
<script src="<?php echo get_bloginfo('template_directory'); ?>/jquery.flexslider-min.js"></script>

In my index file, I have:

<div class="flex-container">
    <div class="flexslider">

        <ul class="slides">         
            <li>
   <?php query_posts(array ( 'posts_per_page' => 1, 'tag'=> 'one' )); ?>
    <?php while (have_posts()) : the_post(); ?>
<?php       $slider_image = get_post_meta($post->ID, 'slider_image', true);?>
<img src="<?php echo $slider_image[0]['image']; ?>" />      


        <div class="info">
        <h1><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1>
            <p><?php the_time('F jS, Y') ?> by <?php the_author() ?></p>

                <p><?php echo excerpt(55); ?></p>
                <p class="read"><a href="<?php the_permalink(); ?>"> Read More ></a></p>
        <?php endwhile; ?> 
   </div>
    </li>






        </ul>
    </div>
</div>

My issue is this really, when you look at the slider, the "slides" dont seem to be styled at all, and the jquery files do not seem to be functioning at all. I keep seeing an error that:

Uncaught TypeError: Object #<Object> has no method 'slides'
:1112/:22Uncaught TypeError: Object #<Object> has no method 'flexslider'

You can see what I am working on at http://louisstephens.cc/blog (using my own blog so I do not mess up the client's site). Does anyone see something that I am missing to get this functioning properly?

share|improve this question
    
Are you running a child theme? If so, you'll need to replace the get_bloginfo('template_directory') calls with get_bloginfo('stylesheet_directory'). There's also no need to load jquery, just set that as a dependancy when you enqueue flexslider. –  t31os Jan 3 '12 at 12:06
add comment

2 Answers 2

up vote 1 down vote accepted

In your functions.php add this code

function load_custom_script() {

    wp_deregister_script('jquery');
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', false, '1.6.2');
    wp_enqueue_script('jquery');

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

}

function load_custom_style() {
    wp_register_style('flexslider', get_bloginfo('template_url').'/flexslider.css', array(), '');
    wp_enqueue_style('flexslider');
}

add_action('wp_print_scripts', 'load_custom_script');
add_action('wp_print_styles', 'load_custom_style');

Do not forget to remove your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/flexslider.css" type="text/css" media="screen" />
<script src="<?php echo get_bloginfo('template_directory'); ?>/jquery.flexslider-min.js"></script>
share|improve this answer
    
Thanks everyone for the help. I did find that the blank theme I use to build off on registers an older version of jquery in my functions.php file. So when I was calling a newer version of jquery in my header.php file (with the other slider dependencies), it was conflicting with the older version that was being called in wp_head and wp_footer. I actually stumbled across it once @Bouchaala Sabri advised me to put his block of code into the functions.php file. –  Louis Stephens Jan 3 '12 at 16:10
add comment

You should use jQuery instead of the shorthand $.

Also you should wp_enqueue_script to insert jQuery and the FlexSlider script. You can find a good tutorial on that here.

share|improve this answer
    
Should using the enqueue solve the issue? –  Louis Stephens Jan 2 '12 at 22:47
    
Using jQuery instead of $ should solve the issue. But wp_enqueue_script is the prescribed way to link to scripts. –  imHavoc Jan 2 '12 at 22:49
    
I am sorry, I don't think I understand you completely.. Where am I replacing the cash sign? I the one in the main file is being used in php. –  Louis Stephens Jan 2 '12 at 23:21
add comment

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.