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' );
Related
I'm working on a project that I have a child-theme on which I'm running specific functions from the function.php file.
My problem is that when I try to add an if condition to only run the script on a specific page, it doesn't work.
I'm using the functions.php from the child theme.
In other words... I need to be able to get the current page on the child theme.
What am I doing wrong?
add_action(
'init', function() {
if (is_page('contact')) {
wp_register_script( 'my-func', get_stylesheet_directory_uri() . 'my-func.js', '', '', false );
wp_enqueue_script( 'my-func' );
}
}
);
Thanks
for theme code will go to your functions.php file and for plugin code will go to the public functions.
add_action( 'wp_enqueue_scripts', 'my_assets' );
function my_assets()
{
if (is_page('booking')) {
/* for plugin */
wp_enqueue_style($this->plugin_name, plugin_dir_url(__FILE__) . 'css/custom.css', array(), $this->version, 'all');
/*for theme */
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
}
Is there a way to wp_enqueue_script() and use it inside the Customizer Panel in Wordpress? Something like :
function myTheme_enqueue_script_admin() {
wp_enqueue_script( 'custom-admin-js', get_template_directory_uri() . '/js/admin.min.js', array(), '1.0', true );
}
add_action('--ENQUEUE SCRIPT TO CUSTOMIZER--', 'myTheme_enqueue_script_admin');
Thank you!
yes, just use this hook
add_action( 'admin_enqueue_scripts', 'func' );
read more from codex
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.