Loading Your Custom Java into your WordPress Pages

custom-javascript-for-wordpress-pagesGetting your scripts to run on the correct page(s) on a wordpress site can be a complicated ordeal.  This is the method I use to add java and css styles to the wide range of circumstances.

The trick is to accommodate both front end and front end methods which require a different hook.

Lets take a look!  In all of these examples the files they point to are in the theme directory, but they can be used as a plugin as well!

Use scripts on a specific admin page, like editing a custom post type

In this example, we are utilizing a little javascript to hide and show a meta box when a particular category is clicked.  Its stored in the themes JS directory and the custom post type name is ‘custom_events’.


// in this case we add some JS to this so we can have the 
// appropriate meta windows open and close when they are 
// supposed to appear to the user on a custom post type
function domeline_meta_box_admin_script() { 
     global $post_type; 
     if( 'custom_events' == $post_type ) {
          wp_enqueue_script( 'domeline_meta_box_script', 
                     get_stylesheet_directory_uri() . '/js/phs_admin_action.js', 
                     true );
     }
}
// using a priority of 11 will set this in the right sequence, 
// but you could experiment with others
add_action( 'admin_print_scripts-post-new.php', 'domeline_meta_box_admin_script', 11);
add_action( 'admin_print_scripts-post.php', 'domeline_meta_box_admin_script', 11);

Use a script on a specific front end page, based on it being in a certain category

In this case we are calling a script and some CSS to a and post that belongs to category id#5

function domeline_js_in_wp_head() {
     if ( is_single() && in_category(5) ) {
          wp_enqueue_script( 'tdf_action_script', 
                           get_stylesheet_directory_uri() . '/js/tdf_action.js', 
                           true );

     }
}
function domeline_css_in_wp_head() {
      if ( is_single() && in_category(5) ) {
       wp_register_style( 'tdf_action_css',
                           get_stylesheet_directory_uri(). '/css/tdf_action.css');
       wp_enqueue_style( 'tdf_action_css' );

 }
}
add_action( 'wp_head', 'domeline_js_in_wp_head' );
add_action( 'wp_enqueue_scripts', 'domeline_css_in_wp_head' );
Add some javascript to a custom admin menu page.

This obviously is a little more complex as an admin menu page itself can sometimes hook itself when you are creating a custom post type.  This is not the case here!  We’re adding some custom a little something to Jetpacks portfolio custom post type page.  Another note here is that we are needing some of the jquery features and you can see how we’ve included it  in the wp_enqueue_script() action.


function domeline_admin_menu_javascript() {
     $screen = get_current_screen(); // 
     if ($screen->taxonomy == 'jetpack-portfolio-type') {

          wp_enqueue_script( 'domeline_admin_script',
                              get_stylesheet_directory_uri().'/js/admin_menu.js',
                              array(jquery),
                              '2.1.3',               // version
                              true);                 // adds to the footer, usually
                             );                      // safer

     }


}
add_action( 'admin_enqueue_scripts', 'domeline_admin_menu_javascript' ); 

Know a different/better way to do any of these?  Let me know more about it in the comments!

Leave a Reply