How to use external JavaScript file in PHP documents?-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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/

CodePudding user response：

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');