I'm trying to call multiple JQuery scripts using (a wordpress feature) wp_enqueue_script. The call to JQuery works perfectly but the second call to cufon doesn't. I'm not a php or javascript expert - could anyone lend a hand, is there a best practice method for this?
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
}
add_action('init', 'my_init_method');
function my_init_method2() {
if (!is_admin()) {
wp_deregister_script( 'cufon' );
wp_register_script( 'cufon', 'http://mydomain.com/wp-content/themes/simplefolio/js/cufon-yui.js');
wp_enqueue_script( 'cufon' );
}
}
add_action('init', 'my_init_method2');
My choice of way to deregister_script and enqueue_script is as followed (feel free to adjust it to your needs):
function my_deregister_javascript() {
wp_deregister_script ( 'jquery-ui-tabs' );
wp_deregister_script ( 'jquery-ui-core' );
wp_deregister_script ( 'jquery-cycle' );
wp_deregister_script ( 'hoverintent' );
wp_deregister_script ( 'superfish' );
wp_deregister_script ( 'jquery-validate' );
wp_deregister_script ( 'arras_add_header_js' );
wp_deregister_script ( 'arras_add_slideshow_js' );
wp_deregister_script ( 'ratings_scripts' );
wp_deregister_script ( 'wp-postratings' );
wp_deregister_script ( 'sharing-js' );
wp_deregister_script ( 'jquery' );
wp_enqueue_script ('jquery', '/js/mymusicplug.js', '', '1.4.4');
}
if ( !is_admin() ) {
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
}
As you see, my 'if ( !is_admin() )' is relative to the scripts 'output'. I also deregistered with no registering - registering the script via wp_register_script causes total meltdown - and then enqueue the script file of which your combined/minified JS is located in. This definitely works for me, with the result being a 143,000+ b JS file. I know, it may seem like a hefty tag on a JS file, but with the simplification of things like combining JS in WP via 'deregister_script', it reduced my page by over 30+ HTTP requests for local and external JS. The heaviest JS on my page now involves analytics in the footer, and AdSense code. And still, I'm down to only around 10-15 requests.
Great Tip: Combine CSS too, 1 CSS file, 1 JS file, your page will fly!
Hope this helped.
I'm not exactly sure what you're looking for here but it looks like you could simplify things by combining your two init statements
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
wp_enqueue_script( 'jquery' );
wp_deregister_script( 'cufon' );
wp_register_script( 'cufon', 'http://mydomain.com/wp-content/themes/simplefolio/js/cufon-yui.js');
wp_enqueue_script( 'cufon' );
}
}
add_action('init', 'my_init_method');
Also you should ensure that the http://mydomain.com/wp-content/themes/simplefolio/js/cufon-yui.js file exists and is accessible from your browser.
Related
I was wondering if, after registering a scripts and specifying a dependency, upon enqueuing it, should you specify the dependency again?
By that good'ol logic I would say no, but I have no real idea... Your lights are appreciated!
Example 1
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_register_script( 'script_one_js', '//path/to/script/one.js' );
wp_register_script( 'script_two_js', '//path/to/script/two.js', array( 'script_one_js' ) );
// Specifying dependency again
wp_enqueue_script( 'script_one_js' );
wp_enqueue_script( 'script_two_js', array( 'script_one_js' ) );
};
};
Example 2
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_register_script( 'script_one_js', '//path/to/script/one.js' );
wp_register_script( 'script_two_js', '//path/to/script/two.js', array( 'script_one_js' ) );
// NOT specifying dependency again
wp_enqueue_script( 'script_one_js' );
wp_enqueue_script( 'script_two_js' );
};
};
No, you don't need to specify the dependencies twice.
To understand why the option is there, you need to look at what wp_enqueue_script and wp_register_script are for.
You don't have to register the script at all before you enqueue it, you can just use wp_enqueue_script on its own and it will register it if its not already registered - this is why you have the same options (including setting the dependencies) in both functions.
For example you can have this in your functions.php ad it will both register and enqueue the scripts at the same time:
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_script( 'script_1_js', '//path/to/script/one.js' );
wp_enqueue_script( 'script_2_js', '//path/to/script/two.js', array( 'script_1_js' ) );
}
}
Why bother registering a script then? There are a number of advantages, such as:
You can register a script once with the correct dependencies and other settings in one place, and then only load them in the pages or situations you need them in. As well as not loading scripts unnecessarily, this also means you don't have to fill in all the parameters every place you use the wp_enqueue_script function for that script.
For example you can have this in your functions.php:
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_register_script( 'script_1_js', '//path/to/script/one.js' );
wp_register_script( 'script_2_js', '//path/to/script/two.js', array( 'script_1_js' ), '1.1', true );
}
}
Now if you only need to load script_two_js in 2 particular page templates for example, you can add wp_enqueue_script( 'script_1_js' ); into to those templates without having to add the dependencies, version every time, because it already knows this from when it was registered.
You can also register your script using wp_register_script, and if you have another script have have this script in its dependencies, then it will automatically get loaded before that script without the need to enqueue it.
For example, if you have four.js which depends on 3 other scripts, e.g.
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_register_script( 'script_1_js', '//path/to/script/one.js' );
wp_register_script( 'script_2_js', '//path/to/script/two.js' );
wp_register_script( 'script_3_js', '//path/to/script/three.js' );
wp_register_script( 'script_4_js', '//path/to/script/four.js', array( 'script_1_js', 'script_2_js', 'script_3_js' );
}
}
Now you can load the script with wp_enqueue_script( 'script_4_js' ); at it will automatically load scripts one, two and three.
Hope this helps answer your question!
I want to add inline JavaScript to my WordPress frontend using wp_add_inline_script.
According to the docs it should work (as long as I add a script to the queue, which is true in my case)!
Code will only be added if the script in already in the queue.
An equivalent snippet for styles instead of scripts works as expected (see my second snippet below)!
My current snippet which doesn't work:
add_action( 'wp_enqueue_scripts', function()
{
wp_register_script( 'test-handle', '', array(), null );
wp_enqueue_script( 'test-handle' ) );
wp_add_inline_script( 'test-handle', 'does not work' )
} );
The following snippet works as aspected but is for styles instead:
add_action( 'wp_enqueue_scripts', function()
{
wp_register_style( 'test-handle', '', array(), null );
wp_enqueue_style( 'test-handle' ) );
wp_add_inline_style( 'test-handle', 'works. is what I want.' )
} );
I'd like to use wp_add_inline_script because of its advantages (eg synchronize order, etc)...
While the function wp_add_inline_script was already implemented it didn't work in WordPress version 4.x. Since WordPress version 5.x its working just as expected.
add_action( 'wp_enqueue_scripts', function()
{
wp_register_script( 'test-handle', '', array(), null );
wp_enqueue_script( 'test-handle' ) );
wp_add_inline_script( 'test-handle', 'does work since WP 5.x' )
} );
I'm working on to writing a Wordpress Plugin based on: http://wppb.io/
My issue is: I'm working on Public view and try to use Ajax to connect with backend.I'm use: public/js/ xxx-public.js to place all ajax function handle and Define some hooks:
wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_register_script( 'district_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_enqueue_script( 'district_handle');
wp_register_script( 'ret_cus_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js' , array( 'jquery' ), $this->version, false);
wp_enqueue_script( 'ret_cus_handle');
wp_register_script( 'order_ret_cus_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_enqueue_script( 'order_ret_cus_handle');
It works.
But problem is: the website will generate 4 xxx-public.js in header. I only want one.
I'm just a newbie with WP plugin. I hope to get your solution. Thank you in advance
You can use wordpress function wp_script_is() to determine if a script is enqueued already and use it in a conditional code like this below.
Make a function for scripts you want to enqueue first like this.
function custom-script( ) {
wp_enqueue_script('xxx-public.js');
}
Then write a conditional code.
if ( ! wp_script_is( 'custom-script', 'enqueued' ) ) {
// your code here
}
Make sure you check wp_script_is() from wordpress function references as it takes two parameters $handle and $list.
Hopes this helps for you.
I have a responsive Wordpress theme from "Elegant Themes" that works well, but there's a page that I wish to be non-responsive. I created a style sheet that successfully renders the site non-responsive, but I only want to it to use the said style sheet when a particular page template is used.
I've determined that the logic is probably executed it the functions.php file, and that I'll likely need to use "wp_enqueue_style", but I can't seem to crack it. Here's what I have right now (my addition is below Loads the main style sheet comment:
function et_nexus_load_scripts_styles(){
global $wp_styles;
$template_dir = get_template_directory_uri();
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_enqueue_script( 'superfish', $template_dir . '/js/superfish.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'nexus-custom-script', $template_dir . '/js/custom.js', array( 'jquery' ), '1.0', true );
wp_localize_script( 'nexus-custom-script', 'et_custom', array(
'mobile_nav_text' => esc_html__( 'Navigation Menu', 'Nexus' ),
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'et_hb_nonce' => wp_create_nonce( 'et_hb_nonce' ),
) );
$et_gf_enqueue_fonts = array();
$et_gf_heading_font = sanitize_text_field( et_get_option( 'heading_font', 'none' ) );
$et_gf_body_font = sanitize_text_field( et_get_option( 'body_font', 'none' ) );
if ( 'none' != $et_gf_heading_font ) $et_gf_enqueue_fonts[] = $et_gf_heading_font;
if ( 'none' != $et_gf_body_font ) $et_gf_enqueue_fonts[] = $et_gf_body_font;
if ( ! empty( $et_gf_enqueue_fonts ) ) et_gf_enqueue_fonts( $et_gf_enqueue_fonts );
/*
* Loads the main stylesheet.
*/
if ( is_page_template('custom-pagetemplate.php') ) {
wp_register_style( ‘custom-style’, get_stylesheet_directory_uri() . ‘/customstyles.css’ );
wp_enqueue_style( ‘custom-style’ );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
From what I can tell, I have my condition set up correctly using is_page_template, but it definitely isn't using the right style sheet to load the page.
Note: I posted this question to Elegant Themes' customization support board, and the moderator said that what I'm trying to do is possible, but it would necessitate a level of customization that would require me to hire a third party developer.
Having said that, if I'm missing something huge here and need to pick up a PHP book (I know very little about PHP), or shell out some cash to hire someone to get this done, please don't hesitate to set me straight. Otherwise, any input is much appreciated.
Thanks!
Sorry to jump the gun and answer my own question to quickly, but I got it working using the following code:
if ( is_page_template('custom-pagetemplate.php') ) {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/customstyle.css' );
} else {
wp_enqueue_style( 'nexus-style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'et_nexus_load_scripts_styles' );
My primary issue was that I was using get_stylesheet_directory_uri() instead of get_template_directory_uri.
This article helped me out a lot: How to enqueue a custom stylesheet via functions.php in WordPress
Thanks!
You can do something similar to this:
if(is_page($page)) {
// Load non responsive css
}
else {
// load normal css
}
http://codex.wordpress.org/Function_Reference/is_page
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.