Adding your own style sheets and javascript files to admin pages in WordPress

If you have your own theme you will be also providing a Menu page for Admin Options, and consequently you will be linking stylesheets (css documents) as well as script files (most likely you would like to use jQuery).

The easiest way to accomplish this is by adding the link and script tags directly on the admin page, however such tags are meant to be inserted in the Head section of the web page not inside the Body section, in order to fix it is required to use the following APIs:

wp_register_style    | wp_register_script
wp_enqueue_style     | wp_enqueue_script

They need to be used before registering the menu page, this is, you will likely register the admin menu page as follows:

add_action('admin_menu', 'qt_admin_panel_register');

/**
 * Register Admin Panel.
 *
 * @access public
 */
function qt_admin_panel_register() {
    add_menu_page(__("QT Theme Admin Options"), __("QT Options"), "manage_options",
        "qt_admin", "qt_admin_page", qt_admin_icon());
}

Then you will register and enqueue the needed style sheet and scrip files as follows:

add_action('admin_menu', 'qt_admin_panel_register');

/**
 * Register Admin Panel.
 *
 * @access public
 */
function qt_admin_panel_register() {
    // register the style for the admin page
    wp_register_style('admin', get_path_from_stylesheet_dir('admin/style.css'));
    wp_enqueue_style('admin'); 

    //register jquery script 
    wp_register_script('jquery2', get_path_from_stylesheet_dir('js/jquery.js'));
    wp_enqueue_script('jquery2'); 

    // add the admin page
    add_menu_page(__("QT Theme Admin Options"), __("QT Options"), "manage_options",
        "qt_admin", "qt_admin_page", qt_admin_icon());
}

Notice that you don’t need to unregister jQuery before registering the version of the script you want to use.

Have a good day