jQuery scripts not loading in WordPress - javascript

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

Related

How to add multiple script on functions.php in wordpress child theme?

I did try to put my scripts in functions.php but its not showing only the font awesome and all-script.js but the other script is not working. I want to add 5 more script. How do i do that. i think i made some mistake here. Im not a coder so i hope you understand guys. Thank you
//enqueues our locally supplied font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/assets/css/font-awesome.min.css');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/assets/js/all-script.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-1.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-2.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-3.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-4.js');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-5.js');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');
Try This Line of Code:
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/assets/css/font-awesome.min.css');
wp_enqueue_script( 'script-all', get_stylesheet_directory_uri() . '/assets/js/all-script.js');
wp_dequeue_script( 'jquery' );
wp_enqueue_script( 'script-jquery', get_stylesheet_directory_uri() . '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js');
wp_enqueue_script( 'script-1', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-1.js');
wp_enqueue_script( 'script-2', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-2.js');
wp_enqueue_script( 'script-3', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-3.js');
wp_enqueue_script( 'script-4', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-4.js');
wp_enqueue_script( 'script-5', get_stylesheet_directory_uri() . '/libs/jquery/scrpt-5.js');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');
You need to use a unique identifier for each script (first parameter for wp_enqueue_script). Since you've used script in each case, WordPress ignores all but the first one, thinking it's already loaded and it wouldn't be wise to load it twice.
Give them some meaningful names and you'll be able to use requirements (third parameter), e.g. tell wordpress that this script you're loading requires jQuery and OtherScriptOne. If those are registered (see Muhammed Hafil's answer), they will be loaded automatically and inserted before the script you're adding.
you need to register script and style before using them and you should use different handle for each script and styles .correct format is
function enqueue_our_required_stylesheets(){
wp_register_style('font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.min.css');
wp_enqueue_style('font-awesome');
wp_register_script('script', get_template_directory_uri(). '/assets/js/all-script.js');
wp_enqueue_script('script' );
}
Note : you don't need to register jquery since it is registered by wordpress itself, you can just enqueue them directly without registering. you can go through the wp registered scripts in their codex at https://developer.wordpress.org/reference/functions/wp_register_script/#core-registered-scripts

wp_head(); crashing apache (xammp)

first question here. I'm wondering if you guys can help me.
So I'm trying to pass a static Bootstrap theme website into a dynamic CMS wordpress site. So I coded the site in html/css, showed it to the client and now I'm in the process of turning it into a wordpress theme. Now this isn't my first wordpress site I've made but I do have an issue that has me stumped. I'm trying to link all the stylesheets and scripts through the wp_enqueue function system, and this is what I've come up with so far:
function.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('bootstrap' , get_template_directory_uri().'assets/css/bootstrap.min.css', array(), '1.0.0', 'all');
wp_enqueue_style('font-awesome' , get_template_directory_uri() . 'assets/css/font-awesome.min.css', array(),'1.0.0', 'all');
wp_enqueue_style('animate' , get_template_directory_uri() . 'assets/css/animate.css', array(),'1.0.0', 'all');
wp_enqueue_style('font' , get_template_directory_uri() . 'assets/css/font.css', array(),'1.0.0', 'all');
wp_enqueue_style('li-scroller' , get_template_directory_uri() . 'assets/css/li-scroller.css', array(),'1.0.0', 'all');
wp_enqueue_style('slick' , get_template_directory_uri() . 'assets/css/slick.css', array(),'1.0.0', 'all');
wp_enqueue_style('jquery_fancybox' , get_template_directory_uri() . 'assets/css/jquery.fancybox.css', array(), '1.0.0', 'all');
wp_enqueue_style('theme' , get_template_directory_uri() . 'assets/css/theme.css', array(bootstrap),'1.0.0', 'all');
wp_enqueue_style('style' , get_template_directory_uri() . 'style.css' , array(bootstrap),'1.0.0', 'all');
wp_enqueue_scripts('wow', get_template_directory_uri() . 'assets/js/wow.mim/js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('bootstrap', get_template_directory_uri() . 'assets/js/bootstrap.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('slick', get_template_directory_uri() . 'assets/js/slick.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_li_scroller', get_template_directory_uri() . 'assets/js/jquery.li-scroller.1.0.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_newsTicker', get_template_directory_uri() . 'assets/js/jquery.newsTicker.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_fancybox_pack', get_template_directory_uri() . 'assets/js/jquery.fancybox.pack.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('custom', get_template_directory_uri() . 'assets/js/custom.js' , array('jquery'), '1.0.0', true);
}
add_action("wp_enqueue_scripts", 'wpt_theme_styles');
?>
header.php
<!DOCTYPE html>
<html>
<head>
<title>8to Mandamiento</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
I've never used this function so it might be very crude or ill constructed, but I've been reading around that echoing in the header the stylesheets is not the correct form of linking it. however when I tried this system all i get is crashes ( https://imgur.com/a/2phNv )
anyone think they can help me put?
Well I found the answer to my own question. Here's what I was looking for.
To start, I shouldn't have enqueue styles or scripts directly. Before you enqueue styles or scripts, it's usually a good idea to register the styles/scripts like so:
function octavomandamiento_styles() {
/* Stylesheets */
wp_register_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css');
wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css', array(''), null, all);
...
... /*Rest of the styles*/
...}
add_action("wp_enqueue_scripts", 'octavomandamiento_styles');
for the sake of completeness I'd show a script example too
function octavomandamiento_scripts() {
/* Scripts */
wp_register_script('wow', get_template_directory_uri().'/js/wow.min.js');
wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.mim/js' , array('jquery'), null, true);
...
.../*rest of the function*/
...}
add_action("wp_enqueue_scripts", 'octavomandamiento_scripts');
Then the scripts should be loaded properly where you placed the:
<?php wp_head(); ?>
/* and */
<?php wp_footer(); ?>
Which should be place in the header.php and footer.php respectively.
Secondly I tried using both enqueues on one single function but this just continued to pop errors on me. I'm sure it is possible to do it all in one but I really can't be f*cked to figure out why it isn't working and honestly it still loads properly.
Lastly, theres the fact I had a sintaxis error on my enqueue scripts. you see when you're writing your function and you enqueueing and registering scripts, you're supposed to type:
wp_register_script('wow', get_template_directory_uri().'/js/wow.min.js');
wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.mim/js' , array('jquery'), null, true);
and I had put
wp_enqueue_scripts('wow', get_template_directory_uri() . 'assets/js/wow.mim/js' , array('jquery'), '1.0.0', true);
Did you catch the error? it took me a while to figure it out. You have to use the singular script when enqueueing and registering but when calling the wp_enqueue action, you have to use the plural scripts. It seems very logical in hind sight but oh well. You live and learn.
Hope this post become useful for anyone having this or any other enqueuing issue

Issues connecting JS/jQuery files with WordPress causes header to disappear

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

Javascript files aren't loading in Wordpress

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

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