CODEWITHSUNDEEP
phpwordpress
Tcmxc
Tcmxc

Reputation: 491

Correct way to use wp_enqueue_script() inside the functions.php file

Im using wp_enqueue_script() in my functions.php file to give users on the front end the ability to upload images with dropzone.js. It's making my side extremely slow and I get this error:

wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks.

Here's the problematic code it works great and does exactly what I want but slows my site to a crawl. What am I doing wrong here?

wp_enqueue_script('dropzone','wp-content/themes/storefront/assets/js/dropzone.js', array('jquery'));
wp_enqueue_script('my-script','wp-content/themes/storefront/footer.php', array('jquery','dropzone'));
 $drop_param = array(
  'upload'=>admin_url( 'admin-ajax.php?action=handle_dropped_media' ),
  'delete'=>admin_url( 'admin-ajax.php?action=handle_delete_media' ),
);
wp_localize_script('my-script','dropParam', $drop_param);



add_action( 'wp_ajax_handle_dropped_media', 'BMP_handle_dropped_media' );
add_action( 'wp_ajax_nopriv_handle_dropped_media', 'BMP_handle_dropped_media' );

function BMP_handle_dropped_media() {
   // status_header(200);
    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $num_files = count($_FILES['file']['tmp_name']);
    $post_id = get_the_ID();

    $newupload = 0;

    if ( !empty($_FILES) ) {
        $files = $_FILES;
        foreach($files as $file) {
            $newfile = array (
                    'name' => $file['name'],
                    'type' => $file['type'],
                    'tmp_name' => $file['tmp_name'],
                    'error' => $file['error'],
                    'size' => $file['size']
            );

            $_FILES = array('upload'=>$newfile);
            foreach($_FILES as $file => $array) {
                $newupload = my_handle_attachment( $file, $post_id );
            }
        }
    }

    echo $newupload;    
    die();
}

add_action( 'wp_ajax_handle_delete_media', 'BMP_handle_delete_media' );
add_action( 'wp_ajax_nopriv_handle_delete_media', 'BMP_handle_delete_media' );
function BMP_handle_delete_media(){

    if( isset($_REQUEST['media_id']) ){

        $post_id = absint( $_REQUEST['media_id'] );

        $status = wp_delete_attachment($post_id, true);

        if( $status )
            echo json_encode(array('status' => 'OK'));
        else
            echo json_encode(array('status' => 'FAILED'));
    }

    die();
}

Thanks for any help. Heres where I pulled the code from originally. How to integrate Dropzonejs with wordpress media handler in frontend?

Upvotes: 2

Views: 1681

Answers (1)

Brett Hoffman
Brett Hoffman

Reputation: 46

Wrap your wp_enqueue_script() calls in a function: 

function your_styles_scripts() { 
    wp_enqueue_script('dropzone','wp-content/themes/storefront/assets/js/dropzone.js', array('jquery'));
    wp_enqueue_script('my-script','wp-content/themes/storefront/footer.php', array('jquery','dropzone'));
    $drop_param = array(
        'upload'=>admin_url( 'admin-ajax.php?action=handle_dropped_media' ),
        'delete'=>admin_url( 'admin-ajax.php?action=handle_delete_media' ),
);
    wp_localize_script('my-script','dropParam', $drop_param);
}

And the relevant action hook, as needed for your use case:

add_action( 'admin_enqueue_scripts', 'your_styles_scripts' );

or 

add_action( 'wp_enqueue_scripts', 'your_styles_scripts' );

Upvotes: 1

Related Questions