Can anyone explain me with example what does the below lines means? (I am developing a wordpress plugin)
You still have a copy of jquery UI and jquery in the JS folder.
And you're still calling it:
wp_register_script( 'sa_jquery_ui', plugins_url('/js/jquery-ui.js', __FILE__) );
I am stuck
With wp_register_script you include your js-script in the plugin.
"Hey Wordpress! You must include this script when verificate and call my plugin" :)
This is like wp_register_* when you create a wordpress theme
Try This Code In your Plugin main file
function pluging_enqueue_script() {
wp_enqueue_script( 'sa_jquery_ui', plugins_url('plugin-name/js/jquery-ui.js'), array(), '1.0.0', true );
}
add_action( 'init', 'plugin_enqueue_script' );
Related
I am learning to develop WordPress and I build my theme from the scratch. I read that the best way to include Google Fonts into the theme is to use the WebFont Loader. This method help improve score in PageSpeed test.
I try to add WebFont Loader from function.php and wfloader.js file. Unfortunately, the font doesn't load into my theme. What am I doing wrong? I can't figure out myself.
So here is my code in the function.php file:
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
function wpb_scripts_styles() {
wp_register_script(
'web-font-loader',
'//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
array( '' ),
''
);
wp_enqueue_script(
'fonts-to-load',
esc_url( get_stylesheet_directory_uri() ) . '/assets/js/wfloader.js',
array( 'web-font-loader' ),
''
);
}
Here is from wfloader.js
function webfontload() {
WebFont.load({
google: {
families: [
'Playfair+Display:400,700,900&subset=latin-ext'
]
}
});
}
Thanks for any advice!
I fixed my code and it works :)
function custom_scripts_styles() {
wp_register_script(
'web-font-loader',
'//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
array(),
null );
wp_enqueue_script(
'fonts-to-load',
get_template_directory_uri() . '/assets/js/wfloader.js',
array( 'web-font-loader' ),
null,
true );
}
Just 2 remarks not concering the main issue. I would not start your functions with wpb_ because a famous page builder plugin does it, you could have conflicts if you active that plugin with your theme. You don't need esc_url for the function get_stylesheet_directory_uri(), you can trust the result of this WordPress function.
Have you checked if the script //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js is really loaded? I mean Inspect elements and search //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js in the HTML. If so, check if in the console you have errors, I mean F12 -> console
I actually am a newbie to wordpress, i am converting an html website to wordpress template. There are alot of js file in my js directory but all of them are not loaded on every page. What I want to know is that do we have to register all js files in functions.php and use wp_head in our head tag to load them?
For theme you need to put below code in your functions.php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' )
If you are creating your custom plugin below code will help you.
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' );
For more understanding of wp_enqueue_script read below two links :
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/
As you are beginner i can say wpbeginner will be good site for you they give the all understanding very clearly
I understand that media-element.js is now part of the WordPress core according to mejs website. How do I use it with WordPress?
Is there documentation somewhere besides what is on mejs website?
Please see wp_enqueue_script
function my_scripts() {
wp_enqueue_script( 'wp-mediaelement' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );
I am having an issue with loading some javascript in a child theme I am creating for one of my themes.
Essentially I do:
get_stylesheet_directory() . '/path/to/javascript.js'
which is what your suppose to do, But , as per the documentation, I am getting:
mysite.com/dev/home/path/to/wordpress/path/to/theme/path/to/js.js
which is causing it to not find the required file. because home is at the root of the site.
any ideas on what I can do to fix this?
get_stylesheet_directory() returns a server path. I'm pretty sure you want:
get_bloginfo('stylesheet_directory');
That will return a URL of your stylesheet directory in relation to your Wordpress Installation so you can load external assets like Javascript files that reside in your theme.
I think this will do the trick:
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/path/to/javascript.js"></script>
It's better to enqueue scripts and styles the WordPress way.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Put this in functions.php
add_action( 'wp_enqueue_scripts', 'enqueue' );
function enqueue() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri().'/css/theme.css' );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/js/theme.js' );
}