I've been trying to get Nivo Slider work inside my childtheme by following along with http://return-true.com/2010/09/getting-jquery-nivo-slider-to-work-inside-your-wordpress-theme/ and using Jquery in Thematic Demystified http://themeshaper.com/forums/topic/jquery-in-thematic-demystified as my reference. I have a feeling the way I'm trying to call the scripts and styles required is not right.
define('JS',get_bloginfo('stylesheet_directory') );
// Enqueue Javascripts
function my_scripts() {
if ( !is_admin() ) {//use google's jquery
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
wp_enqueue_script('jquery');
wp_enqueue_script('nivoslider', JS .'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
}
}
add_action('template_redirect', 'my_scripts');
//load css nivo styles
function slide_styles(){
if ( !is_admin() ) {
wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory') .'/js/nivo-slider.css', false, '2.1');
wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory') .'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
}
}
add_action('teplate_redirect', 'slide_styles');and calling the script on my functions.php
function my_script(){ ?>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function($) {
<?php if(is_front_page()){ ?>
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:5000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
captionOpacity:0.8, //Universal caption opacity
<?php } ?>
}); //end document ready functions
});
/* ]]> */
</script>
<?php }
add_action('template_redirect', 'my_script');Now if I replace the jQuery below is_front_page with this; $('body').css('backgroundColor','red'); the front page goes red. Which makes me think it's the way I'm calling the scripts and styles - tried wp_head, wp_print_scripts. When I view page source I can see 5 posts that should be displayed with the slider effect. Here's my template page;
<?php
/*
Template Name: Front Page
*/
?>
<?php get_header(); ?>
<div id="content" >
<div id="slider-wrapper">
<div id="slider">
<?php
$tmp = $wp_query; $wp_query = new WP_Query('posts_per_page=5&category_name=slide');
if(have_posts()) : while(have_posts()) : the_post();
?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>
<?php endwhile; endif; $wp_query = $tmp; ?>
</div><!-- close #slider -->
</div>
</div> <!-- /content -->
<?php get_footer(); ?>
