I am working on the following code. I have looked at all the documents regarding wp_enqueue_scripts and wp_register_script I cannot get it my Wp_callApi.js to load.
How can I fix this?
<?php
/*
Plugin name: My webservice
Version: 1.4
Description: Calling Webservice with javascript.
Auther: JellyDevelopment
Author URI: http://jellydevelopments.co.za
Plugin URI: http://jellydevelopments.co.za
*/
add_action( 'wp_enqueue_scripts', 'load_Javascript' );
function load_Javascript() {
wp_register_script('prefix_script_01', plugins_url( 'Wp_callApi.js', __FILE__ ), array ('jquery'), "2.1", true );
}
//add_action( 'wp_enqueue_scripts', 'addMy_script' );
function addMy_script() {
wp_enqueue_scripts( 'Wp_callApi' );
}
add_action( 'woocommerce_payment_complete', 'addMy_script', 10, 1 );
?>
You have mutliple errors here. Try this version.
<?php
/*
Plugin name: My webservice
Version: 1.4
Description: Calling Webservice with javascript.
Auther: JellyDevelopment
Author URI: http://jellydevelopments.co.za
Plugin URI: http://jellydevelopments.co.za
*/
function load_Javascript()
{
wp_enqueue_script( 'prefix_script_01', plugins_url( '/Wp_callApi.js', __FILE__ ), array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'load_Javascript' );
?>
This will precisely do what you want. It will enqueue a file named Wp_callApi.js to your front end. This file must be residing at the root of this plugin that you write. If you want to add this file to wordpress admin dashboard then you need to change the action. The last line will change to.
add_action( 'admin_enqueue_scripts', 'load_Javascript' );
Related
I'd like to enqueue a stylesheet called charts.css & charts.min.css.
I'm not sure, why it's not working.
That's my added code in functions.php Wordpress:
function additional_stylesheets() {
wp_register_style( 'custom01', get_template_directory_uri().'/assets/css/minified/charts.min.css' );
wp_enqueue_style( 'custom01' );
wp_register_style( 'custom02', get_template_directory_uri().'/assets/css/unminified/charts.css' );
wp_enqueue_style( 'custom02' );
}
add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );
I tried in elementor to style a table but nothin' happened.
So I also tried to use:
<link rel="stylesheet" href="wp-content/themes/astra/assets/css/minified/charts.min.css">
but that's also not working.
Did I make a mistake somewhere?
I use the theme astra in WordPress.
The path is wp-content/themes/astra/.
After appending styleheets in WordPress I do not have to call them in html code anymore am I right?
You don't need to register them. Instead use the following code:
function additional_stylesheets() {
wp_enqueue_style('charts_min_styles', get_theme_file_uri('/assets/css/minified/charts.min.css'), NULL, 1.2, false);
wp_enqueue_style('charts_styles', get_theme_file_uri('/assets/css/unminified/charts.css'), NULL, 1.2, false);
}
add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );
The code goes to the functions.php of your active theme or child them.
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' );
I have created a child theme in wordpress off of a parent theme called bigpont. I am also using woocommerce as well on the site. I had enqued my child theme style sheet and have noticed it loads twice and I'm not sure why. I am also wondering how I can get it to load so it overrides the woocommerce style sheet. Here is the code I'm currently using in my functions.php file:
function my_theme_enqueue_styles() {
$parent_style = 'bigpoint-css';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/base.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
and here is how the stylesheets are being loaded on my site
It seems to load as 'bigpoint-default-css' and then again as I added it "child-style-css'
****UPDATE: I found the answer to my css being loaded twice, in my parent theme's functions.php file it being called in with :
wp_register_style('bigpoint-default', get_stylesheet_uri(), '1.0');
so I used this to undo that:
function unhook_parent_style() {
wp_dequeue_style( 'bigpoint-default' );
wp_deregister_style( 'bigpoint-default' );
}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );
From looking at the file class-wc-frontend-scripts.php it looks like WooCommerce enqueues it scripts/styles with the default priority of 10.
public static function init() {
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'load_scripts' ) );
add_action( 'wp_print_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
add_action( 'wp_print_footer_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
}
So if you enqueue your scripts with a lower priority they it will load after the WooCommerce style and overwrite that stylesheet as the file will be loaded after the WooCommerce one lower down the HTML document.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
I would need more information to debug what is happening with the duplicate stylesheets though.
I am trying to enqueue a jQuery script to my Wordpress site but for some reason it is not adding. Below is my code I've added to my child theme's functions.php file.
<?php
function itm_adding_scripts() {
wp_register_script('my_amazing_script', '/wp-content/themes/italic-child/js/jQuery.equalHeights.js/js/jQuery.equalHeights.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( '_enqueue_scripts', 'itm_adding_scripts' );
?>
You have a typo in the action missing wp prefix
Change
add_action( '_enqueue_scripts', 'itm_adding_scripts' );
To
add_action( 'wp_enqueue_scripts', 'itm_adding_scripts' );
Reference: wp_enqueue_scripts docs
You have a typo in your action. It should be wp_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'itm_adding_scripts' );
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' );