0

In my WordPress project I need to use a WordPress plugin, For that plugin to work I have to put wp_head() and wp_footer(). But when I put that than my slider's JS file don't load. <script src="<?php bloginfo('stylesheet_directory');?>/layout/scripts/tabslet/jquery.tabslet.min.js"></script>

Any idea how I can load my JS file with wp_head() and wp_footer Functions. The slider which I am using is bootstrap carousel slider (not plugin).

UPDATE

I have tried this in functions.php But still no success.

function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() .  '/layout/scripts/tabslet/jquery.tabslet.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Here is my footer contents after my divs structure -:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">    </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php bloginfo('stylesheet_directory');?>/js/custom.js">    </script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/lightbox-plus-jquery.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/layout/scripts/jquery.min.js"></script> 
<script src="<?php bloginfo('stylesheet_directory');?>/layout/scripts/jquery.fitvids.min.js"></script> 
<script src="<?php bloginfo('stylesheet_directory');?>/layout/scripts/jquery.mobilemenu.js"></script> 
<script src="<?php bloginfo('stylesheet_directory');?>/layout/scripts/tabslet/jquery.tabslet.min.js"></script>          
<?php wp_footer()?>
</body>
</html>

UPDATE

I have put all these scripts in fuctions.php as follows

function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name0', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array('jquery'), true );
wp_enqueue_script( 'script-name1', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery') );
wp_enqueue_script( 'script-name2', get_stylesheet_directory_uri() . '/js/lightbox-plus-jquery.min.js', array('jquery'), true );
wp_enqueue_script( 'script-name3', get_stylesheet_directory_uri() . '/layout/scripts/jquery.min.js', array('jquery'), true );
wp_enqueue_script( 'script-name4', get_stylesheet_directory_uri() . '/layout/scripts/jquery.fitvids.min.js', array('jquery'), true );
wp_enqueue_script( 'script-name6', get_stylesheet_directory_uri() . '/layout/scripts/tabslet/jquery.tabslet.min.js', array('jquery'), '1.4.2', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
  • 1
    You're doing it terribly wrong. Use developer.wordpress.org/reference/functions/wp_enqueue_script – RRikesh Mar 10 '16 at 4:40
  • Can you put your code where you add wp_head() and wp_footer() ? – Devendra Sharma Mar 10 '16 at 4:53
  • @ Devendra Sharma I have put wp_head() just before </head> tag and wp_footer(). just before </body> tag. AND just before wp_footer() I am calling my JS files. If I put wp_footer() before js calling funtions then my slider starts woking but plugin stopped working. IF I put wp_footer() just before </body> tag then my slider stopped and plugin works. – Rishabh Mar 10 '16 at 5:02
  • 1
    instead of array() as the 4th parameter for enqueueing your jQuery scripts use array('jquery') to set jquery as their dependency, and set the handle (currently script-name6) to jquery (...and check if jquery is not already loaded anyway!) – majick Mar 10 '16 at 7:55
  • 1
    the last script you have enqueued in your code is jquery with a (duplicate) handle of script-name6... since the dependency is a handle it needs to match. and you should check that jquery is not already enqueued by your theme... maybe keep updating your code? as also you are using get_stylesheet_uri when it should be get_stylesheet_directory_uri similar to get_template_directory_uri. – majick Mar 10 '16 at 8:51
1

Something more like this...

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );

    // only enqueue jquery if it is not already enqueued!
    if (!wp_script_is('jquery','enqueued')) {
        wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), true );
    }

    // note: last parameter only needed here if custom.js actually needs jquery
    wp_enqueue_script( 'script-name1', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery') ); 

    // all other scripts clearly need jquery to run...
    wp_enqueue_script( 'script-name2', get_stylesheet_directory_uri() . '/js/lightbox-plus-jquery.min.js', array('jquery'), true );
    wp_enqueue_script( 'script-name3', get_stylesheet_directory_uri() . '/layout/scripts/jquery.min.js', array('jquery'), true );
    wp_enqueue_script( 'script-name4', get_stylesheet_directory_uri() . '/layout/scripts/jquery.fitvids.min.js', array('jquery'), true );
    // wp_enqueue_script( 'script-name6', get_stylesheet_directory_uri() . '/layout/scripts/tabslet/jquery.tabslet.min.js', array('jquery'), '1.4.2', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

EDIT: to add this one separately in footer...

add_action('wp_footer','tabslet_script');
function tabslet_script() {
    echo '<script src="'.get_stylesheeet_directory_uri().'/layout/scripts/tabslet/jquery.tabslet.min.js"></script>';
}
  • Yes I understand all your points. But still my slider is not working. Don't know why? When I put all JS link in footer and remove wp_footer() then my slider start working. But when I call via functions.php then slider don't work! – Rishabh Mar 10 '16 at 9:53
  • Hi majick! can I put jquery.tabslet.min.js code directly somewhere in my theme. – Rishabh Mar 10 '16 at 10:11
  • yes just add that one separately to footer if it is causing you troubles. see edit. – majick Mar 10 '16 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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