Question 31058 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to use external JavaScript file in PHP documents? – WordPress

My JavaScript files don’t seem like it is linked to my PHP file.

I am building a WordPress website. I have header.php and calling this header.php file by including

in my main.php file. I added JS path in the head tag in header.php, but it doesn’t seem like it’s working(the JS files I added are for a carousel, but does not change anything). I just started learning so I can’t even guess what I am doing wrong here. What can I do to link my JS files?

  • header.php, main.php, and js folder are in the root folder. Javascript files are in the js folder.

— This is how I linked JS file in header.php. inside of the head tag

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="js/Jquery.js"></script>
    <script type="text/javascript" src="js/lightslider.js"></script>
    <?php wp_head(); ?>
</head>
Tags:

6

Answers


  1. 0

    to fix this you can try adding that script at the end of the page and try this instead

    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script  src="js/Jquery.js"></script>
    <script  src="js/lightslider.js"></script>
    <?php wp_head(); ?>
</head>

    just removed

    type="text/javascript"

    from it and it will work for sure

    Login or Signup to reply.
  2. 0

    whenever you add any JS file add some unique number function after the extension.you can use timestamp because it change everytime.

    Just like following.(example is for PHP & Javascript)

    Because of cache sometimes it happens that your code doesn’t change.

    <script src="my_js_file.js?v=<?=time()?>" ></script>

    also if you are windows user just press CTRL + SHIFT + R key to hard refresh the browser to clear cache

    Login or Signup to reply.
  3. 0

    Can you please try to put a slash character in the front to make an absolute path like so:

    <script type="text/javascript" src="/js/Jquery.js"></script>
<script type="text/javascript" src="/js/lightslider.js"></script>
    Login or Signup to reply.
  4. 0

    In WordPress, you can either add JavaScript files via a WordPress theme or plugin.

    To link the JS from WordPress theme, you can use:

    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

    Similiarly, to link CSS from WordPress theme, you can use:

    wp_enqueue_style( $handle, $src, $deps, $ver, $media );

    Detailed usage can be found here.

    For WordPress plugins, you can add the following in your main theme file:

    add_action('wp_enqueue_scripts','init');

function init() {
    wp_enqueue_script( 'test-js', plugins_url( '/js/test.js', __FILE__ ));
}

    As mentioned in the comment above, you shouldn’t include jQuery without careful consideration.

    Login or Signup to reply.
  5. 0

    The correct way of adding js files to your WordPress theme is enquing them in functions.php like below

    wp_enqueue_script ('jquery', get_template_directory_uri() . '/js/jquery.js', '', '3.3.1', true);
wp_enqueue_script ('globaljs', get_template_directory_uri() . '/js/main.js', '', '', true);

    You also don’t need to add your own jQuery since WordPress ships with jQuery already. All you need to do is call it like so:

    wp_enqueue_script ('jquery');

    You can read more about the parameters here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    Login or Signup to reply.
  6. 0

    You need to enqueue that js file in your theme’s functions.php file.

    function my_load_scripts($hook) {

    // create my own version codes
    $my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
    $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
    
    // 
    **wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );**
    wp_register_style( 'my_css',    plugins_url( 'style.css',    __FILE__ ), false,   $my_css_ver );
    wp_enqueue_style ( 'my_css' );

}
add_action('wp_enqueue_scripts', 'my_load_scripts');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search