How To Include CSS and jQuery in my WordPress plugin ?
This question is related to
javascript
jquery
css
wordpress
Very Simple:
Adding JS/CSS in the Front End:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
Adding JS/CSS in WP Admin Area:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-pages-admin-styles', get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
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.
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.
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Example
<?php
function my_init_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}
add_action('init', 'my_init_method');
?>
You can use the following function to enqueue script or style from plugin.
function my_enqueued_assets() {
wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');
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
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");
You can add scripts and css in back end and front end with this following code: This is simple class and the functions are called in object oriented way.
class AtiBlogTest {
function register(){
//for backend
add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
//for frontend
add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}
if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}
First you need to register the style and css using wp_register_script() and wp_register_style() functions
//registering javascript and css
wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );
After this you can call the wp_enqueue_script() and wp_enqueue_style() functions for loading the js and css in required page
wp_enqueue_script('mysample');
wp_enqueue_style('mysample');
I fount a nice example here http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/
Source: Stackoverflow.com