I've written a basic custom Elementor widget and I chose to use the Swiper library as thats what Elementor uses. But I can't work out how to properly add the dependancy for it, using the same version that elementor uses.
I've currently just got it loading from a CDN, but this feels a bit ugly. So this does all work, but I would prefer to be loading and registering the internal elementor swiper if thats possible?
Any help would be awesome, thanks.
In my elementor-templateslider.php I have this:
function elementor_templateslider_widgets_dependencies() {
wp_register_script( 'templateslider-js', plugins_url( 'assets/js/template-slider.js', __FILE__ ) );
wp_register_style( 'templateslider-css', plugins_url( 'assets/css/template-slider.css', __FILE__ ) );
wp_register_script( 'swiper-js', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.6/js/swiper.min.js', [], '5.3.6', true );
wp_register_style( 'swiper-css', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.6/css/swiper.min.css' );
}
add_action( 'wp_enqueue_scripts', 'elementor_templateslider_widgets_dependencies' );
and in my widgets/templateslider.php I have this
class Elementor_TemplateSlider_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
return [ 'swiper-js', 'templateslider-js' ];
}
public function get_style_depends() {
return [ 'swiper-css', 'templateslider-css' ];
}````
Related
I want to call a jQuery from my functions.php in WordPress.
I'm using Divi Theme. When I add the script directly into Divi theme it works. But I want to add it to the functions.php form my child theme and this is where the problem start.
Functions.php
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
Script:
jQuery(document).ready(function(){
jQuery('#cta-section').waypoint(function() {
jQuery('#cta-section').toggleClass('animate-cta');
}, {offset: '80%'});
});
Can somebody point out what I'm doing wrong?
Seems like you're missing the jQuery Waypoint JS file
Try enqueueing the jquery waypoint js file BEFORE using your custom script
function coolbanner_enqueue() {
wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
you can find the jquery waypoint github repo here...
https://github.com/imakewebthings/waypoints
Additionally the url I used below is from a cdn which you can find here:
https://cdnjs.com/libraries/waypoints
if you feel more comfortable using the github's url
then just substitute the cdn url with the following...
https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js
Solution:
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
In my child theme functions PHP file, I have the following code:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
// END BOOTSTRAP IMPORT
?>
However, when I try to use a simple bootstarp class like col-sm-4 I do not get the column layout on my page. It seems, bootstrap is not being loaded. I'm using the optimizer theme, but I don't think that matters.
In any event. I've scoured there many WP support forums and to no avail have I had success. Custom css is working in my child theme style file but this is not working in the functions file. Where am I going wrong?
You are missing 2 things....
You function my_scripts_enqueue doesn't seem to be called anywhere, just call it inside your enqueue_child_theme_styles function or add another hook function call for it.
In '://maxcdn.bootstrapcdn.com/boo... we don't start with : just with // ;-)
Your code should look something like this...
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
my_scripts_enqueue();
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
I am making my first custom wordpress theme and am running into problems with functions.php
I am using bootstrap too so i want to include bootstrap stylesheets to wp i currently do it this way-:
style.css
#import url('css/bootstrap.css');
#import url('css/font-awesome.css');
I understand that i can use functions.php to do the same, so i wrote a custom function and tried to do it like this-:
functions.php
<?php
/* Theme setup */
require_once('wp_bootstrap_navwalker.php');
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/font-awesome.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
?>
This does not seem to work. Neither does functions.php load the wp jquery or the bootstrap.js
Can anyone shed some light onto this matter for me? I would be ever grateful. This is not a child theme its a custom theme.
Try registering your scripts before you enqueue them. For example:
function my_enqueue_scripts() {
// Register Bootstrap JS.
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), NULL, true );
// Enqueue Bootstrap JS.
wp_enqueue_script( 'bootstrap-js' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
I am trying to en-queue css in WordPress.
Here is my code:
function adding_styles()
{
wp_register_script( 'jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// Register the style like this for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'jquery-ui-css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'adding_styles' );
However, jquery-ui.css doesn't load. Can anybody guess the error here??
I believe you need to add path to the CSS file -
wp_enqueue_style( 'jquery-ui-css',get_stylesheet_uri() );
EDIT -
It will clearly works with the URL -
wp_enqueue_style( 'jquery-ui-css', http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css );
Reference - wp_enqueue_style
Look for$src parameter
Try this:
You can add javascript & css in wordpress like this
function load_custom_wp_admin_js() {
wp_enqueue_script('custom_wp_admin_js', plugins_url() . '/dynamic-headers/dynamic-header.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_js');
Add this code in function.php file.
-
Thanks
OK, so this is in my functions.php file: (the following is the edited version to utilize cool's answer below. I'm leaving the original afterward:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'hoverIntent' );
wp_register_script( 'mdMenuAnimation', get_bloginfo('template_url').'/js-custom/mdMenuAnimation.js', array( 'jquery' ));
wp_enqueue_script( 'mdMenuAnimation' );
}
add_action( 'wp_enqueue_scripts', 'mdg_setup_scripts' );
Here's what I originally had:
function mdg_setup_scripts() {
wp_register_script( 'hoverIntent',
get_bloginfo( 'template_url' ) . '/js/hoverIntent.js',
array( 'jquery' ),
false,
true );
wp_register_script( 'mdMenuAnimation',
get_bloginfo('template_url') . '/js/mdMenuAnimation.js',
array( 'jquery', 'hoverIntent' ),
false,
false );
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
}
add_action( 'init', 'mdg_setup_scripts' );
The js files are present in the indicated folder.
But no JavaScript at all is loading on the front end.
I'm doing something wrong, but what?
Do I need to register jquery (I thought WP had jquery in it, though)?
Do I need to separate the enqueue call? Do I need to add something to my header.php?
You dont need to add jquery. If it is not added, and if your custom script depends on it (like you wrote in code) it will be added by wordpress.
This code will work (i just tested it) but..
Instead of this:
if (!is_admin()) {
wp_enqueue_script( 'mdMenuAnimation' );
}
wordpress recomed that you use hooks:
Wordpress-codex: Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side.
So it should be something like this:
function my_scripts_method() {
wp_register_script( 'somehover', get_bloginfo('template_url').'/js-custom/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'somehover' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Wordpress-codex: by using the wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.