Can't load js file into child theme for Wordpress - javascript

I'm trying to load a custom js file into a child theme. I have set up a folder within the child themes directory on FTP that contains a js file, but it does not work. Below is my code i used to enque the file.
<?php
function theme_name_scripts() {
wp_enqueue_script('myscript', /js/public.js);
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>

Replace
wp_enqueue_script('myscript', /js/public.js);
With
wp_enqueue_script('myscript', '/js/public.js');

if you want to load js file into child theme for Wordpress your code should like this.
<?php
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/public.js', array( 'jquery' ), '1.0', true);
}
?>

Related

dequeuing and enqueuing minified js files in childtheme wordpress

I'm trying to dequeue a minified js file from wordpress parent theme.
Can't seem to work out how to dequeue and then enqueue my own custom js file from child theme.
Here is my code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
}
The script in the parent theme is enqueued like this:
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
Is there something I'm missing in the code or is there a special way of dequeueing/enqueueing minified scripts?
Any help would be appreciated!! :)
There is just one mistake in your code. You are dequeuing and then enqueuing the same file.
Use this code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_stylesheet_directory_uri() . '/js/custom.min.js', array('jquery'), 1.0, true);
}
get_stylesheet_directory_uri() is the key here. It returns the path of the child theme. Also, I have removed the $js_minify_prefix variable from the code as it is not required.

Q:How can I include the js file in wordpress theme

I have a wordpress theme and It's work good.
Every things are working , images , bootstrap CDN , styke.css . but I have a big problem! my Javascript file is not working!!!!!
I write the JS codes in other file and I inclde the file in header.php file but It's not working.
If you have a true answer pleas help me.
Within your WordPress child theme functions.php file you would add the function:
wp_enqueue_script()
Example:
function add_child_theme_scripts() {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/child-theme-scripts-folder/your-script.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'add_child_theme_scripts' );
Ref: https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts
Add this code in your function file and edit it.
//Funtion that add script in header
function my_scripts() {
wp_enqueue_script( 'unique-script-name-id', get_template_directory_uri() . '/js/script-name.js', array(), '', false);
}
//Add action hook to call function
add_action( 'wp_enqueue_scripts', 'my_scripts' );

WordPress V4.3.1, My javascript isn't added to the page when using wp_enqueue_script

I have a JavaScript file that isn't being loaded and I'm not sure why. I'm customizing a theme (by creating a child theme) in WordPress and I have this functions.php file:
<?php
function enqueue_resources()
{
if (is_page("Projects")) {
wp_enqueue_script("isotope", "http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js", array("jquery"));
wp_enqueue_script("images-loaded", "http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js", array("jquery"));
wp_enqueue_script("my-script", get_stylesheet_directory_uri() . "/assets/js/my-script.js", array('jquery', 'isotope', 'images-loaded'), null);
}
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
add_action('wp_enqueue_scripts', 'enqueue_resources');
... function to print out currently enqueued scripts/styles
And this is the page where I'm trying to enqueue the script: http://dev.presspedal.com/rcnw/projects/ .
I've checked and the correct files/folders exist, the URL generated is correct, the other two scripts are being added to the HTML, no plugins are causing this issue (I deactivated all of them and it's still an issue), wp_head(); wp_footer; get_header(); and get_footer are all being called correctly and my-script.js is in the $wp_scripts->queue.
But my-script.js isn't being added to the HTML. It's just not there. Here's the weird part: sometimes my-script.js is added to my page, but when I clear cache and refresh, it's gone again.
Any help?

Twitter bootstrap. bootstrap javascript is working but others script wont

I was wondering why my other scripts wont work but the bootstrap.js is working. I have here my code for my functions.php on calling the scripts.
<?php
/*Linking of CSS Child Theme to Parent Theme + JavaScript*/
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/custom.css' ); <!--Working Javascript -->
wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri().'/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri().'/js/custom.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-easy-min-js', get_stylesheet_directory_uri().'/js/jquery.easy.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jquery-1.11.0.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
The other 3 scripts (custom.js , jquery.easy.min.js, and jquery-1.11.0.js) are working fine in LOCALHOST. however when I uploaded my wordpress site. this scripts are no longer functioning. can someone help with this? by the way this 3 scripts are for PAGE SCROLLING.
Maybe you misspelled 'jquery' as 'jqeury'?
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jqeury-1.11.0.js', array( 'jquery' ) );
But if that wasn't misspelled, then maybe you're loading jQuery twice, because jqeury-1.11.0.js looks like jQuery itself. In that case, get rid of this line. Wordpress has it's own jQuery, which you loaded the first time you put array('jquery') as a dependency in a wp_enqueue_script statement.
Add jQuery before bootstrap. Bootstrap depends on it
I think you have to place jquery at the top of scripts so it will work fine

I need to change order of scripts in footer of my wordpress site so my custom main.js file loads last of all scripts

This is how I call my custom script in functions.php my child theme:
<?php
/*Functions file for child theme*/
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_stylesheet_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';
function mychildtheme_setup() {
show_admin_bar(false);
wp_register_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true);
wp_enqueue_script( 'main' );
}
add_action('after_setup_theme', 'mychildtheme_setup');
add_action( 'wp_enqueue_scripts', 'mychildtheme_setup', 10000 );
?>
But when I look in source code I see that my main.js loads before contact-form.js and I want my main.js script loads after that one.
How can I change the order so my script loads last of all scripts?
Need answer still?Similar question has been answered here: https://wordpress.stackexchange.com/questions/114473/wp-enqueue-script-how-to-change-loading-order-of-scripts.
Keyword is $deps.

Categories

Resources