WP Plugin: Print javascript in header

[I am new to wordpress programming.]

I am developing a plugin. The plugin needs javascript code in header. In order to print the code only in header of plugin's setting page. I am unable to do that. I have referred instructions here

The plugin works fine if javascript is printed using this plugin

I also tried to add code within body (after div) by below method....

include( plugin_dir_path( __FILE__ ) . 'ipn/javascript.php');

But that to did not work.

Check the plugin code....

add_action( 'admin_enqueue_scripts', 'my_enqueued_assets' );

function my_enqueued_assets() {
wp_enqueue_script('Google_jquery', '.2.4.min.js');

}

add_action('admin_menu', 'my_plugin_menu');
function my_plugin_menu() {
add_menu_page('My Plugin Settings', 'Plugin Settings', 'administrator', 'my-plugin-settings', 'my_plugin_settings_page', 'dashicons-admin-generic');
}

function my_plugin_settings_page() {
global $my_plugin_settings;

echo 'HTML Form code here';
add_action( "admin_head-{$my_plugin_settings}", 'my_admin_head_script' );
}
function my_admin_head_script() { ?>




// javascript code that i want to print in header

<script type="text/javascript">$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;

$(document).on('click','#addScnt', function() {
        $('html code here').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click','#remScnt', function() { 
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});
});</script>
// javascript code end



<?php }
add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
echo 'CSS style here';
}

[I am new to wordpress programming.]

I am developing a plugin. The plugin needs javascript code in header. In order to print the code only in header of plugin's setting page. I am unable to do that. I have referred instructions here

The plugin works fine if javascript is printed using this plugin

I also tried to add code within body (after div) by below method....

include( plugin_dir_path( __FILE__ ) . 'ipn/javascript.php');

But that to did not work.

Check the plugin code....

add_action( 'admin_enqueue_scripts', 'my_enqueued_assets' );

function my_enqueued_assets() {
wp_enqueue_script('Google_jquery', 'http://code.jquery.com/jquery-2.2.4.min.js');

}

add_action('admin_menu', 'my_plugin_menu');
function my_plugin_menu() {
add_menu_page('My Plugin Settings', 'Plugin Settings', 'administrator', 'my-plugin-settings', 'my_plugin_settings_page', 'dashicons-admin-generic');
}

function my_plugin_settings_page() {
global $my_plugin_settings;

echo 'HTML Form code here';
add_action( "admin_head-{$my_plugin_settings}", 'my_admin_head_script' );
}
function my_admin_head_script() { ?>




// javascript code that i want to print in header

<script type="text/javascript">$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;

$(document).on('click','#addScnt', function() {
        $('html code here').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click','#remScnt', function() { 
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});
});</script>
// javascript code end



<?php }
add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
echo 'CSS style here';
}

• plugins
• plugin-development

Share Improve this question asked Jul 30, 2016 at 8:07 user6601842user6601842 122 bronze badges 5

• 1 first you don't need to enqueue jquery again it is already enqueued by wordpress so you can remove that code... second you need to decide if you really want to print the script inline or enqueue it as a separate file as either are possibilities here. – majick Commented Jul 30, 2016 at 8:15
• @majick about 'enqueue jquery again'. yes i realized that later. I need to print it in header section "Only in" plugin settings page and "NOT" entire admin. – user6601842 Commented Jul 30, 2016 at 8:20
• in my_plugin_settings_page() use wp_register_script to add your script only when this function is called – mmm Commented Jul 30, 2016 at 8:26
• @majick "it is already enqueued by wordpress". for unknown reason, a function stops working without jquery-2.2.4.min.js – user6601842 Commented Jul 31, 2016 at 9:14
• typically you would you wp_enqueue_script to enqueue the script as a file and put array('jquery') as the dependency argument to ensure it has loaded first, but if you are printing it inline, just put it in the admin_footer instead of in the header as jquery will have loaded by then. – majick Commented Aug 1, 2016 at 2:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

To only insert code into the header section in the admin area on single plugin pages you need to alter your add_action()function.

add_action('admin_head-pageof_thisplugin/thisplugin', 'thisplugin_adminhead');

function thisplugin_adminhead() {
    // here goes your content
    echo '<script>'
         .'/* ... */'
         .'</script>';
}

where pageof_thisplugin/thispluginis the hook slug that returns out of the function that creates your page like add_submenu_page(), add_options_pageoradd_management_page`.

Source and further details in the WordPress Codex