Unable to load stylesheets and scripts to plugin settings page

Question

I have the following code in my main plugin file:

<?php
/*
Plugin Name: Awesome Slide Show
*/

    add_action('admin_head', 'wp_ss_plugin_include');
    add_action('admin_menu', 'wp_ss_plugin_add_menu');

    function wp_ss_plugin_include() {
        echo "<style>";
        require 'settings/style.css';
        echo "</style>";

        echo "<script>";
        require 'settings/script.js';
        echo "</script>";
    }

    function wp_ss_plugin_add_menu() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }

?>

There are three files in the settings/ directory namely index.php, style.css, and script.js. The content of those files are taken from here.

First, I'm supposed to get a slideshow of images in my plugin's settings page. However, I'm not able to move around the slides (previous and next). I tried to debug, and I found that the click events are not working. (Please have a look at the code in the link given above). I think the style sheet is loading but not the script.

Second, I'd like to know if the technique I've used to load the scripts and styles is correct or not. I got the idea from Hello Dolly plugin which directly echos it's style. Is this the correct way? Or what is the best practice to build my own settings page for my plugin with all the styles and scripts and everything? I couldn't find how to do so for Plugins settings page. I only found stuff for Themes settings page.

Answer 1

The way to go was to use wp_enqueue_style() and wp_enqueue_script functions when admin_enqueue_scripts hooks.

To register styles and scripts with wp_register_style and wp_register_script respectively is optional, but has some good advantages as nicely explained here.

Here's the working script:

<?php
/*
Plugin Name: Awesome Slide Show
*/



// admin_init
// ************************************************************************************************
    function wp_ss_plugin_admin_init_cb() {
        // Register CSS
        wp_register_style(
            'wp_ss_plugin_style', plugin_dir_url( __FILE__ ) . '/settings/style.css'
        );

        // Register JS
        wp_register_script(
            'wp_ss_plugin_script', plugin_dir_url( __FILE__ ) . '/settings/script.js',
            'jquery' //jQuery dependency
        );
    }
    add_action('admin_init', 'wp_ss_plugin_admin_init_cb');



// admin_enqueue_scripts
// ************************************************************************************************
    function wp_ss_plugin_admin_enqueue_scripts_cb() {
        //Enqueue CSS
        wp_enqueue_style('wp_ss_plugin_style');

        //Enqueue JS
        wp_enqueue_script('wp_ss_plugin_script');
    }
    add_action('admin_enqueue_scripts', 'wp_ss_plugin_admin_enqueue_scripts_cb');



// admin_menu
// ************************************************************************************************
    function wp_ss_plugin_admin_menu_cb() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }
    add_action('admin_menu', 'wp_ss_plugin_admin_menu_cb');



?>

---

One more issue I faced was that even after scripts and styles were working, jQuery was not. And that was solved after adding jQuery as a dependency to my script using the third parameter of wp_register_script.