Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

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 :D

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');
      }

}
share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
Can you explain it further please? I am really not getting this :/ Do I need to register all my scripts/css first and then enqueue them? also, the hook_suffix works automatically or do I have to register it or something..? I mean..can you read my code above and explain a little using a piece of it? –  Cynthia Lara Sep 9 '13 at 16:15
1  
I see your edit and thank you so much for pointing that out! I am new at building themes and all I've done is based on tutorials here and there. I will look into my code and improve those callings of the template directory. –  Cynthia Lara Sep 9 '13 at 16:19
    
@CynthiaLara If that helped you solving the problem, then please mark it as solution. Thanks. Oh and about the hook_suffix argument: Every argument after the name of a filter or hook inside do_action()/apply_filters() is a argument that is available inside the callback. –  kaiser Sep 9 '13 at 16:21
    
I am sorry @kaiser I will mark it as solution when I understand how it works, I am trying to solve the issue using the logic stated there, I would vote up but can't because of my reputation... hold a little and if this works I will happily state your answer as solution :) –  Cynthia Lara Sep 9 '13 at 16:26
    
@CynthiaLara Of course. I added above comment exactly for that reason: Helping you to wrap your head around it fast as possible. You might as well want to read my Codex example about do_action() for the basics. –  kaiser Sep 9 '13 at 16:29
show 7 more comments

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');
share|improve this answer
    
Almost there (I guess)...now for example, the media upload won't work correctly in other admin pages. I tried to set a featured image but it won't load the media library as always in a fancybox, it sends me to a new page with the old uploader and no thumbs. Help please :( –  Cynthia Lara Sep 9 '13 at 16:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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