加载自定义wordpress插件的js和css文件

Question

In my wp-contents/pugins folder, I have program-registration . Inside this plugin I have js/registration.js and css/registration.css .

Why the function defined in this js file is not accessible?

<?php

/*
*   Plugin Name: Program Registration
*   Plugin URI: http://www.test.com/
*   Description: Program Registration plugin for wordpress.
*   Version: 1.0.0
*   Author: Admin
*   Author URI: http://test.com/
*/

global $wpdb;
global $success;
global $error;

define('PROGRAM_REGISTRATION_TABLE', $wpdb->prefix . "program_registration");

/*
|--------------------------------
| Process Registration Form
|--------------------------------
*/

if( isset($_POST['program_register']) ) { 

    try {

        if ( !empty($_POST['candidate_name']) && !empty($_POST['candidate_address']) && !empty($_POST['candidate_phone']) && !empty($_POST['program']) ) {

            $rows_affected = $wpdb->insert(PROGRAM_REGISTRATION_TABLE, array('candidate_name' => $_POST['candidate_name'],'address' => $_POST['candidate_address'], 'email' => $_POST['candidate_email'], 'phone' => $_POST['candidate_phone'], 'program' => $_POST['program'], 'ip' => $_SERVER['REMOTE_ADDR']) );

            if($rows_affected == 1) {
                $success = "You are successfully registered, you will get informed!";
            } else {
                $error   = "Something went wrong!";
            }
//echo $wpdb->last_query;

        } else {

            if( empty($_POST['candidate_name']) ) {
                throw new Exception("Candidate Name cannot be empty!");
            } elseif ( empty($_POST['candidate_address']) ) {
                throw new Exception("Address cannot be empty!");
            } elseif( empty($_POST['candidate_phone']) ) {
                throw new Exception("Phone cannot be empty!");
            } else {
                throw new Exception("Program cannot be empty!");
            }

        }

    } catch (Exception $e) {
        $error = $e->getMessage();
    }

}

/*
|--------------------------------
| Activate Plugin
|--------------------------------
*/

function program_registration_activation() {

    $registration_table = "CREATE TABLE ".PROGRAM_REGISTRATION_TABLE."(
        id int not null auto_increment,
        candidate_name varchar(100),
        address varchar(250),
        email varchar(50),
        phone varchar(20),
        program varchar(250),
        ip varchar(100),
        request_time timestamp,
        primary key(id)
    );";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($registration_table);
}

register_activation_hook(__FILE__, 'program_registration_activation');

/*
|--------------------------------
| Deactivate Plugin
|--------------------------------
*/

function program_registration_deactivation() {

}

register_deactivation_hook(__FILE__, 'program_registration_deactivation');

/*
|--------------------------------
| Stylesheets
|--------------------------------
*/

add_action('wp_enqueue_scripts', 'registration_styles');

function registration_styles() {  
    wp_register_style('program_style', plugins_url('css/registration.css', __FILE__));  
    wp_enqueue_style('program_style');  
}

/*
|--------------------------------
| Scripts
|--------------------------------
*/

add_action('wp_enqueue_scripts', 'registration_scripts');

function registration_scripts() {  

    wp_register_script('registrationjs_init', plugins_url('js/registration.js', __FILE__));  
    wp_enqueue_script('registrationjs_init');

}

/*
|--------------------------------
| Shortcode
|--------------------------------
*/

add_shortcode('registration_form', 'registration_form_function');

function registration_form_function() {

    global $success;
    global $error;

    $form  = "";
    if(isset($success) && $success != '') {
        $form .= "<div class='alert alert-success'>
                    <button class='close' data-dismiss='alert' type='button'>×</button>
                    <strong>Well done! </strong>";
        $form .= $success."</div>";
    } elseif(isset($error) && $error != '') {
        $form .= "<div class='alert alert-danger'>
                    <button class='close' data-dismiss='alert' type='button'>×</button>
                    <strong>Error! </strong>";
        $form .= $error."</div>";
    }

    $form .= "<form method='POST' name='program_registration_form' action=''>
                <label for='candidate_name' class='registration_label'>Candidate Name:</label>
                <input type='text' name='candidate_name' class='txbx' required/> 
                <label for='candidate_address' class='registration_label'>Address:</label>
                <textarea name='candidate_address' class='txbx' required></textarea>
                <label for='candidate_email' class='registration_label'>E-mail:</label>
                <input type='email' name='candidate_email' class='txbx'/> 
                <label for='candidate_phone' class='registration_label'>Phone:</label>
                <input type='text' name='candidate_phone' class='txbx' required/> 
                <label for='program' class='registration_label'>Interested Program:</label>
                <input type='text' name='program' class='txbx' required/> 
                <input type='submit' name='program_register' value='Register' class='button blue small'/> 
            </form>";
    return $form;
}

/*
|--------------------------------
| Admin Settings Menu
|--------------------------------
*/

function program_plugin_settings() {
    // add_management_page
    add_menu_page( 'Program Registration', 'Program Registration', 'administrator', 'program_settings', 'program_settings_display');
}

add_action('admin_menu', 'program_plugin_settings');


/*
|--------------------------------
| Admin Settings Page
|--------------------------------
*/

function program_settings_display() {

    $html = '<h2>Program Registration Panel</h2>
            <table>
                <tr>
                    <th>S.No.</th>
                    <th >Candidate Name</th>
                    <th >Address</th>
                    <th >E-mail</th>
                    <th >Phone</th>
                    <th >Requested Program</th>
                    <th >Action</th>
                </tr>';
    $sql  = "SELECT * FROM ".PROGRAM_REGISTRATION_TABLE.""; 

    $result = mysql_query($sql);
    $i = 1;
    while($row = mysql_fetch_object($result)) {
        $html .= '<tr>
                    <td>'.$i.'</td>
                    <td>'.$row->candidate_name.'</td>
                    <td>'.$row->address.'</td>
                    <td>'.$row->email.'</td>
                    <td>'.$row->phone.'</td>
                    <td>'.$row->program.'</td>
                    <td><a href="javascript:void(null);" onclick="delete_registration('.$row->id.');">Delete</a></td>
                </tr>';
                $i++;
    }       

    $html .= '</table>';
    echo $html;
}

Answer 1

To load js and css files in wordpress admin panel plugin settings, we need to call admin_enqueue_scripts like this,

So here it will be,

function registration_scripts() {  

    wp_register_script('registrationjs_init', plugins_url('js/registration.js', __FILE__));  
    wp_enqueue_script('registrationjs_init');

}

add_action( 'admin_enqueue_scripts', 'registration_scripts' );