I am developing a simple Wordpress app but I am having an issue as all of the plugin scripts are rendered before those which are enqueued in my functions.php.
Here is a sample section of the functions.php:
function my_scripts() {
wp_register_script('app-js', get_template_directory_uri() . '/javascripts/app.js', array('jquery'), null, true );
wp_enqueue_script('app-js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
The important this to note is that (following best practice my JS is set to render at the bottom of the page.
I also have couple of plugins running on the theme. The problem is that the output looks like this:
<!-- Note the plugin appears first -->
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/my-plugin/acl-plugin.js'></script>
<!-- And the main JS appears second -->
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/my-theme/javascripts/app.js'></script>
</body>
</html>
How can I force Wordpress to display the main JS (which i believe is rendered by wp_head() to appear at the very bottom of the page?
The WordPress wp_head() method will only output scripts or styles that have that last parameter in the WordPress wp_enqueue_script() set to false.. when it is set to true it will render in the footer via the wp_footer()
you can change the priority of when its called and inserted by adjusting the $priority parameter in the add_action()
http://codex.wordpress.org/Function_Reference/add_action
$priority
(int) (optional) Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action. Default: 10
add_action( $hook, $function_to_add, $priority, $accepted_args );
And also look at the following two WordPress methods:
wp_enqueue_script() :
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
wp_register_script() :
https://developer.wordpress.org/reference/functions/wp_register_script/
wp_register_script( string $handle, string $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
Try this..
You might have to play with that $priority parameter
function my_scripts() {
wp_register_script('app-js', get_template_directory_uri() . '/javascripts/app.js', array('jquery'), null, true );
wp_enqueue_script('app-js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 20, 1);
Related
This question already has answers here:
Wordpress how to use jquery and $ sign
(17 answers)
Closed 4 years ago.
I include some custom javascript into my wordpress theme. So I added this lines to my functions.php
function add_theme_scripts() {
wp_enqueue_script('equalheight', get_template_directory_uri().'/js/equalheight.js', array ( 'jquery' ), true);
wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array ( 'jquery' ), true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
But the scripts having problems with jquery. I will get this in my browser console:
TypeError: $ is undefined
Why? The dependence to jquery is set.
Does anyone have an idea?
If you will check for the declaration of wp_enqueue_script then its like that:-
wp_enqueue_script(
string $handle, string $src = '', array $deps = array(),
string|bool|null $ver = false, bool $in_footer = false
)
Its third parameter is used to define the dependency and in your code, you defined that these two files need jquery to work correctly.
If you don't need jquery, use this
function add_theme_scripts() {
wp_enqueue_script(
'equalheight',
get_template_directory_uri().'/js/equalheight.js',
array (), true
);
wp_enqueue_script(
'script',
get_template_directory_uri().'/js/script.js',
array (), true
);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
You have dependency for jQuery set, but you have not loaded jQuery itself:
function add_theme_scripts() {
wp_enqueue_script("jquery");
wp_enqueue_script('equalheight', get_template_directory_uri().'/js/equalheight.js', array ( 'jquery' ), true);
wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array ( 'jquery' ), true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
Also as others have mentioned in the comments, you need to use jQuery-variable instead of $.
My theme uses the bundled jQuery of Wordpress and I want to load it asynchronously. (Yeah, PageSpeed Insights...)
There is a hook for this script_loader_tag. You can use it as below
add_filter( 'script_loader_tag', 'add_async_to_script', 10, 3 );
function add_async_to_script( $tag, $handle, $src ) {
//You can use this to make all async
$tag = str_replace( ' src', ' async src', $tag );
// You can use this to make it work as below for a specific script
if ( 'dropbox.js' === $handle ) {
$tag = '<script async type="text/javascript" src="' . esc_url( $src ) . '"></script>';
}
return $tag;
}
Depending on the functionalities of your website, deferring or loading jquery asyncronously might possibly impact on the way the page is loaded or even break functionality. It may as well run smoothly.
But in order to give you a correct answer I must recommend you not to do it.
Here is some reference if you want to still try
https://wpshout.com/make-site-faster-async-deferred-javascript-introducing-script_loader_tag/
What would be the most appropriate solution to enqueue a script in WordPress only when a class of .google-map is detected on that page?
In my main.js I can detect the item on the page and do something, but I am not so sure you can use the enqueue function in a JS file.
$(document).ready(function(){
if (document.getElementsByClassName('.google-map')) {
alert(true);
}
});
The above is just attempt #1. Please feel free to provide any other solutions, using functions or anything else. I am simply not too sure what is possible that's why I don't have more examples.
Ordinarily add the file google.js (or whatever name you choose) to WP footer by adding the code below into your functions.php file. This will add the javascript file into WP footer the right way. https://developer.wordpress.org/reference/functions/wp_enqueue_script/
function my_scriptings_scripts() {
wp_enqueue_script( 'my_scriptings', get_template_directory_uri() . '/js/google.js', array('jquery'), '20171212', true );
}
add_action( 'wp_enqueue_scripts', 'my_scriptings_scripts' );
Inside your js/google.js
Using Vanilla javascript, check for the element with class name. If it exists then call the function for the action.
var element = document.getElementByClassName('google-map');
if (typeof(element) != 'undefined' && element != null)
{
//call function for google actions
google_acts_like_this();
}
function google_acts_like_this(){
console.log('Google will take over the world');
alert('Google will take over the world');
}
OR Try wienter code hereth Jquery -
if ($(document).find(.google-map).length > 0)
{
//If the element exist, then do something.
google_acts_like_this();
}
function google_acts_like_this(){
console.log('Google will take over the world');
alert('Google will take over the world');
}
I created my own javascript file and now I want to integrate into my module. I'm trying to do as told in this site https://developer.wordpress.org/reference/functions/wp_enqueue_script/
But it does not work, I don't understand why
P.S: I am in the main file of my module (exampe.php)
class exemple
{
public function __construct()
{
register_activation_hook(__FILE__, array('exemple_bd', 'install'));
register_uninstall_hook(__FILE__, array('exemple_bd', 'uninstall'));
include_once plugin_dir_path( __FILE__ ).'settings.php';
new Settings();
add_action('admin_menu', array($this, 'add_admin_menu'));
add_action('admin_init', array($this, 'load_JS'));
}
public function add_admin_menu()
{
add_menu_page('monTitre', 'Monplugin', 'manage_options','xxx', array($this, 'menu_html'),'dashicons-email');
add_submenu_page('xxx', 'NouveauTitre', 'NouveauTitre', 'manage_options', 'xxx', array($this, 'menu_html'));
}
public function load_JS()
{
wp_register_script('myfunction',plugins_url( '/js/function.js', __FILE__ ));
wp_enqueue_script('myfunction');
}
You need to register them with action hook "wp_enqueue_scripts".
Use "admin_enqueue_scripts" for admin scripts.
The function should be called using the wp_enqueue_scripts action hook if you want to call it on the front-end of the site, like in the examples above...
https://developer.wordpress.org/reference/functions/wp_enqueue_script/#notes
if all the paths are good, an you have a custom theme, make sure your main theme file references wp_head()
it should be just before the closing 'head' tag like this:
<?php ...
wp_head();
?></head>
I am trying to run a function on a specific WP page template. The specific page is called archive.php.
This is what I have so far in functions.php
if ( is_page_template( 'bloginfo("stylesheet_directory")/archive.php' ) ) {
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope-hideall.js', array('jquery', 'isotope'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
} else {
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
}
The different between the functions is isotope-hideall, which hides all categories when the page is loaded. When not using if/else it hides all categories from all page templates when page is loaded, and that is not what I want. Therefor I am using if/else to locate the correct page template.
I have tried the following, but nothing seems to work:
is_page_template( 'archive.php' )
is_page_template( 'get_template_directory_uri()'.'/archive.php' )
Am I doing something wrong, or do you have a working solution for this?
Page can be found here.
As Pieter Goosen points out, archive.php is reserved for built in WordPress-functionality. Rename your file to something else, for instance to archives.php and make sure you are naming your custom page template at det top of the file:
<?php /* Template Name: Archives */ ?>
Your code should then work with is_page_template('archives.php') as longs as its located on root in your template folder. If not add whatever folder structure you have in front of the filename, like so: /folder/folder2/archives.php .
To avoid repeating the function twice you should also consider solving this something like so:
function add_isotope( $isotope ) {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/' . $isotope . '.js', array('jquery', 'isotope'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
if ( is_page_template( 'archives.php' ) :
add_isotope( 'isotope-hideall' );
else :
add_isotope( 'isotope' );
endif;
Your complete logic is wrong here. Archives are targeted with is_archive() or the more specific conditional tag is_date() for normal archives. Note that is_archive() returns true on category, author, tag, date and taxonomy pages, so is_archive() might be a bit too generic to use if you only need to target archive
Also, your conditionals should be inside the function, not outside it as the conditional checks are way too late for the wp_enqueue_scripts hook.
Your code should be something like this
function add_isotope() {
if ( is_archive() ) { // Change as needed as I said
// Enqueue scripts for archive pages
} else {
// Enqueue scripts for all other pages
}
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );