wp_enqueue_script was called incorrectly

7 comments

1. Disable all plugins and switch to the default theme. It should be gone now.

   Then enable each addon step by step, until the problem comes back. You know the source now, let’s say a plugin.

   The plugin calls probably wp_enqueue_script too early. Find all occurrences of that function, then make sure they are bound to specific actions:

   • wp_register_script() should be called for the action wp_loaded
   • wp_enqueue_script on one of the actions
     • wp_enqueue_scripts,
     • admin_enqueue_scripts,
     • customize_controls_enqueue_scripts or
     • login_enqueue_scripts (see this thread for the latter).

2. Based on Gregory Schultz’s solution:

   Wrap all your scripts and styles in a function and hook that function to your target enqueue action.
   👇

   function my_admin_scripts() {
     wp_enqueue_style( 'admin-css', get_stylesheet_directory_uri() . '/admin/css/admin.css' );
     wp_enqueue_script( 'admin-js', get_stylesheet_directory_uri() . '/admin/js/admin.js', true );
   }
   add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
   

   ---

   wp_enqueue_scripts — front-end

   admin_enqueue_scripts — admin page

   login_enqueue_scripts — login page

3. Rather than disable all your plugins one by one, or modify your codebase to debug, you can use the Query Monitor plugin to narrow down the source of this error.

   When you see this error reported in the console:

   wp_register_style 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. Please see
   Debugging in WordPress for more information. (This message was added
   in version 3.3.0.)

   The last column (Component) will tell you the plugin that is triggering the error. From there do a search inside of that plugin (or theme) to find and patch the issue.

4. The reason why this is happening is because these functions are being called straight from the functions.php file, without using a function. Find out which lines in functions.php aren’t inside a function like this, and add them.

   Example for datepicker:

   -Instead of this in functions.php:

   wp_enqueue_script('jquery-ui-datepicker');
   wp_enqueue_style('jquery-ui-css', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
   wp_enqueue_style('jquery-ui-css', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
   

   -We add this

       // We define the function:
       function MYTHEME_scripts() {
       wp_enqueue_script('jquery-ui-datepicker');
       }
   
       // Add the functions to WP loading list.
       add_action( 'wp_enqueue_scripts', 'MYTHEME_scripts' );
   
       function MYTHEME_styles() {
       wp_enqueue_style('jquery-ui-css', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
       wp_enqueue_style('jquery-ui-css', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
       }
   
       // Add the functions to WP loading list.
       add_action( 'wp_enqueue_style', 'MYTHEME_styles' );
   

   Hope it works

5. It means there are 3 “endpoints” for wp_enqueue_script() which are wp_enqueue_scripts for the frontend, login_enqueue_scripts for the login screen, admin_enqueue_scripts for the admin dashboard. Check this link.

   You get this error because wp_enqueue_script() was called unproperly.

6. Wrap it in a hook called wp_enqueue_scripts.

   Example:

   add_action( 'wp_enqueue_scripts', function() {
       wp_enqueue_style('style', get_stylesheet_uri(), false, false, 'all');
       wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/script.js', true );
   });
   

7. What resolved this issue for me was downloading WordPress classic editor and classic widgets plugin

Comments are closed.