When enqueuing JavaScript or CSS from a plugin’s directory, use plugin_dir_url( __FILE__ )
.
Note that plugin_dir_url()
does return the URL with a trailing slash, unlike get_template_directory_uri()
and get_stylesheet_directory_uri()
which do not return the URL with a trailing slash. get_template_directory_uri()
and get_stylesheet_directory_uri()
are more commonly used in themes and child themes respectively.
Here is an updated version of test_plugin()
. It works.
add_action( 'wp_enqueue_scripts', 'test_plugin' );
function test_plugin() {
wp_enqueue_script( 'change_button', plugin_dir_url( __FILE__ ) . 'change_button.js', array( 'jquery' ), '1.0.0', 1 );
}
There was also a small fix needed for the JavaScript. #unique_button
should be in quotes. Finally, it’s a best practice to use .on()
instead of .click()
.
change_button.js:
jQuery( function ( $ ) {
$( "#unique_button" ).on( "click", function( e ) {
$(this).fadeOut(1000);
});
});