7

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' ));        
    }    
}
  • Are you sure that your server is not blocking access to your script through .htaccess file? Also try using plugins url() to get the path to your plugins directory and see if it helps. – Jack Johansson Apr 2 '17 at 18:18
  • 1
    Hi, why do you think plugins_url will work? It just returns the path as string isn't it ? @JackJohansson , I tried the following solution: stackoverflow.com/a/37559573/1235655 – HOY Apr 2 '17 at 19:32
  • 1
    Hi. The absolute path and URL are differently approached by server. As you can see, there are already 2 answers for your question based on my comment, so i suggest you give it a try, and update the question with the output results. – Jack Johansson Apr 2 '17 at 19:56
5
+50

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' ) );
}
  • 403 error is gone but nothing happened, buttons doesn't work, my js file starts like this: jQuery(document).ready(function()... does it mean it won't work if I add it manually afterwards? How can I overcome this ? – HOY Apr 2 '17 at 20:11
  • You must also make your script load after jQuery. You may do so using: wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ), array( 'jquery' ) );. This CODE tells WordPress to load your script after jQuery. Also, plugins_url() function will not work in your theme's functions.php file, add that CODE in your main plugin file, as I've said before. – Fayaz Apr 2 '17 at 20:15
  • I used as you mentioned but it did not affect, can you please check the EDIT I made to my question at the bottom If I am not missing something? @Fayaz – HOY Apr 2 '17 at 20:26
  • 1
    Your CODE should work if: (1) you have all the files & CODE in the proper places (2) There is no error in your JavaScript (check in console & view source if JS file is loading) (3) your /includes/tshirt-designer-design-template.php template file has call to wp_head() WordPress function just before the HTML ending </head> tag & wp_footer() call just before ending </body> tag. Without these two functions header and footer scripts & styles will not load. – Fayaz Apr 2 '17 at 20:47
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.

  • 1
    Please fix your CODE, $page_template must be path, not URL. – Fayaz Apr 2 '17 at 20:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.