Insert Gridster into WordPress Backend

Question

I have been trying to include Gridster into my WordPress Backend but it simply doesn't work. The frontend works fine, but I can't figure out why, because the files are actually in the following directories.

First way I tried it:

function add_my_scripts() {
  wp_enqueue_script('jquery');
  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'), true );
  wp_enqueue_script( "gridster-script-custom",  plugins_url( '/js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
 }

Second one:

function add_my_scripts() {
  wp_enqueue_script('jquery');
  wp_enqueue_script('gridster-script', plugin_dir_url(__FILE__) . '/js/jquery.gridster.min.js', array('jquery') );
  wp_enqueue_script('gridster-script-extra', plugin_dir_url(__FILE__) . '/js/jquery.gridster.with-extras.min.js', array('gridster-script') );
  wp_enqueue_script('gridster-script-custom', plugin_dir_url(__FILE__) . '/js/gridster.js', array('jquery') );
 }

Third and last one:

function add_my_scripts() {
  wp_enqueue_script('jquery');
  wp_enqueue_script( 'gridster-script', get_template_directory_uri() . '/js/jquery.gridster.min.js', array('jquery'), '1.0.0', true );
  wp_enqueue_script( 'gridster-script-extra', get_template_directory_uri() . '/js/jquery.gridster.with-extras.min.js', array('gridster-script'), '1.0.0', true );
  wp_enqueue_script( 'gridster-script-custom', get_template_directory_uri() . '/js/gridster.js', array('jquery'), '1.0.0', true );
 }

rnevius · Accepted Answer · 2016-01-04T20:43:06.627

0

You can't randomly use plugin url functions, and need to choose the correct one for your use case. Assuming __FILE__ is correctly referring to the main plugin file, you'll need to hook that function into the admin_enqueue_scripts action hook:

function add_my_scripts() {
    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'), true );
    wp_enqueue_script( "gridster-script-custom",  plugins_url( 'js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'add_my_scripts' );

edited Jan 04 '16 at 20:43

answered Jan 04 '16 at 20:37

rnevius

26,578
10
58
86

Thank you I didn't know that. This post helped me too, because the file was included but was catching errors. (http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) – Jan 04 '16 at 21:02
You're welcome. If this answers the question, please select it as "correct." – rnevius Jan 04 '16 at 21:15
Sorry forgot that :) – Jan 04 '16 at 21:25

Insert Gridster into WordPress Backend

1 Answers1