I am trying to enqueue my custom javascript code in WordPress' functions.php file,
I am doing the following,
function background_animation_script() {
wp_register_script('background_animation', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
}
function hero_animation_script() {
wp_register_script('hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery','background_animation_script'), '1.0', true);
}
function custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('background_animation_script');
wp_enqueue_script('hero_animation_script');
}
add_action('wp_enqueue_scripts', 'custom_scripts');
But, for some reason, the custom scripts are not getting loaded onto the page, but the jquery is. Any help with this is highly appreciated. Thanks!
use the below function for add jquery in plugin
function custom_scripts() {
wp_enqueue_script( 'background_animation_script', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
wp_enqueue_script( 'hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
Related
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
wp_register_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_style( 'bootstrap' );
}
my folder's name is turnover-calculator it only have the bootrap folder and turnovercalculator.php
i tried to call the btn class to try if it's working but it's still not working.
You have to use the right hooks, wp_register_style and wp_enqueue_style can only be called inside wp_enqueue_scripts hook.
please use this code:
add_action('init', 'call_scripts');
function call_scripts() {
add_action('wp_enqueue_scripts', 'enqueue_style');
}
function enqueue_style(){
wp_register_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
wp_enqueue_style( 'bootstrap' );
}
You can just enqueue the style directly inside the wp_enqueue_scripts callback like this:
add_action( 'wp_enqueue_scripts', 'turnover_calculator_scripts' );
function turnover_calculator_scripts() {
wp_enqueue_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__));
}
Hey guys I can't manage to get this working, this is my code
<?php
//Adding the CSS and JS files
function HBUtheme_setup(){
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;0,400;0,600;0,700;1,300;1,400&family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400&display=swap', false);
wp_enqueue_style('fontawesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('style', get_stylesheet_uri(), NULL, microtime(), all);
wp_enqueue_script('main', get_theme_file_uri('/js/main.js'), array(), microtime(), true);
}
add_action('wp_enqueue_scripts', 'HBUtheme_setup');
For some reason I can't get this fonts to load.
I am new to wordpress. I need to create a new plugin for my website. How to I add scripts and styles for plugins. Advance thanks.
You can register your scripts and styles by using the wp_register_script() function. See the examples below:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Use bellow function for add styles in WordPress.
function your_function_name() {
wp_enqueue_style( 'style', plugins_url( 'put your css file path', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'your_function_name' );
If you want to add custom java script code, use below code (But is bad)
function admin_load_js() { ?>
<script type="text/javascript">
//add your code here
</script>
<?php }
add_action('admin_head', 'admin_load_js');
Can anyone tell me that how I pass or post my javascript variables to functions.php file method without using enqueue js files.
Any help will be appreciated.
Thanks
Please use below code for enqueue script in wordpress
function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'mycustom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Or
function wpdocs_custom_enqueue() {
echo '<script>$(document).ready(function () {
$("#checkbox").click(function() {
if(this.checked) {
//Do stuff
alert("It is checked");
} else {
alert("it is not checked");
}
});
});</script>\n';
}
add_action( 'wp_head', 'wpdocs_custom_enqueue' );
Both codes are working.
I want to add 2 js files in my wordpress template function-dir.php.
how to add this js file is there any tag?
is it right function to use
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Thanks in advance....
You use wp_register_script to register a script with its handle in order to avoid duplicating code (if for instance you enqueue it in several places and need to update the filename). This is usually not needed, I usually use wp_enqueue_script(), which takes the same arguments and outputs it to the page.
I usually do this by creating a setup function with all my style and script enqueues and then hooking that function up to one of the pre-made hooks, like this:
function theme_enqueue() {
/**
* Scripts.
*/
wp_enqueue_script('scripts', get_template_directory_uri() . '/js/lib/scripts.pkgd.min.js', array('jquery'), THEME_VERSION);
wp_enqueue_script('myscript', get_template_directory_uri() . '/js/myscript.js', array('scripts'), THEME_VERSION, TRUE);
wp_enqueue_script('main-menu', get_template_directory_uri() . '/js/menu.js', array('jquery'), THEME_VERSION, TRUE);
}
add_action('wp_enqueue_scripts','theme_enqueue');
You can use following structure as plugin by using wp_enqueue_script;
function add_custom_js() {
wp_enqueue_script( 'script_name', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_js' );
If you are developing plugin, you can add this action to your plugin. Or you can put this to functions.php
wp_register_script() function is used to register your script once and call anywhere, anytime. And wp_enqueue_script() is used to call it in your functions.php file
Method: 1
// First Register
function register_my_scripts(){
wp_register_script('handler_1', get_template_directory_uri() . "/js/script_one.js");
wp_register_script('handler_2', get_template_directory_uri() . "/js/script_two.js");
}
add_action('init', 'register_my_scripts');
Now use :
function wp24_load_script() {
// Check if you want to load for
// specific page
wp_enqueue_script('handler_1');
}
add_action("wp_enqueue_scirpts", "wp24_load_script");
Method: 2
Or you can directly load it with wp_enqueue_script() function:
function wp24_load_script() {
// Check if you want to load for
// specific page
wp_enqueue_script('handler_1', get_template_directory_uri() . "/js/script_one.js");
}
add_action("wp_enqueue_scirpts", "wp24_load_script");