5

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.

  • Are you ever enqueueing those scripts? It looks like you're just registering them... – rnevius Jan 04 '16 at 14:05
  • Yes I do, I just tried to register them this time, because I thought it is going to help. –  Jan 04 '16 at 14:17
  • 1
    Registering scripts won't actually include them in your page...You should use `wp_enqueue_script()` and the `wp_enqueue_scripts` action hook – rnevius Jan 04 '16 at 14:34

1 Answers1

0

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:

  1. Are you trying to do this on the front-end, admin dashboard, or both?
  2. What is the exact html that renders inside the <head> tag?
  3. IF the url is output, but it is not correct, then we have a different problem - so advise if that is correct. Note that when you "view source", normally the link(s) to the script(s) are clickable in the "view source" view, and you can immediately see if the script file is loading (because when you click the link, you'll see the script code), or not (because you'll see the markup for a 404 error page).
  4. Lastly, you may try removing the dependencies. I've had interesting problems using them sometimes, and this would be something I would fiddle with.
random_user_name
  • 25,694
  • 7
  • 76
  • 115
  • Just a note...`wp_enqueue_script('jquery');` is redundant, since it's included as a dependency in the other scripts. – rnevius Jan 04 '16 at 15:39
  • @mevius - True, but I'm trying to teach Michael about the proper way to enqueue jQuery, so I've done it explicitly as an example / model for him to use in the future. – random_user_name Jan 04 '16 at 15:40
  • Thank you very much, this helped me :) Now I am able to drag and drop boxes in my front as well as my backend. @cale_b your answers are always helpful and detailed enough to be understood easily, thank you for that. –  Jan 04 '16 at 16:36
  • Michael, if every you want me to help / look at a question, just post a comment to your question and @cale_b me on it - I'd be happy to take a look. – random_user_name Jan 04 '16 at 17:36
  • @cale_b I saw that the code only works for the frontend. I tried everything you can believe and at the end I tried to output a simple message, to be sure that jQuery is working, but nothing happens, I don't think that the scripts aren't loaded but what else could be the problem? And by the way do you have WhatsApp? –  Jan 04 '16 at 18:56
  • Hi Michael - I'm happy to help, but not by text apps. Needs to stay / be here on SO, please. Please provide the responses to the 4 questions I outlined at the bottom of my answer so that I can help you at this point. Are you now trying to make it work on the admin side, is that it? If so, you also need to use the [admin_enqueue_scripts](https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) hook. – random_user_name Jan 04 '16 at 19:00