How To Include CSS and jQuery in my WordPress plugin?
Solution 1
For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
Then use: wp_enqueue_style('namespace');
wherever you want the css to load.
Scripts are as above but the quicker way for loading jquery is just to use enqueue loaded in an init for the page you want it to load on: wp_enqueue_script('jquery');
Unless of course you want to use the google repository for jquery.
You can also conditionally load the jquery library that your script is dependent on:
wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));
Update Sept. 2017
I wrote this answer a while ago. I should clarify that the best place to enqueue your scripts and styles is within the wp_enqueue_scripts
hook. So for example:
add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
wp_enqueue_style( 'namespace' );
wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}
The wp_enqueue_scripts
action will set things up for the "frontend". You can use the admin_enqueue_scripts
action for the backend (anywhere within wp-admin) and the login_enqueue_scripts
action for the login page.
Solution 2
Put it in the init()
function for your plugin.
function your_namespace() {
wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
wp_enqueue_style('your_namespace');
wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
wp_enqueue_script('your_namespace');
}
add_action( 'admin_init','your_namespace');
It took me also some time before I found the (for me) best solution which is foolproof imho.
Cheers
Solution 3
To include CSS and jQuery in your plugin is easy, try this:
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_script('custom_jquery');
wp_enqueue_style( 'new_style' );
}
I found this great snipped from this site How to include jQuery and CSS in WordPress – The WordPress Way
Hope that helps.
Solution 4
Accepted answer is incomplete. You should use the right hook: wp_enqueue_scripts
Example:
function add_my_css_and_my_js_files(){
wp_enqueue_script('your-script-name', $this->urlpath . '/your-script-filename.js', array('jquery'), '1.2.3', true);
wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");
Solution 5
Just to append to @pixeline's answer (tried to add a simple comment but the site said I needed 50 reputation).
If you are writing your plugin for the admin section then you should use:
add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");
The admin_enqueueu_scripts is the correct hook for the admin section, use wp_enqueue_scripts for the front end.
Related videos on Youtube
faressoft
Updated on April 14, 2020Comments
-
faressoft about 4 years
How To Include CSS and jQuery in my WordPress plugin ?
-
user658182 over 10 yearsFor those of us new to plugin development, could you please clarify "where ever you want the css to load?" Do we have to create page templates for each page where we want this to be called and then manually call it in the header?
-
user658182 about 10 yearsWhere does this code go? functions.php? Plugin.php?
-
Ryan Taylor about 10 years@user658182 use
add_action('init', 'function_name');
, where function_name is a function that enqueues the resources. -
Ryan Taylor about 10 years@user658182 your wordpress plugin should probably have its own .php file or folder in wp-content/plugins/
-
Brian Nezhad over 9 yearsHow can you make the style sheet work only if is on particular plugin?
-
HanniBaL90 over 6 yearsPlease could you provide us any link to a good documentation related to the new manner to achieve it ;) !!! Thanks
-
Giannis Tzagarakis over 6 yearsdo I have to reinitialize something after the enqueue command? or just reload the page?
-
Josh over 3 yearsThank you! I have been struggling with this.
-
clockw0rk almost 3 yearsthis worked like a charm, although i had to use the function "plugins_url" , since global paths result in a 404 on a standart apache2 (and should always do so!) -> see the wordpress reference under wp_register_style() for a good example