I am getting an issue when adding the jQuery in fucntions.php. When adding it, some stuff stop working like ACF Datepicker, Wordpress Admin with JS dropdown also stop working IDK what happen but the issue when adding the jquery everything on related to js is suddenly stop working..
please help me.
<?php
function Load_CSS() {
wp_register_style('main', get_template_directory_uri() . '/css/main.css', array (), false, 'all');
wp_enqueue_style('main');
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght#300;400;500;600;700;800;900&family=Lora&family=Roboto:wght#900&display=swap',array(), null );
wp_register_script('script', get_template_directory_uri() . '/js/script.js', array('jquery'),'1.0.0', true);
wp_enqueue_script('script');
wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v6.1.1/css/all.css',array(), null );
}
add_action('wp_enqueue_scripts','Load_CSS');
// Load External JS & CSS
wp_register_script('x', 'https://code.jquery.com/jquery-3.6.3.min.js', null, null, true );
wp_enqueue_script('x'); <-- This is the jQuery im talking about.
wp_register_script( 'Slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', null, null, true );
wp_enqueue_script('Slick');
your website is probably loading multiple versions of jquery beacuse you have just registered a new one with a different name. Ideally you should deregister the default one and register a new one:
wp_deregister_script('jquery');
wp_register_script('jquery', "https://code.jquery.com/jquery-3.6.3.min.js", false, null);
wp_enqueue_script('jquery');
Related
I would like to educated what i might be doing wrong here. I'm converting HTML template to Wordpress. So far everything else is working except the EKKO-lightbox.
I have enqueued my css & js to the light box folder in functions.php (I assume it should automatically start working on the page as other elements did) but the light box wont just work/pop open the images.
Did I miss something?
My lightboxpage.php and functions.php snap is attached
Function and page snapshot
functions.php
UPDATE:
Took 3days (still learning) but i figured it out. I guess the $handle 'jquery' is reserved in WordPress. I also wp_enqueue_script and wp_enqueue_style of the Ekko-lightbox
I updated it to :
function load_stylesheets()
{
wp_register_style('ekkolightbox', get_template_directory_uri() . '/css/ekko-lightbox.css', array(''), 1, 'all' );
wp_enqueue_style('ekkolightbox');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs()
{
wp_register_script('customscripts', get_template_directory_uri() . '/js/jquery-3.2.1.min.js', array('jquery') , 1, 1, 1 );
wp_enqueue_script('customscripts');
wp_register_script('ekkomin', get_template_directory_uri() . '/js/ekko-lightboxmin.js', array() , 1, 1, 1 );
wp_enqueue_script('ekkomin');
}
add_action('wp_enqueue_scripts', 'addjs');
Thank you all.
I've created an option tab with Advanced Custom fields where you can paste your Google Maps API key, so I don't have to put the API key in the code over and over again when starting a new project.
Get the value of the custom field where I put my API key:
$mapsApi = get_field('maps_api', 'option');
Now, I am loading the API key with the following script:
function bredweb_files() {
// scripts
wp_enqueue_script('maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), '1', true);
}
add_action( 'wp_enqueue_scripts', 'bredweb_files' );
(That is of course not the only thing I'm loading, also styles and other scripts)
So my question is, how do I place that variable ($mapsApi) in the url, instead of the YOUR_API_KEY?
I've tried the obvious: https://maps.googleapis.com/maps/api/js?key=$mapsApi, yet that doesn't work.
You can do such type of things.
function bredweb_files() {
$mapsApi = get_field('maps_api', 'option');
wp_enqueue_script('maps-api', 'https://maps.googleapis.com/maps/api/js? key='.$mapsApi, array(), '1', true);}
add_action( 'wp_enqueue_scripts', 'bredweb_files' );
I want to create checkboxes with Advanced Custom Fields in an admin panel in the Wordpress backend that can enable and disable scripts.
I created a checkbox field, called it import_animejs and checked it. Then used acf/load_field to enqueue the script but I am missing something as it's not working.
Here is my code:
function acf_checkbox_scripts() {
wp_register_script('animejs', get_stylesheet_directory_uri() . '/bower_components/animejs/lib/anime.min.js', array('jquery'),'1.1', true);
}
add_action( 'wp_enqueue_scripts', 'acf_checkbox_scripts', 5 );
function load_field_import_animejs( $field ) {
wp_enqueue_script('animejs');
return $field;
}
add_filter('acf/load_field/name=import_animejs', 'load_field_import_animejs');
I expect the filter to recognise that import_animejs is ticked and enqueue anime.js but it doesn't.
Update: many thanks to Lachlan's answer this works, and just for clarification I completely removed the acf/load_field "load_field_import_animejs" function in the code I posted above.
You need to do an if statement and check if the field is true
This can be done by:
function acf_checkbox_scripts() {
if ( get_field( 'import_animejs', 'options' ) ) { // only include 'options' if the acf field is on an acf options page, if not use the post_id of that page
wp_register_script('animejs', get_stylesheet_directory_uri() . '/bower_components/animejs/lib/anime.min.js', array('jquery'),'1.1', true);
wp_enqueue_script('animejs');
}
}
add_action( 'wp_enqueue_scripts', 'acf_checkbox_scripts', 5 );
I am making my first steps coding. I already made some courses of php in internet and now I am trying to continue learning from the practice while I am making a Wordpress theme.
I made a child theme from an existing theme and there is something that I dont understand in this function:
wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true );
I found this in the site of wordpress:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
I understand that $handle is the name of the script file, but i have to put that name in some place in the script file to make my code work?
Then i know that I should write get_template_directory_uri(), the source, and write array(jquery) in the case that it is a jquery file but what means '20150315', true . What means that number? Why I have to write true at the end?
Parameters
$handle
(string) (Required) Name of the script. Should be unique.
$src
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
Default value: false
$deps
(array) (Optional) An array of registered script handles this script depends on.
Default value: array()
$ver
(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
$in_footer
(bool) (Optional) Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.
Default value: false
So for your example:
wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true );
Which breaks down to:
$handle = 'twentyfourteen-script'
$src = get_template_directory_uri() . '/js/functions.js'
$deps = array( 'jquery' )
$ver = '20150315'
$in_footer = true
I'm trying to pass a WordPress shortcode attribute to jQuery as a variable, but it keeps returning as undefined in jQuery. Everything with the shortcode function works as intended, same for the jQuery aside from the attribute returning as undefined. The jQuery script is also enqueuing properly.
This is the start of my PHP function:
function aw_simple_sorter_creator($atts) {
extract(shortcode_atts(array(
'show_posts' => '-1',
'effect' => ''
), $atts, 'aw_simple_sorter' ));
wp_enqueue_script('aw_simple_sorter_js', plugin_dir_url( __FILE__ ) . 'js/aw_simple_sorter.js');
wp_localize_script('aw_simple_sorter_js', 'aw_ss_script_vars', array(
'jQueryUIeffect' => __($effect),
)
);
In the above snippet, $effect should be equal to the shortcode attribute. The shortcode attribute does have a value as well. I've also tried 'jQueryUIeffect' => $effect, instead of this 'jQueryUIeffect' => __($effect),, but it still returns undefined in jQuery.
Then in my jQuery I'm trying to test the passed variable using the following wrapped in a .ready():
alert(aw_ss_script_vars.jQueryUIeffct);
Am I going about this the wrong way? Does something jump out that looks incorrect? Thanks.
You should start by changing your enqueue for register, secondly pass in the jquery dependancy.
If the script is being output on the page as you mention in the comments above, then the problem is likely in how you're trying to access the variables.
function do_scripts()
{
/* register the script */
wp_register_script( 'custom', plugin_dir_url( __FILE__ ) . '/js/scripts.js', array('jquery'), false, true );
$script_vars = array(
'key' => $value
... your values here....
);
/* actually enqueue jquery (that ships with WP) and your custom script */
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'custom' );
/* Localize the vairables */
wp_localize_script('custom', 'script_vars', $script_vars);
}
/* If we're not in the admin section call our function on the wp_enqueue_scripts hook */
if ( !is_admin() ) add_action( "wp_enqueue_scripts", "do_scripts", 10 );
to see if the variables are available, open your console in google chrome developer tools and type script_vars
in your script you should be able to access your values with dot notation as follows :
script_vars.yourKey