Enqueue CSS and JS in WP

There are two steps taken when enqueueing a script or a style. First you register it – tell WordPress it’s there – and then you actually enqueue it, which eventually outputs it into the header or just before the closing body tag.

Register assets

• use wp_register_style function for register css files
• use wp_register_script function for register js files

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );

function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0.0' );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array(), '1.0.0', true );
}

wp_register_style parameters :

wp_register_style(
    string $handle,
    string|bool $src,
    string[] $deps = array(),
    string|bool|null $ver = false,
    string $media = 'all'
)

wp_register_script parameters :

wp_register_script(
    string $handle,
    string|bool $src,
    string[] $deps = array(),
    string|bool|null $ver = false,
    bool $in_footer = false
)

Enqueue assets

You can enqueue assets below the register function else anywhere.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0.0' );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array(), '1.0.0', true );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

If you want to load your assets for WP-Admin, You need to use same proccedurs excerpt use admin_enqueue_scripts instead of wp_enqueue_scripts.

add_action( 'admin_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0.0' );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array(), '1.0.0', true );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

If you want to load your assets for specific page only, here is an example code for you :

// Create an admin menu page & load assets only for this page.
add_action('admin_menu', 'create_admin_page');

function create_admin_page() {
   $hook = add_menu_page(__('Pathao', 'text_domain'), __('Pathao', 'text_domain'), 'manage_options', 'pathao-setup', 'page_content', 'dashicons-products', 50);

   	add_action('load-'.$hook, 'init_hooks');
}

function init_hooks() {
    add_action( 'admin_enqueue_scripts', 'page_assets' );
}

function page_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0.0' );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array(), '1.0.0', true );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

function page_content() {
    ?>
    <div class='gallary-lists'>
    ...............
    </div>
    <?php
}

Thanks.