I have this script in my footer.php and I like to add it to the footer.php by using wp_enqueue_scripts.
<script type="text/javascript">
jQuery(window).load(function(){
<?php
if ( is_home() ) {
if ( option::get('featured_posts_show') == 'on' ) {
?>if ( jQuery('#slider li').length > 0 ) {
jQuery('#slider').flexslider({
controlNav: false,
directionNav: false,
animationLoop: true,
animation: '<?php echo option::get('slideshow_effect') == 'Slide' ? 'slide' : 'fade'; ?>',
useCSS: true,
smoothHeight: false,
touch: false,
slideshow: <?php echo option::get('slideshow_auto') == 'on' ? 'true' : 'false'; ?>,
<?php if ( option::get('slideshow_auto') == 'on' ) echo 'slideshowSpeed: ' . option::get('slideshow_speed') . ','; ?>
pauseOnAction: true,
animationSpeed: 600,
start: function(slider){
jQuery('#slider_nav .item').click(function(){
var id = getPostIdClass(this);
if ( id <= 0 ) return;
var index = slider.slides.index( slider.slides.filter('.' + id) );
slider.direction = (index > slider.currentSlide) ? 'next' : 'prev';
slider.flexAnimate(index, slider.pauseOnAction);
});
},
before: function(slider){
var id = getPostIdClass( slider.slides.eq(slider.animatingTo) );
if ( id <= 0 ) return;
jQuery('#slider_nav .item').removeClass('current');
jQuery('#slider_nav .item.' + id).addClass('current');
if ( jQuery('#slider_nav .row').length > 1 ) {
var navSlider = jQuery('#slider_nav').data('flexslider'),
currPage = navSlider.slides.index( navSlider.slides.find('.item.' + id).parent('.row') );
navSlider.direction = (currPage > navSlider.currentSlide) ? 'next' : 'prev';
navSlider.flexAnimate(currPage, navSlider.pauseOnAction);
}
}
});
jQuery('#slider_nav .item').wrapInChunks('<div class="row" />', 4);
jQuery('#slider_nav').flexslider({
selector: '.tiles > .row',
direction: 'vertical',
controlNav: true,
directionNav: false,
animationLoop: false,
animation: 'slide',
useCSS: true,
smoothHeight: false,
touch: false,
slideshow: false,
pauseOnAction: true,
animationSpeed: 600
});
}<?php
}
if ( option::get('carousel_posts_show') == 'on' ) {
?>if ( jQuery('#carousel .item').length > 0 ) {
jQuery('#carousel .item').wrapInChunks('<div class="row" />', 3);
jQuery('#carousel .row').append('<div class="clear" />');
if ( jQuery('#carousel .item').length > 3 ) {
jQuery('#carousel_wrap').append('<div id="carousel_nav"><div class="prev">Prev</div><div class="next">Next</div></div>');
jQuery('#carousel .row').each(function(){
var max = Math.max.apply(null, jQuery('h4.title',this).map(function(){return jQuery(this).height()}).get());
jQuery('h4.title', this).css('min-height', max);
});
jQuery('#carousel').height(jQuery('#carousel .row').height());
jQuery('#carousel').serialScroll({
axis: 'y',
cycle: false,
constant: false,
force: true,
items: '.row',
prev: '#carousel_nav .prev',
next: '#carousel_nav .next',
onBefore: function(e,elem,$pane,$items,pos){
$pane.height(jQuery(elem).height());
}
});
}
}<?php
}
}
?>
});
</script>
I haven’t managed yet to add it, because of the php part inside the script. I don’t know how to separate the javascript from the php and add it the right way to the footer.php.
Anyone?
Remove your php code from script and put you script in one file suppose name custom-script.js
then add this js with wp_enqueue_script in your theme functions.php file
Further to Datta Parad’s answer, use wp_localize_script() to get your dynamic values.
See the Codex (link above) and Pippin’s article for guidance on use.