Loading Custom Styles & Scripts

August 14, 2018

Loading Custom Scripts and Styles

The plugin provides its own enqueue system that mirrors the way loading assets is handled in WordPress. Inline with traditional WordPress plugin development you can leverage this system and a few useful hooks for outputting information in order to easily create extensions that add new functionality to the help desk.

Getting Started

You can begin loading scripts at anytime by hooking onto the ucare_loaded hook. However, it is recommended to instead begin enqueuing your custom scripts in the ucare_enqueue_scripts hook. Because the enqueue system uses the same parameters as their WordPress counterparts, you are free to use any of the existing WordPress dependencies for wp_enqueue_scripts.

function my_plugin_enqueue_custom_scripts() {

  // Load a custom script into the application
  ucare_enqueue_script( 'my-script', plugin_dir_url( __FILE__ ) . '/assets/script.js', array( 'jquery' ), '1.0.0' ); 

  // Load a custom style into the application
  ucare_enqueue_style( 'my-style', plugin_dir_url( __FILE__ ) . '/assets/style.css', null ), '1.0.0' ); 


add_action( 'ucare_enqueue_scripts', 'my_plugin_enqueue_custom_scripts' ); 


Proper script localization is also supported by the enqueue system, once again functions are available that mirror wp_register_script and wp_localize_script. In order to localize your script you simply follow the same steps as you usually would in WordPress.

function my_plugin_enqueue_localized_scripts() {
  $i10n = array(
    'my_string' => __( 'My String', 'text-domain' )

  ucare_register_script( 'my-script', plugin_dir_url( __FILE__ ) . '/assets/script.js', array( 'jquery' ), '1.0.0' );
  ucare_localize_script( 'my-script', 'my_plugin_i10n', $i10n );

  // Load the localized script into the application
  ucare_enqueue_script( 'my-script' ); 


add_action( 'ucare_enqueue_scripts', 'my_plugin_enqueue_localized_scripts' ); 

Was this article helpful to you?