Having problems enqueuing a script in the footer.
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), false, true);
Here's the wp_enqueue_script definition:
wp_enqueue_script(
$handle
,$src
,$deps
,$ver
,$in_footer
);
As you can see I am setting $in_footer to true. This does not work for me. Without that argument it works fine and puts it in header.php. Why doesn't it work with $in_footer?
By default WordPress default JavaScripts won’t move to the footer, a workaround is to add its path :
wp_enqueue_script('jquery','/wp-includes/js/jquery/jquery.js','','',true);
See detailled post about this
Make sure you have the wp_footer() right before the </body> tag. See the $in_footer parameter for more info. You also need to call this before wp_head has run. Try also using this action.
add_action('wp_enqueue_scripts', 'add_scripts_to_pages');
Another thing to try is using NULL as 3rd and 4th parameters.
As an addition to #Nick's answer;
if you have a PHP problem before wp_footer() you wont be able to see your script in footer. Source is https://wordpress.org/support/topic/enqueuing-scripts-in-footer-does-not-working-with-wordpress-36.
To follow on from Nick's reply just wanted to add an example. Add all 5 parameters for the wp_enqueue_script function then the script is loaded in the footer. Adding NULL instead of leaving the parameters blank works here for $deps and $ver.
Reference Format:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
General Example:
wp_enqueue_script('custom-handle-name', get_template_directory_uri() . '/custom-src.js', NULL, NULL, true );
Your Example:
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', NULL, NULL, true);
Source:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Related
I am doing this in a plugin. I have the following in an attempt to only enqueue a script when my template file archive-my_custom_post_type.php is used.
add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue($hook) {
if(is_page_template('archive-my_custom_post_type')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}
}
It is not working. It does not load the jquery file on ANY front-end pages, let alone when archive-my_custom_post_type.php is rendered. However, when I remove that if conditional, it loads on ALL my front-end pages.
Question: How can I do a conditional enqueue of a script whenever my custom post type archive template is being used?
You need to use the complete file name, including .php. So in your case you will need to use:
is_page_template('archive-my_custom_post_type.php')
Also, if your template is under a subdirectory you will need to specify that as well.
Ref: https://developer.wordpress.org/reference/functions/is_page_template/#more-information
If you're using is_page_template function, you should also use as parameter the full path (including subdirectories) for the template. For example, if your template is located in your-theme-directory/templates/template-file.php then you should use it like this:
if(is_page_template('templates/template-file.php')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}
here is my code in the functions.php file:
function load_script() { wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/main/js', false, null, true); };
add_action('wp_enqueue_scripts', 'load_script');
The directory is correct and the script renders properly if I insert a tag directly in the php with the src set to get_stylesheet_directory_uri() . '/js/main.js'.
I have tried a few solutions from previous related questions here and have had no luck. At this point I am tempted to go with what works but I would love to go about doing this the correct way.
1. First of all, I have seen that, there is a syntax error into your code.
; after function's closing bracket.
2. And also i have sen that you have used false at place of depth parameter of wp_enque_scripts.
3. Also I have seen that your file name is /js/main/js
But this wrong. The js file name should be file_name.js
so the correct code is
function load_script() {
wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/main/file_name.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'load_script');
Try the code , then let me know the result
File name is missing. It could be:
function load_script() {
wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/main/js/main.js', array(), false, false);
};
add_action('wp_enqueue_scripts', 'load_script');
Can someone please help me out? all my JavaScript files are not being read in my WordPress theme, even though they are en-queued properly and i have used the jQuery no conflict method. They are simply not working. I checked the console there are no errors. Also tried emptying the browser's cache still nothing. I'm creating my own theme. What can i do?
function wpps_theme_styles() {
wp_register_script( 'wppsmodernizr',get_template_directory_uri().'/js/vendor/modernizr-2.7.1-respond-1.4.2.min.js', '','',false );
wp_register_script( 'bootstrapmin',get_template_directory_uri().'/js/vendor/bootstrap.min.js',array('jquery'), '', true );
wp_register_script( 'plugins',get_template_directory_uri().'/js/plugins.js' , array('jquery'), '',true);
wp_register_script( 'app',get_template_directory_uri().'/js/app.js' , array('jquery'), '',true);
wp_register_script( 'formwizard',get_template_directory_uri().'/js/pages/formsWizard.js', array('jquery'), '', true );
wp_register_script( 'custom',get_template_directory_uri().'/js/pages/custom.js', '', '', true );
wp_register_script( 'jquery',get_template_directory_uri().'js/vendor/jquery-1.11.1.min.js', '', '', '' );
wp_enqueue_script('wppsmodernizr');
wp_enqueue_script('bootstrapmin');
wp_enqueue_script('plugins');
wp_enqueue_script('app');
wp_enqueue_script('formwizard');
wp_enqueue_script('custom');
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'wpps_theme_styles');
Okay, based on your latest update, and the error message, here are a few comments. This won't necessarily solve your problem, but there's too much to add as a comment. Please update the question with any new error messages (either console errors or PHP errors).
First, don't add your own version of jquery. WordPress has one built in, so use that (see the "Default Scripts Included and Registered by WordPress" section of the wp_enqueue_script documentation). It's possible part of the problem is caused by reusing the built-in handle, or maybe that the path you used looks wrong (it's missing a / before the js folder name).
Secondly, if you're not using a parameter, but need to pass a value, use the default from the documentation. I don't know if this is causing any problem, but I'd err on the side of caution. So if there are no dependencies, use array() for that parameter; and if you're not providing a version, use false.
UPDATE
Thanks for the code. I've set it up (activated the theme and the plugins). I wasn't seeing any error in the console, then I realised you'd commented out app and plugins in the source. I uncommented them, then I got a different error to the one you mentioned: $(...).wysihtml5 is not a function. I searched the source, and can't find any other reference to wysihtml5, so I commented out that line just to test.
Same thing happened with $('.select-chosen').chosen({width: "100%"});, so I commented it out.
$('.select-select2').select2(); failed too. There seems to be some code for that in the category-posts plugin, but I can't find it being enqueued anywhere, so I commented that out too.
$('.input-slider').slider(); failed as well. I don't know what slider you're expecting to use, so I added the built-in jquery-ui-slider, and made app dependent on it. If you're using a different slider you'll have to enqueue the script and/or make app dependent on the script that contains it.
$('.input-tags').tagsInput({ width: 'auto', height: 'auto'}); - commented it out. There's no other reference to it.
$('.input-datepicker, .input-daterange').datepicker({weekStart: 1}); - added jquery-ui-datepicker. Same comments apply as for slider
Commented out the blocks referencing timepicker and easyPieChart. There are no other references to them.
TL;DR
You seem to be missing the source for quite a few functions app.js depends on. I commented out lines 86-93, 98-99, and 105-117 of app.js, and added dependencies to pull in the jQuery UI slider and datepicker. That stops the errors in the console, though I have no idea if it'll fix your problem - it depends on whether you need the commented out functionality, and which slider and datepicker you want to use. Presumably you know where to get the code you need.
At least the original problem is solved - all the js files are in the page source.
If you want me to check anything else, I'll probably need a database dump. I'm using the content from a default WordPress installation, and it's possible I'd need your content to see exactly what's going on.
One other thing - you seem to have an unmatched PHP tag somewhere. When I view the source, I see ?> before the content.
Here's my latest wpps_theme_styles()
function wpps_theme_styles() {
wp_register_style( 'bootstrapcss', get_template_directory_uri().'/css/bootstrap.min.css' );
wp_register_style( 'maincss', get_template_directory_uri().'/css/main.css' );
wp_register_style( 'plugins', get_template_directory_uri().'/css/plugins.css' );
wp_register_style( 'themes', get_template_directory_uri().'/css/themes.css' );
wp_register_style( 'custom_themes', get_template_directory_uri().'/css/custom.css' );
//wp_register_style( 'googlefonts' ), ;
wp_enqueue_style('bootstrapcss');
wp_enqueue_style('maincss');
wp_enqueue_style('plugins');
wp_enqueue_style('themes');
wp_enqueue_style('custom_themes');
//wp_enqueue_style('googlefonts','');
wp_register_script( 'wppsmodernizr', get_template_directory_uri().'/js/vendor/modernizr-2.7.1-respond-1.4.2.min.js', array(), false, false );
wp_register_script( 'bootstrapmin', get_template_directory_uri().'/js/vendor/bootstrap.min.js', array('jquery'), false, true );
wp_register_script( 'app', get_template_directory_uri().'/js/app.js', array('jquery', 'bootstrapmin', 'plugins', 'jquery-ui-slider', 'jquery-ui-datepicker'), false, true);
wp_register_script( 'plugins', get_template_directory_uri().'/js/plugins.js', array('jquery'), false, true);
wp_register_script( 'formwizard', get_template_directory_uri().'/js/pages/formsWizard.js', array('jquery'), false, true );
wp_register_script( 'custom', get_template_directory_uri().'/js/pages/custom.js', array('jquery'), false, true );
wp_enqueue_script('jquery'); // Built in version
wp_enqueue_script('jquery-ui-draggable'); // Built in version
wp_enqueue_script('jquery-ui-slider'); // Built in version
wp_enqueue_script('jquery-ui-datepicker'); // Built in version
wp_enqueue_script('wppsmodernizr');
wp_enqueue_script('bootstrapmin');
wp_enqueue_script('app');
wp_enqueue_script('plugins');
wp_enqueue_script('formwizard');
wp_enqueue_script('custom');
}
try this by replace this code
function wpps_theme_styles() {
wp_register_script( 'wppsmodernizr',get_template_directory_uri().'/js/vendor/modernizr-2.7.1-respond-1.4.2.min.js' );
wp_register_script( 'bootstrapmin',get_template_directory_uri().'/js/vendor/bootstrap.min.js',array('xyz'), 'false', 'true' );
wp_register_script( 'formwizard',get_template_directory_uri().'/js/pages/formsWizard.js', array('custom.js'), 'false', 'true' );
wp_enqueue_script('xyz');
wp_enqueue_script('wppsmodernizr');
wp_enqueue_script('bootstrapmin');
wp_enqueue_script('formwiz');
}
add_action('wp_enqueue_scripts', 'wpps_theme_styles');
I enqueue a bunch of scripts into the footer of my page:
function core_scripts() {
wp_deregister_script('jquery');
wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js', false, null, true);
wp_register_script('bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', array('jquery'), '3.1.1', true);
wp_register_script('flexslider', get_template_directory_uri().'/js/jquery.flexslider-min.js', array('jquery'), '2.2.2', true);
wp_register_script('jqzoom', get_template_directory_uri().'/js/jquery.jqzoom-core-pack.js', array('jquery'), '2.3', true);
wp_register_script('fancybox', get_template_directory_uri().'/js/jquery.fancybox.pack.js', array('jquery'), '2.1.5', true);
... a bunch of others ...
}
add_action('init', 'core_scripts'); // Add Custom Scripts
function write_site_scripts()
{
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap');
wp_enqueue_script('flexslider');
wp_enqueue_script('jqzoom');
wp_enqueue_script('fancybox');
...etc...
}
add_action('wp_enqueue_scripts', 'write_site_scripts'); // write all enqueued scripts
function write_custom_scripts()
{
$html = "<!-- Custom script -->
<script>
var custom = '1';
</script>";
echo $html;
}
add_action('wp_footer', 'write_custom_scripts'); // this script writes in the footer before the dependent js scripts
My problem is that the custom script is always written to the page before the jQuery scripts, I guess because the custom script is written to the page via an echo write command.
How can I add custom javascript code into the footer after the jQuery scripts have been written to the page? ie. I need to delay the add_action('wp_footer', 'write_custom_scripts'); to be executed at a later moment, or how can I use enqueue to add a custom javascript?
Note I have removed the CDN code posted earlier since this leads everyone into another discussion - a valid one, but it's not the issue I am after at this moment.
Edit II
Since the question has changed in essence many times, and In order to save you from reading ( e.g. - understanding ) all of the long explanation below, just use .
add_action('wp_footer', 'write_custom_scripts',9999);
This will set the priority to very high and will probably echo your code last ( unless you or other plugin / theme developers used a higher priority or later filter ..)
For those who want to do the right way :
function my_javascripts() {
wp_enqueue_script('the-script-handle',
'path/to/file.js',
array('jquery','other_script_that_we_depend_on'),
'scriptversion eg. 1.0',
true);
}
add_action('wp_enqueue_scripts', 'my_javascripts');
When you enqueue a script like above ( the right way ) , you can see that it wp_enqueue_script() has 4 arguments.path, dependencies ,version ,and in-footer .
This is the only right way to load a script , and if you need , just enqueue also jquery at the same function -- wp will make sure it loads first .
The dependencies means that wp will not load your script UNLESS jQuery is already loaded and will try to load jQuery FIRST ...
The LAST argument will actually define weather to load your script in the FOOTER ( TRUE ) or in header ( FALSE )
That being said , you can always load jQuery in the HEADER and not footer ( but it is not so recommended )
After that , For the last bit of your script , you can echo it in the footer , and you can also control how and when to add it .
What I do not understand , is the overall aim of your method . ( this part is about the "doing it wrong " )
Firstly - I think that loading from CDN is not a good IDEA . AND I AM NOT ALONE. it is to be considered a bad practice in WP without any meaningful Pros ( the time issue is a joke since you will be probably loading a LOT of other scripts directly AND scripts are Cached ).
While doing it - it is good that you think of a fallback, but the fallback should be wp own version - and not one that you include yourself .
If you still insist on doing it wrong , you can always do something like ( or just change order of execution ):
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_footer_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
// your stuff
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_footer_scripts', 5);
Which basically allow you to echo your stuff before or after the wp_footer action at will And while technically it will work -. it is still wrong .
Edit I After question edit .
you have several problems in that code .
you are registering jQuery (CDN ) with the handle jquery which is reserved for WP.
If you want to do that ( and you shouldn´t . please don´t ) you need to deregister jquery BEFORE registering it again .
<?php wp_deregister_script( 'jquery' ); ?>
Again. I can not stress enough how wrong that is .
2 . you are registring the whole bunch of script - but where do you enqueue them ?
3 . Again . Like in comments ( I think you still do not understand )
If you have a script to add to the footer - you need to register and enqueue it with dependencies .. ( the right way )
In your case from edited question :
make a file called my_script.js
var custom = '1';
Enqueue it !
wp_enqueue_script('the-script-handle',
'path/to/my_script.js',
array('jquery','other_script_that_we_depend_on'),
'0.0.1',
true);
In this case , your script will load AFTER the dependencies you listed ...
What you are trying to do is echoing directly .
As for the comment of how to correctly pass variables - read here
And you can also do something like this ( objects ):
$data = (object) array(
'render' => 'canvas',
'size' => 100,
'radius' => ($q_corner_r * 0.3),
);
$output .=
<script type="text/javascript">;
//<![CDATA[
var options = ' . json_encode($data) . '
// ]]>;
</script>';
I have been looking for an answer for this in SOF but didn't find a clear answer
I have a plugin that forces pages to be shown when certain conditions are met. but when i try to include css files for styling i get no response .
I tried to include the file using normal html and this was a failure
then tried the wp_register_style and wp_enqueue_style as such:
function rw_add_style(){
$rw_path = plugins_url('kawaleb/style.css');
wp_register_style('testili',plugins_url('kawaleb/style.css'));
wp_enqueue_style( 'testili' );
}
add_action ('wp_enqueue_scripts','rw_add_style');
wp_enqueue_style( 'testili' );
}
I placed this code on the page that should be shown when the conditions are met
What I don't know here is how to procede after enqueing !
do I need to use html to include the stylesheet file ( and then what is the use of enqueing ?) or does it do that by itself (and then what I am missing here ? )
In the doc of codex they dont go further than telling you to register the style then enqueue it !!!
Thank you all :)
You don't need to register the style, you can just enqueue it. Also, you mentioned that you've put the code in the file where you'd like it to display, you should put it in the index file of your plugin, so in /your-plugin/index.php or whatever the main file is called, add this code:
function rw_add_style() {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
If you need it only on a certain page then you should add your conditional within the function, so you could do this for example:
function rw_add_style() {
global $post;
if ( $post->post_name == 'post_name' ) {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
And you can work out what the post name is for the page you need to enqueue it for by temporarily adding the following code to the page template:
global $post;
echo $post->post_name;
To be clear, you don't need to add any html <link> to include the CSS as you're right, there would be no point in enqueuing it then. Just add the enqueue as I described above in the main index file of your plugin and it will be automatically included in the wp_head() in your header and output just before the </head>.
I hope this helps. Good luck. =)