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' );
Related
I'm developing my first WordPress plugin. I need to use a custom CSS for the settings pages that I created for the plugin but when I enqueue my stylesheet file, it affects the whole WordPress backend and not just my plugin's settings page.
Is possible to solve this problem? How?
When you want to add styles or scripts in WordPress you enqueue them using hooks. For the admin side the hook you are looking for is called admin_enqueue_scripts.
You can add something like
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
You just need to be careful to correctly specify the url of the css script you want to enqueue.
Hope this helps.
Oh and https://developer.wordpress.org page is great for finding out about WordPress functionality, core functions, hooks etc.
Also check out the plugin handbook: https://developer.wordpress.org/plugins/
Loads of useful information can be found there :)
EDIT:
admin_enqueue_scripts has a parameter you can use read more
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style( $hook ) {
if ( $hook === 'edit.php' ) {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
This will load the script only on the edit post screen.
You can see what hook is loaded on your screen by adding
error_log( print_r( $hook, true ) );
In your wpdocs_enqueue_custom_admin_style function before the condition. Enable the debug log in your wp-config.php and you'll get a name of your custom post screen hook.
Alternatively, you could target the $current_screen to match the CPT's screen. This will load the script only on that page.
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
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' );
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' );