I made a script in jsfiddle http://jsfiddle.net/JGM85/279/ and wanted to use it in my plugin option page. I created the css file(css/style.css) and a js file(js/main.js) And I referenced it like this:
<script type="text/javascript" src="js/main.js"></script>
<link href="css/style.css" rel="stylesheet" />
But the datepicker is not working nor the js and css. Does Wordpress has a special way of calling JS,Jquery, and css files?
Updated code
function super_plugin_scripts(){
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
}
add_action('wp_enqueue_scripts','super_plugin_scripts');
?>
<html>
<div class="demo">
<p>Date: <input type="text" id="datepicker" placeholder="Select a date"></p>
</div><!-- End demo -->
</html>
Try to use below code:
//SETUP
function super_plugin_install(){
//Do some installation work
}
register_activation_hook(__FILE__,'super_plugin_install');
Add Script and Style : (Please add css and js inside your plugin folder)
//SCRIPTS
function super_plugin_scripts(){
wp_register_style( 'my-plugincss', plugin_dir_url( __FILE__ ).'css/style.css' ) );
wp_enqueue_style( 'my-plugincss' );
wp_register_script('super_plugin_scriptjs',plugin_dir_url( __FILE__ ).'js/main.js');
wp_enqueue_script('super_plugin_scriptjs');
}
add_action('wp_enqueue_scripts','super_plugin_scripts');
Another way to add datapicker in your plugin :(not CSS, for css you need to follow above code)
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');