quick question here.
I am adding custom javascript to my wordpress site, i have header-tab.js saved in the child theme's js folder, and tried to call on it with enqueue_script in my child theme's functions.php as shown here:
function includes_header_tab()
{
wp_enqueue_script( 'header-tab', get_template_directory_uri() .'/js/header-tab.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>
this does not seem to work, can anyone see if there is a problem in my code? or am i missing something? or it might be my javascript file that is at fault?
you are missing a couple of data, first register and then enqueue
function includes_header_tab()
{
wp_register_script( 'header-tab', get_template_directory_uri('/js/header-tab.js', __FILE__ ), array( 'jquery' ));
wp_enqueue_script( 'header-tab' );
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>
As mentioned the get_directory_template_uri manual page:
In the event a child theme is being used, the parent theme directory URI will be returned, get_template_directory_uri() should be used for resources that are not intended to be included in/over-ridden by a child theme. Use get_stylesheet_directory_uri() to include resources that are intended to be included in/over-ridden by the Child Theme.
You simply got the parent's uri and not the child's.
Related
I am creating a WP theme using Bootstrap 5 and I have encountered a problem that I cannot solve. I would like to place the bootstrap files directly into the theme files. I have successfully done this with the .css files, but I am having problems with the .js files. Do any of you perhaps have an idea what I am doing wrong that elements like navbar-toggler are not working? By including the js file <script src="_TEMP0_#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> in the theme using the CDN everything works. When I do it manually it no longer works.
Here is an excerpt from my functions.php file:
function imago_theme_scripts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700;900&display=swap" rel="stylesheet', array(), null );
wp_enqueue_style( 'imago-theme-style', get_stylesheet_uri(), array('imago-bootstrap-css'), '1.0.0' );
wp_style_add_data( 'imago-theme-style', 'rtl', 'replace' );
wp_enqueue_script( 'imago-bootstrap-popper', 'https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js', array(), null, true );
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), null, true );
//wp_enqueue_script( 'imago-bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/js/bootstrap.bundle.min.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'imago_theme_scripts' );
I still tried this way by replacing the popper.min.js and bootstrap.min.js script with:
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js', array(), null, true );, but unfortunately that doesn't change anything either. Navigation in the mobile version still doesn't work.
The directory structure is preserved correctly.
In the first configuration you can see that the `popper.min.js' file is plugged before the 'bootstrap.min.js' file according to the documntation.
They may not be working because you're not including jQuery to the dependencies.
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), null, true );
Other than that, they are loading, your nav console indicates that... ...are there any errors in the console?
I have an HTML form which requires a javascript and JQuery to calculate prices. This is what the form looks like with the javascript implemented and everything working correctly: https://counterboosting.com/wp-content/themes/appointment/csgoboost/
Now I would like to put this form onto my wordpress website page. All the HTML shows up and it seems like the CSS also works but the Javascript just won't work.
There are 3 Javascripts and 3 CSS files to be linked, as you can see if you look at the source code of the link I put above.
I tried to Enqueue the scripts in functions.php file like this:
function wp_theme_enque_scripts() {
wp_enqueue_script( 'boosting', get_template_directory_uri() . '/csgoboost/js/boosting.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/csgoboost/js/bootstrap.min.js', array(), '3.3.6', true );
wp_register_style('bootstrap.css', get_template_directory_uri() . 'csgoboost/css/bootstrap.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'bootstrap.css');
wp_register_style('boosting.css', get_template_directory_uri() . 'csgoboost/css/boosting.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'boosting.css');
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
I then put this code in the HTML page:
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/jquery.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/bootstrap.min.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/boosting.js"></script>
This is the page I want the form to display on but the javascript is not working: https://www.counterboosting.com/buy-csgo-rank-boosting/
I'm really desperate to fix this, its been over a week that I've been try this. I'd even reward anyone able to help me here.
Thank you so much in advance (as you might tell, I am not very experienced in this field)
I see SyntaxError: expected expression, got '<' from my browser console from your page https://www.counterboosting.com/buy-csgo-rank-boosting/ I think you can fix it from there first.
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?
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
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.