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.
Related
I want to echo out the version of a particular wp_register_script or wp_enqueue_script on the frontend.
Like Superfish JS registered via theme core files:
wp_register_script( 'superfish', GENESIS_JS_URL . "/menu/superfish{$this->suffix}.js", array( 'jquery', 'hoverIntent' ), '1.7.10', true );
wp_register_script( 'superfish-args', apply_filters( 'genesis_superfish_args_url', GENESIS_JS_URL . "/menu/superfish.args{$this->suffix}.js" ), array( 'superfish' ), PARENT_THEME_VERSION, true );
And, I want to get the version of these JS reflected on frontend via:
add_filter('the_content','addToEndOfPost');
function addToEndOfPost($content) {
if (is_single()){
return $content . '<p>Version of Superfish JS:</p>';
}
return $content;}
Even if I could get the separate script as a variable, I might be able to use a delimiter to separate out the version and id of these scripts. I'm trying WordPress development for the first time, so please help.
To load a script with condition you need to use wp_enqueue_scripts action - https://developer.wordpress.org/reference/functions/wp_register_script/
add_action('wp_enqueue_scripts','my_custom_scripts');
function my_custom_scripts() {
wp_register_script( 'superfish', GENESIS_JS_URL . "/menu/superfish{$this->suffix}.js", array( 'jquery', 'hoverIntent' ), '1.7.10', true );
wp_register_script( 'superfish-args', apply_filters( 'genesis_superfish_args_url', GENESIS_JS_URL . "/menu/superfish.args{$this->suffix}.js" ), array( 'superfish' ), PARENT_THEME_VERSION, true );
//Add your condition and enqueue script
if (is_single()){
wp_enqueue_script('superfish');
}
}
Been trying to enqueue script for the archive page, to no avail.
I've checked the source code for HTML (Ctrl + U), but the script doesn't load.
I've tried using is_post_type_archive(), still no.
I've put the enqueue_script in a different function as well.
function theme_resources() {
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'ui' ), '1.0.0', true );
if (is_archive()) {
wp_enqueue_script( 'infiniteScroll', get_template_directory_uri() . '/javascript/infiniteScroll.js', array( ... ) );
}
}
add_action('wp_enqueue_scripts', 'theme_resources');
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'ui' ), '1.0.0', true );
i would venture to say that 'ui' script does not exist. since this is a dependency, the whole script is not being loaded. probably you mean 'jquery' instead?
is_archive() is correct. but you had array(...) in your code, which actually throws an error. this should work:
if (is_archive()) {
wp_enqueue_script( 'infiniteSlider', get_template_directory_uri() . '/javascript/infiniteSlider.js', array( 'jquery' ), '1.0.0', true );
}
It's not a custom post type, just the default page for displaying blog posts, so instead of is_archive(), I should use is_home(), like so:
if ( is_home() ) {...}
I want to include bootstrap inside my WordPress installation. I know how to include scripts and styles to a theme, but this isn't what I want.
I've looked to the WordPress core files and I've tried to add the bootstrap files to the script-loader.php file but they will not be loaded. Is there any way to add these files to the WordPress core loaded styles and scripts?
for example, I've added this line to the default wordpress stylesheet/script loader function:
$styles->add( 'bootstrap', "/includes/css/bootstrap$suffix.css" );
$scripts->add( 'bootstrap', "/includes/js/bootstrap$suffix.js", array( 'jquery' ) );
but this will not work.
I would do this by altering your functions.php in your current theme.
There are a 2 functions you should know about. The first one is to add CSS.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Documentation
The second one is to add JS
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
Documentation
Wordpress has a basic documentation on how to do it both:
Documentation
Eventually you going to have something like this:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Good luck!
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.
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.