Ok, I may be an absolute idiot but I can't seem to figure this out... In my functions.php file I have this function that enqueues my style sheets and script files:
function load_style_sheets() {
wp_enqueue_script( 'jquery');
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/includes/css/bootstrap.min.css', '', '','all' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/includes/js/bootstrap.min.js', '', array( 'jquery' ), true );
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/includes/js/custom.js', '', array( 'jquery' ), true );
}
add_action('wp_enqueue_scripts', 'load_style_sheets');
I intentionally have the last value of my scripts set to 'true', because I need my script to load in after the body content, however- they don't appear to be loading.
Basically what I want to happen is everytime I declare a div with the class of "ornament", my JS file runs this:
// add divider line ornaments
function addLineOrnaments() {
$(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
}
addLineOrnaments();
When testing this on a static HTML site I had no problems, so I'm guessing I'm doing something wrong in WordPress.
I have noticed that Wordpress loads jQuery in 'safe' mode, where you can't use $ as a shorthand. Try using
jQuery(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
instead
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'm having issues adding jQuery/JavaScript files to my custom Bootstrap WordPress theme.
Here is the tutorial I'm using to build my theme (Please DO NOT criticize me for using something that's 3 years old. There's just a few modifications needed
Here are the files I would like to add to the functions.php file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Here is what I have tried, the first one following the tutorial from it being a jquery file. The other two are having issues.
When I apply these and the wp_footer();
The header disappears as shown below.
Also having problems with the jQuery file that is from the jQuery library online.
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/vendor/jquery-1.11.2.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/vendor/bootstrap.min.js', array() );
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/main.js', array() );</pre></code>
Sites I've looked at
when you are using wp_enqueue_script, the handle name ( first attribute ) must be uniqe for each one. so try following code.
function my_bootstrap_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/vendor/bootstrap.min.js', array('jquery'), '', true);
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'my_bootstrap_scripts');
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 tried to attach my scripts to WordPress. I read all topics and tried all but did not get the solution, so i created a fake WordPress theme and uploaded it. Please, if you can solve this let me know.
Here is the file: my theme
Using Flexslider Sticky Header and Responsive Navigation
I guess that wp_enqueue_script does not work.
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
Please edit my theme.
thanks
OK here are the steps to take to resolve your issue.
1) Check you've added necessary actions.
Open up header.php inside your theme folder. Check that before the tag you have the wp_head action.
<?php wp_head(); ?>
Open up footer.php and before the closing body tag check you have the wp_footer tag.
<?php wp_footer(); ?>
These tags are necessary for the scripts to be added correctly.
2) Check your JS exists.
Next up is really simple. Open the JS folder and check the files you're attempting to load exist. WordPress will ignore them completely if they don't exist instead of adding a broken URL.
3) Check you're using the correct hook.
I noticed some comments / answers suggested use of init or wp_footer as the hook to load your JS but this is incorrect. You need to use the wp_enqueue_scripts hook. This should be placed inside functions.php
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
If you're still having an issue let me know and I'll go over further possibilities however the likelihood of that being necessary is slim. Also I'd like to highlight the name of the action is wp_enqueue_scripts. I've noticed a number of similar questions lately where the problem has been users have forgotten the 's'.
Try this
<?php
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
add_action('wp_footer', 'theme_name_scripts');
?>
Try to place your myscripts.js after you've included flexslider scripts:
function theme_name_scripts() {
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
}
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.