I have a problem wih my WordPress plugin, I want to insert Gridster into the plugin but it doesn't work.
Here I am loading the files, which are correctly in the folder.
function add_my_stylesheet()
{
wp_enqueue_style( 'myCSS', plugins_url( '/css/bootstrap.css', __FILE__ ), false );
wp_enqueue_style("gridster-style", plugins_url( '/css/jquery.gridster.min.css', __FILE__ ), false );
}
add_action('admin_print_styles', 'add_my_stylesheet');
function add_my_scripts()
{
//I tried wp_register_script as well as wp_enqueue_script
wp_register_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
wp_register_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ) );
wp_register_script( "gridster-script-extra", plugins_url( '/js/jquery. gridster.with-extras.min.js', __FILE__ ) );
}
add_action( 'wp_register_scripts', 'add_my_scripts' );
And this is a code sample of the expected output, which of course doesn't work too.
echo'
<section class="demo">
<div class="gridster">
<ul>
<li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li>
<li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li>
<li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li>
</ul>
</div>
</section>
<script type="text/javascript">
var gridster;
$(function() {
gridtster = $(".gridster > ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
min_cols: 6
}).data("gridster");
});
</script>';
I tried including it in the templates' header file as well as in the plugin, but it only shows me the text and I am not able to drag and drop them.
Michael - good question again!
WordPress is great, but there's some tricks / nuances to how it works.
First, registering a script is useful (if for example you want to localize it, or in cases when you may (or may not) want to output it in the footer (with a separate print_scripts), BUT, it does not output the scripts onto the markup.
Additionally, based on where you've registered them (in the wp_register_script hook), you may want to change that as well.
If all you want is for your scripts to be output to the page markup, then modify your code as follows:
function add_my_scripts()
{
// proper way to include jQuery that is packaged with WordPress
wp_enqueue_script('jquery');
// Do not EVER include your own jquery. This will cause all sorts of problems for the users of your plugin!
// wp_enqueue_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
// you need enqueue here. ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency!
wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( '/js/jquery. gridster.with-extras.min.js', __FILE__ ), array('gridster-script') );
}
// and you need to hook the enqueue action here...
add_action( 'wp_enqueue_scripts', 'add_my_scripts' );
note that if this does not work for you, the next step is to view the rendered source and see what's going on. If you find this doesn't work, please advise:
<head> tag?