Enqueue script in specific page

1 Views

I am building a wordpress theme with a theme dashboard with options, but as I read somewhere, the enqueue script code I am using just enqueues it in the backend but it loads in every page in the backend. So I am having some js conflicts…

I have this code:

Read More
add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'ikos_admin');
add_submenu_page(basename(__FILE__), $themename . ' Options', 'Theme Options', 'administrator',  basename(__FILE__),'ikos_admin'); // Default
}


function ikos_add_init() {

    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_style("ikosCss", $file_dir."/functions/theme-options.css", false, "1.0", "all");
    wp_enqueue_script("ikosScript", $file_dir."/functions/theme-options.js");
    wp_enqueue_script("ikospickerScript", $file_dir."/functions/color-picker.js", array( 'farbtastic', 'jquery' ) );
    wp_enqueue_style( 'farbtastic' );
    wp_enqueue_style( 'farbtastic' );
    wp_register_script('my-upload', $file_dir."/functions/upload.js");
    wp_enqueue_script('my-upload');

        if(function_exists( 'wp_enqueue_media' )){
        wp_enqueue_media();
}else{
        wp_enqueue_style('thickbox');
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
      }

}

So, how do I enqueue those scripts in that specific admin page only???
Thanks 😀

EDIT
YEAH NOW IT IS WORKING!
New code using the hook, then I added the var_dump( $hook_suffix ); exactly before the abort/return statement as @kaiser told me in the comments and it printed this: **string(0) “” string(27) “toplevel_page_theme-options” **.

So I just added the “toplevel_page_theme-options” in the ikos_add_init($hook_suffix) and it works! 

$hook_suffix = add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'ikos_admin');
add_submenu_page(basename(__FILE__), $themename . ' Options', 'Theme Options', 'administrator',  basename(__FILE__),'ikos_admin'); // Default

}


add_action( 'admin_enqueue_scripts', 'ikos_add_init' );

function ikos_add_init($hook_suffix) {
    if ( 'toplevel_page_theme-options' !== $hook_suffix )
    return;
    $file_dir=get_template_directory_uri();
    wp_enqueue_style("ikosCss", $file_dir."/functions/theme-options.css", false, "1.0", "all");
    wp_enqueue_script("ikosScript", $file_dir."/functions/theme-options.js");
    wp_enqueue_script("ikospickerScript", $file_dir."/functions/color-picker.js", array( 'farbtastic', 'jquery' ) );
    wp_enqueue_style( 'farbtastic' );
    wp_enqueue_style( 'farbtastic' );
    wp_register_script('my-upload', $file_dir."/functions/upload.js");
    wp_enqueue_script('my-upload');

        if(function_exists( 'wp_enqueue_media' )){
            wp_enqueue_media();
}else{
        wp_enqueue_style('thickbox');
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
      }

}
Post Views: 1

Related posts

2 comments

  1. Inside admin-header.php, there’s the following set of hooks:

    do_action('admin_enqueue_scripts', $hook_suffix);
do_action("admin_print_styles-$hook_suffix");
do_action('admin_print_styles');
do_action("admin_print_scripts-$hook_suffix");
do_action('admin_print_scripts');
do_action("admin_head-$hook_suffix");
do_action('admin_head');

    The one to always use it admin_enqueue_scripts, both for stylesheet and scripts. More info in this answer.

    It has one additional argument, the $hook_suffix. This argument is exactly the same as the return value that you get from add_submenu_page() and the related (shorthand) functions.

    Example

    Note: The following example assumes that you already registered the script previously, so it’s available with the handle/identifier of your_handle.

    add_action( 'admin_enqueue_scripts', 'wpse113509_register_script' );
function wpse113509_register_script( $hook_suffix )
{
    if ( 'dashboard.php' !== $hook_suffix )
        return;

    wp_enqueue_script( 'your_handle' );
}

    Additional Notes

    As I see that you’re identifying the Themes root directory using get_option('template_directory'), I have to leave a short additional note as this isn’t how it’s done nowadays, as this info then comes from the DB, which want to avoid. It as well will ignore the default filters that are in place for that:

    • get_template_directory() – Path to the parent theme root dir
    • get_stylesheet_directory() – Path to the child theme root dir
    • get_template_directory_uri() – URL to the parent theme root dir
    • get_stylesheet_directory_uri() – URL to the child theme root dir
    • plugin_dir_path( __FILE___ ) – Root of the current file, no matter if in child/parent theme or a plugin. Trailing slashed result.

    Then there’s wp_get_theme(), which calls an instance of WP_Theme for the currently active theme.

    $current_theme = wp_get_theme();
$current_theme->get_theme_root();
$current_theme->get_template();
$current_theme->get_template_directory();

    If you got a child theme, you can as well simply call $current_theme->parent() to access all the other WP_Theme methods on the parent themes instance. For e.g.

    $current_theme->parent()->get_theme_root();

    This then also allows to access header information from the theme. For e.g. the Name, DomainPath, etc.

  2. Look at the URL of the page you want to enqueue the js into. It might be sth like

    /wp-admin/edit.php?post_type=cpt&page=thisfile.php

    Then just use that like

    if($_GET['page'] == 'thisfile.php' AND is_admin())
    wp_enqueue_script('media-upload');

Comments are closed.