WP Plugin: Print javascript in header

Question

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

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
– 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
– 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
– 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
– 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
– majick, Commented Aug 1, 2016 at 2:06

Helmi · Accepted Answer · 2016-07-30 08:30:43Z

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

answered Jul 30, 2016 at 8:30

Helmi

1186 bronze badges

that did not work.. add_action('admin_head-my_plugin_settings_page', 'thisplugin_adminhead'); function thisplugin_adminhead() { echo script here }

user6601842
– user6601842

2016-07-31 07:31:31 +00:00
Commented Jul 31, 2016 at 7:31
your slug according to your first post should be my-plugin-settings not my_plugin_settings_page. The latter is the function name you are calling.

Helmi
– Helmi

2016-07-31 07:42:41 +00:00
Commented Jul 31, 2016 at 7:42
it was copy-paste mistake. I did actually try admin_head-my-plugin-settings

user6601842
– user6601842

2016-07-31 09:10:42 +00:00
Commented Jul 31, 2016 at 9:10
then probably the fact that you are using add_menu_page() is the problem. As the docs state: "Where HOOK_SUFFIX is the plugin's hook suffix as returned by add_submenu_page or one of its siblings add_options_page or add_management_page."

Helmi
– Helmi

2016-07-31 10:22:09 +00:00
Commented Jul 31, 2016 at 10:22

Add a comment |

Stack Exchange Network

WP Plugin: Print javascript in header

1 Answer 1

Your Answer

Hot Network Questions

WP Plugin: Print javascript in header

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions