Loading external page template and enqueue script from plugin causes 403 forbidden error

Question

I have a plugin, which creates a panel on following page:

mysite.com/wp-content/plugins/myplugin/includes/mypanel.php

I want to use this panel on following page

mysite.com/mypanel

Solution that I tried was to using mypanel.php as page template as below:

add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'mypanel' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/mypanel.php';
    }
    return $page_template;
}

This way the page displays but none of the javascript works. So I have tried to import plugin's javascript in functions php.

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( strpos(get_page_template(), 'mypanel.php') !== false ) {
        wp_enqueue_script('wtd', $_SERVER['DOCUMENT_ROOT'].'/wp-content/plugins/myplugin/js/wtd.js');
    }

}

Which resulted 403 forbidden error. I added tried adding an .htaccess folder into plugin's page but it continued to give error.

Please tell me what is the correct way to solve this problem.

EDIT: After some answers below (thanks everyone). I moved my codes to my plugin's page, and no more 403 forbidden error. But my buttons are not working, and I feel like my js file not run over the page.

My js file starts with: jQuery(document).ready(function()

Here final code on plugin's page:

/* Make tisort-tasarla page as template */
add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'tisort-tasarla' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/tshirt-designer-design-template.php';
    }
    return $page_template;
}
/* Add Javascript to T-Shirt Design Page */

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( is_page( 'tisort-tasarla' ) ) {
        wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ), array( 'jquery' ));        
    }    
}

Answer 1

Your CODE is fine, the reason you are getting 403 error is because $_SERVER['DOCUMENT_ROOT'] returns absolute PATH to your web root, not URL.

JavaScript needs to be added as URL. So, you may use Load_Template_Scripts_wpa83855 function in your plugin and then use:

wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ) );

CODE to add JavaScript.

Note: obviously you can make the CODE even better using logic like what @nathan used in his answer, i.e. adding:

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');

within the wpa3396_page_template() function in if ( is_page( 'mypanel' ) ) {} condition block; but that's not the reason of the error. Server PATH cannot be accessed by browser, that's why the server returns Access Forbidden error.

Full CODE (Updated):

Here is the full CODE for your convenience (add it in your main plugin file):

add_filter( 'page_template', 'wpse_262042_page_template' );
function wpse_262042_page_template( $page_template ) {
    if( is_page( 'mypanel' ) ) {
        add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
        $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
    }
    return $page_template;
}

function wpse_262042_enqueue_scripts() {
    wp_enqueue_script( 'wtd', plugins_url( 'js/wtd.js' , __FILE__ ), array( 'jquery' ) );
}

Answer 2

If you already have, or are planning to have, a page called 'mypanel', then you can use the page_template filter to filter the template used on that page. I'm assuming that's what you're doing.

We can use the page_template filter to use a custom template for this page. While using this filter, we can add an action to enqueue scripts specific for this page.

add_filter( 'page_template', 'wpse_262042_page_template', 10, 1 );
function wpse_262042_page_template( $page_template ) {
  if( is_page( 'mypanel' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
    $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
  }
  return $page_template;
}
function wpse_262042_enqueue_scripts() {
  wp_enqueue_script( 'wpse-262042', plugins_url( '/js/wpse-262042.js', __FILE__ ) );
}

In the /includes/mypanel.php template file, make sure to call wp_head() and wp_footer() otherwise the enqueued scripts won't be printed.