How To Include CSS and jQuery in my WordPress plugin?
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.
Include js and css in wordpress plugin
To include css and js to wordpress plugins.
In your plugin file of plugin folder add following code.
add_action('init', 'register_script');
function register_script() {
wp_register_script( 'custom_jquery', plugins_url('/js/script.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style', plugins_url('/css/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' );
}
Create your script.js and style.css file to js and css directory of plugin directory.
How do I use JQuery in my Wordpress plugin
Using jQuery(doc...
is the correct approach but you weren't passing $
into the function which is why it wasn't working for you.
Change:
$(document).ready(function(){
$('.test').css("background-color", "red");
});
To:
jQuery(document).ready(function($) {
$('.test').css("background-color", "red");
});
How to add own javascript/css file to wordpress plugin menu page?
add_menu_page()
returns the hookname on success. You can leverage that to enqueue your script on the dynamic load-{$hookname}
hook:
add_action( 'admin_menu', 'register_my_menu_item' );
function register_my_menu_item()
{
$my_plugins_page = add_menu_page(
__( 'top level menu item name','my_plugin_textdomain' ),
__( 'top level menu item name', 'my_plugin_textdomain' ),
'manage_options',
'mt-top-level-handle',
'my_plugins_page'
);
add_action( 'load-' . $my_plugins_page, 'so20659191_enqueue' );
}
function so20659191_enqueue()
{
wp_enqueue_script( 'my_script', plugins_url( 'js/my_script.js', __FILE__ ), array( 'jquery' ), null, true );
}
function my_plugins_page() {
?>
<h2>Hello World</h2>
<?php
}
Related Topics
How to Replace Text Inside a Div Element
How to Convert Base64 String to JavaScript File Object Like as from File Input Form
Intercept a Form Submit in JavaScript and Prevent Normal Submission
Chrome Counts Characters Wrong in Textarea With Maxlength Attribute
How to Add a ≪Script≫ Element to the Dom and Execute Its Code
How to Load an Entire HTML Document into a Document Fragment in Internet Explorer
Script Tag Create With Innerhtml of a Div Doesn't Work
What Is the Correct Syntax of Ng-Include
Getting Value of HTML Checkbox from Onclick/Onchange Events
How to Run JavaScript Before the Whole Page Is Loaded
Passing Form Data to Another HTML Page
Changing Element Style Attribute Dynamically Using JavaScript
Execute Function After Complete Page Load
Prevent Contenteditable Adding ≪Div≫ on Enter - Chrome