I'm using acf v4 plugin for wordpress.
I'm trying to include the input.js. This is the code that i added
function input_admin_enqueue_scripts()
{
// Note: This function can be removed if not used
// register ACF scripts
wp_register_script( 'acf-input-progressbar', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version'] );
wp_register_style( 'acf-input-progressbar', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version'] );
// scripts
wp_enqueue_script(array(
'acf-input-progressbar',
));
// styles
wp_enqueue_style(array(
'acf-input-progressbar',
));
}
But the javascript is never called. I added the console.log function to test the call :
(function($){
console.log("Test input.hs");
....
This is the name that i used for my plugin : acf-progressbar
Files :
acf-progressbar-v4.php
acf-progressbar.php
You have to hook in your function with something like the following:
add_action( 'admin_enqueue_scripts', 'input_admin_enqueue_scripts' );
The above call will enqueue the script on the admin side of WordPress which is what I assume you want due to the function name. If you want to enqueue them everywhere then use this instead:
add_action( 'wp_enqueue_scripts', 'input_admin_enqueue_scripts' );
The calls to add_action need to take place in the global space. So in the end you'll have something like:
function input_admin_enqueue_scripts() {
// Note: This function can be removed if not used
// register ACF scripts
wp_register_script( 'acf-input-progressbar', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version'] );
wp_register_style( 'acf-input-progressbar', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version'] );
// scripts
wp_enqueue_script(array(
'acf-input-progressbar',
));
// styles
wp_enqueue_style(array(
'acf-input-progressbar',
));
}
add_action( 'admin_enqueue_scripts', 'input_admin_enqueue_scripts' );
If you already have your function hooked in with a call to add_action then the problem is probably that you have your style and script named the same:
wp_register_script( 'acf-input-progressbar' ...
wp_register_style( 'acf-input-progressbar', ...
I would switch these to the following and see if that works:
wp_register_script( 'acf-input-progressbar-js' ...
wp_register_style( 'acf-input-progressbar-css', ...
Related
I'm trying to execute a javascript file in wordpress only if the user is not logged in, but I can't see why it's not working. This is the code I'm using:
<?php
if ( is_user_logged_in() ) {
echo 'Ok!';
} else {
wp_enqueue_script(
'ads'
);
}
?>
And this is what I have in functions.php to register the file:
wp_register_script(
'ads',
get_bloginfo('template_directory') . '/js/ads.js'
);
Any ideas? Thanks in advance!
wp_enqueue_script() should be run on the wp_enqueue_scripts hook. This should also be encapsulated in a function, or at least a closure/anonymous function.
Side note, you'll want to start properly formatting/indenting code now - future you thanks you!
A. You're checking if a user "is" logged in. You can just make sure that is_user_logged_in() is returning false with the use of the "Not" Logical Operator: !.
B. You don't need to register your script, as wp_enqueue_script will register it for you. You really only need to register scripts if you're getting more fancy like loading scripts only if a shortcode is active on a page.
C. Typically you'll want to prefix your script/style handles, since they should be unique, there can be conflicts otherwise.
D. Typically you'll want to use get_template_directory_uri() or get_stylesheet_directory_uri() over get_bloginfo() since get_bloginfo( $directory_type ) is literally just a wrapper for those functions.
Something like this will get you started:
add_action( 'wp_enqueue_scripts', 'load_ads_script' );
function load_ads_script(){
if( !is_user_logged_in() ){
// The "!" makes sure the user is _not_ logged in.
wp_enqueue_script( 'jacob-k-ads', get_stylesheet_directory_uri().'/js/ads.js' );
}
}
I know this problem is pretty common at this moment and many people are asking the same question but for know I can't find any good solutions.
I wonder how i should implantate my scripts to wordpress?
This how far I have come:
function my_scripts_method() {
wp_register_script("contact-form", get_bloginfo("stylesheet_directory") . "/form/contact-form.js");
wp_enqueue_script("contact-form");
wp_register_script("form", get_bloginfo("stylesheet_directory") . "/form/form.js");
wp_enqueue_script("form");
wp_register_script("validate", get_bloginfo("stylesheet_directory") . "/form/validate.js");
wp_enqueue_script("validate");
wp_register_script("answercheck", get_bloginfo("stylesheet_directory") . "/contact/answercheck.js");
wp_enqueue_script("answercheck");
}
You've created a function my_scripts_method() and did you call it anywhere? Hooked it to something?
Try with
add_action( 'wp_enqueue_scripts', 'my_scripts_method()');
Also you can enqueue your scripts directly. So your
wp_register_script("contact-form", get_bloginfo("stylesheet_directory") . "/form/contact-form.js");
wp_enqueue_script("contact-form");
Will be
wp_enqueue_script("contact-form", get_bloginfo("stylesheet_directory") . "/form/contact-form.js");
If you have no dependencies. Also I'd use get_stylesheet_directory_uri() instead of your get_bloginfo("stylesheet_directory").
get_stylesheet_directory_uri()
EDIT
Try putting in your functions.php
add_action( 'wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
wp_enqueue_script('contact-form', get_template_directory_uri().'/form/contact-form.js','','', true);
wp_enqueue_script('form', get_template_directory_uri().'/form/form.js','','', true);
wp_enqueue_script('validate', get_template_directory_uri().'/form/validate.js','','', true);
wp_enqueue_script('answercheck', get_template_directory_uri().'/contact/answercheck.js','','', true);
}
Alternatively you can put get_stylesheet_directory_uri() instead of get_template_directory_uri(), if it doesn't work. But it should (unless you don't have anything in the /form and /contact folders).
I am getting following error in my wordpress plugin while registering a js file.
PHP Notice: wp_register_script was called incorrectly.
Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks.
Please see Debugging in WordPress for more information.
(This message was added in version 3.3.) in /home/wholesale/public_html/wp-includes/functions.php on line 3547
Please also
add_action('wp_enqueue_scripts', 'enq_shipping_js', 1000);
function enq_shipping_js(){
wp_register_script('customCheckout', WP_PLUGIN_URL . '/woocom_shippingByWeight/js/customCheckout.js', array('jquery'), '2.0.0', true);
wp_enqueue_script('customCheckout');
}
Please help in resolving as calling the wp_register_script() function inside the wp_enqueue_scripts action hook also not resolving it.
Try to use this hook
add_action('admin_init', 'enq_shipping_js');
or use this functions to your functions.php
function enq_shipping_js() {
wp_register_script (
'customCheckout',
WP_PLUGIN_URL . '/woocom_shippingByWeight/js/customCheckout.js',
array('jquery'),
2.0.0,
true
);
}
add_action('wp_enqueue_scripts', 'enq_shipping_js');
enqueue script function
function register_all_styles()
{
wp_enqueue_script( 'customCheckout' );
}
add_action('wp_enqueue_scripts','register_all_styles');
I'm looking for next solution. I want faster website so I concat all JS to one file and placed in footer. One of my js is jQuery and I use next hook and function:
if (!function_exists("ef_theme_scripts")) {
function ef_theme_scripts() {
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/min/script.min.js', null, null, true);
wp_enqueue_script('jquery');
$params = array(
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('user_nonce'),
);
wp_localize_script( 'jquery', 'ajax_object', $params );
}
}
add_action('wp_enqueue_scripts', 'ef_theme_scripts');
I called my handle "jquery" because there can be some scripts (e.g. from plugins) which wants use jquery so I need add called this handle "jquery".
Everything works great except localize. When I rename script handle for example to "custom-jquery" then wp_localize_script works without problem.
I use WP 4.0.1. Thanks for help
IMPORTANT! wp_localize_script() MUST be called after the script it's being attached to has been registered using wp_register_script() or wp_enqueue_script().
More info
I asked a similar question and got the working solution here :
wp_localize_script not working with jquery handle
Basically this has to do with the way that WP works with the jQuery handle, you'll need to
deregister jquery
deregister jquery-core
Use the jquery-core handle on your script
at the end register jquery, with a dependency on jquery-core and passing false for the $scr attribute
Code:
wp_register_script( 'jquery', false, array( 'jquery-core' ), false, true );
I am building a custom wordpress theme and I am trying to add some JavaScript functions.
The main function I want to add is a div that changes color over time. The colors it changes to are defined by the theme color settings in the Customize register. I have added those color settings boxes as show below through my functions.php:
$wp_customize->add_setting('color1', array('default' => '#000000', 'transport'=>'refresh',));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color1_CNTL', array(
'label' => __('Color 1', 'myTheme'),
'section' => 'colors',
'settings' => 'color1',)));
all of that works fine and I can use it in the Customize register on my admin page. Now, the only thing I'm wondering is, how do I use the value of color 1 in my javaScript code? I know that if I wanted to use it in css I would just have to use
<?php echo get_theme_mod('color1'); ?>
but that doesn't work in JavaScript. Any ideas?
The "WordPress way" would be to localize the script.
Utilize wp_localize_script
Overview:
Register a script in your theme (usually in your functions.php
file). See here:
wp_enqueue_script
Localize the script
Then, access that value via your javascript.
Minimal complete example (compiled from WP docs):
PHP:
add_action('wp_enqueue_scripts', 'my_theme_scripts');
function my_theme_scripts() {
// Register the script first.
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Now we can localize the script with our data.
$color_array = array( 'color1' => get_theme_mod('color1'), 'color2' => '#000099' );
wp_localize_script( 'some_handle', 'object_name', $color_array );
// The script can be enqueued now or later.
wp_enqueue_script( 'some_handle' );
}
Javascript (in your 'myscript.js' file);
// Access the color via the object name defined in localize_script
var color = object_name.color1;
prob
var myvariable='<?php echo get_theme_mod("color1");?>'; //note the surrounding ''!
if you are having issues accessing the variable, declare it a global.