CODEWITHSUNDEEP
javascriptphpjquerywordpressfunction
user12391988
user12391988

Reputation:

Cant get javascript and Jquery to work in functions.php

Here's My first post!

I am a bit of a newb to coding, I know enough html and css, mixed with using frameworks such as bootstrap, to develop a basic website and have started learning how to build themes in wordpress using php.

My goal was to build a theme using bootstrap and javascript but I am having trouble with the simplest of tasks such as getting the scripts to work in functions.php. I have been following some tutorials online which just didn't work and after a lot of experimenting and researching I cant seem to get anything to work.

My functions.php code is:

<?php

function styles() {
    wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    $dependencies = array('bootstrap');
    wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );

    wp_register_style('style', get_template_directory_uri() . 'style.css');
    $dependencies = array('style');
    wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );



function scripts() {

    wp_deregister_script('jquery3.4.1');
    wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . 'jquery-3.4.1.min.js', '', 1, true);

    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );

    wp_enqueue_script('customjs', get_template_directory_uri() . 'scripts.js', '', 1, true);

}
add_action( 'wp_enqueue_scripts', 'scripts' );


function title(){
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );


?>

and I have a test piece of code which displays a pop-up alert in the scripts.js (and the footer is calling the ?php wp_footer();? ):

$(document).ready(function(){
    alert('test');
})

I have also experimented with the load order thinking that bootstrap js may be interfering with my own js but which ever way I position them I cannot get them to work.

Apologies if this is a dumb one and if this has been asked before but nothing I have looked up seems to work and any help would be greatly appreciated.

Many thanks!

Upvotes: 0

Views: 58

Answers (2)

user12391988
user12391988

Reputation:

Ok found the issue...

Using console I could see that it couldn't find the path to the files but I couldn't work out why as it was pulling through the styling but not the scripts.

I then went back to my code and realised there was no root on the files I was linking to.

Using atom as my text editor I was right clicking on the project path and copying the project path which didn't pull over the root of the path (I.E only pulling over scripts.js instead of /scripts.js).

Once I put the forward slash in on all linked files everything fixed.

Such a simple fix that a newbie like me will not now forget!

Here's the final working code for anyone who is interested:

<?php



function styles() {

    wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    $dependencies = array('bootstrap');
    wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );

    wp_register_style('style', get_template_directory_uri() . '/style.css');
    $dependencies = array('style');
    wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );



function scripts() {

    wp_deregister_script('jquery3.4.1');
    wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . '/jquery-3.4.1.min.js', '', 1, true);

    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );

    wp_enqueue_script('customjs', get_template_directory_uri() . '/scripts.js', '', 1, true);

}
add_action( 'wp_enqueue_scripts', 'scripts' );


function title(){
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );


?>

Upvotes: 1

mediaguru
mediaguru

Reputation: 1917

You may have to replace your $ in your javascript with jQuery. jQuery is in compatibility mode by default in WP. That means that the typical $ shortcut for jQuery doesn't work.

 jQuery(document).ready(function(){
     alert('test');
 })

Upvotes: 2

Related Questions