1

I have written a small plugin where i have loaded following scripts

wp_enqueue_script('jquery', plugins_url('/js/jquery.min.js', __FILE__),'','1.7',true);
wp_enqueue_script('new-cycle', plugins_url('/js/cycle.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-jcarousellite', plugins_url('/js/jcarousellite.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-fancybox', plugins_url('/js/fancybox.js', __FILE__),array( 'jquery' ),'1.0',true);

and i also have a javascript code to call cycle and fancybox functions ( with parameters/options loaded from options and post_meta tables )

function front_js(){ ?>   
<script>
    $(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle({speed:'<?php echo get_option("cycle_speed");?>'});
    });
    </script>
<?php }

this code is added to footer by using add_action('wp_footer', 'front_js');

Now my javascript code is loaded before all the scripts required like

<script>
$(document).ready(function(){
  $(".video-popup").fancybox();
  $(".video_msgs").cycle();
});
</script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/twentyfifteen/js/functions.js?ver=20141212'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/cycle.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/jcarousellite.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/fancybox.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/counter.js?ver=1.0'></script>

and giving error $('...').fancybox() not a function

I think its because the code is loaded before fancybox.js file where this function is written. I tried to print_scripts functions but its recommended to not to use this and wp_enqueue_script only works with files not with custom javascript code.

Is there any method to load my custom code after required files loaded or any other way to resolve this type of issue.

It works if I load all the files in header but then it increases page load time that is also not a good approach.

Improve this question
2
  • 2
    Hint: Add your script in its own js file and enqueue it as normal. Don't add scripts directly to wp_footer. Shortcut and not recommended method, use the $priority parameter of add_action() to hook your function later to wp_footer
    – Pieter Goosen
    Commented May 6, 2015 at 5:44
  • it is working if i load my script through a js file but the functions here needs to be loaded with parameters that are fetched from options table. Let me edit my question and mention it as well
    – Vikram
    Commented May 6, 2015 at 5:48

2 Answers 2

Reset to default
2

Try to add the code to the footer using add_action('wp_footer', 'front_js', 99); where 99 specifies the order in which the functions are executed. Now it should be executed after your scripts are loaded.

Improve this answer
0
0

Instead of putting the code in function and hooking it to wp_footer.

You can have another JS file stored in your plugin folder and enqueued it like other scripts you enqueued.

OR 

<?php
function front_js() {
  if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script type="text/javascript">

$(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle();
    });

</script>
<?php
  }
}
add_action( 'wp_footer', 'front_js' );
?>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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