Support » Plugins » Understanding admin_print_scripts-(page-hook)

Viewing 12 replies - 1 through 12 (of 12 total)
  • I’d like to know this as well. I have one plugin that works fine, but has all the javascript included in the html output. There must be a way to split them and let them load in the background.

    I’ve found these tutorials:

    Using JavaScript and CSS with your WordPress Plugin

    How To: Load Javascript With Your WordPress Plugin

    Both emphasize that you have to hook into page_hook. What are page_hooks?! I did a search in codex. Nothing came up.

    How do I know what my page hook is? Is it in the body class?

    And why are these tutorials only talking about javascript for admin pages? In my case the javascript is a form validator.

    EDIT: This page has some more clues:

    Note: [wp_enqueue_script] will not work if it is called from a wp_head action, as the <script> tags are output before wp_head runs. Instead, call wp_enqueue_script from an init action function (to load it in all pages), template_redirect (to load it in public pages only), or admin_print_scripts (for admin pages only). Do not use wp_print_scripts (see here for an explanation).

    So template_redirect seems to be the alternative to admin_print_scripts to focus on for your purposes.

    template_redirect
    Runs before the determination of the template file to be used to display the requested page, so that a plugin can override the template file choice. Example (pedagogical, not useful): Redirect all requests to the all.php template file in the current themes’ directory.

    function all_on_one () {
    	include(TEMPLATEPATH . '/all.php');
    	exit;
    }
    add_action('template_redirect', 'all_on_one');

    So you have to create new template files to include javascript in a plugin?! 🙁

    Or putting it together, in my case:

    function loadjavascript() {
    	include(TEMPLATEPATH . '/events.php');
    	wp_enqueue_script( $formvalidation, '/' . PLUGINDIR . '/event-registration/js/validation.js');
    	exit;
    }
    add_action('template_redirect', 'loadjavascript');

    Would that work? Can I put that in the plugin’s main file and then call the function in other files within the plugin where needed?

    events.php is an existing template file. This function won’t mess up the entire header? It should only add that bit of javascript.

    The $formvalidation in the code above doesn’t do anything of course. I had it there as a placeholder. Not sure what to put in there.

    Codex gives this info:

    $handle
    (string) (required) Name of the script. Lowercase string.

    Or according to one of the tutorials mentioned earlier:

    The handle is a unique name that you will use to reference your script later.

    Reference how?

    If my function looks something like this:

    function loadjavascript() {
    	wp_enqueue_script( 'form_validation', '/' . PLUGINDIR . '/event-registration/js/validation.js');
    	include(TEMPLATEPATH . '/events.php');
    	exit;
    }
    add_action('template_redirect', 'loadjavascript');

    EDIT: This actually seems to work! validation.js now shows up in the header…

    How would I “reference” it in the script?

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    You don’t use template_redirect for admin pages. That’s for the main blog itself.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    If you want to enqueue a script on the post edit page only, then I’d use the admin_enqueue_scripts action hook. I mean, that seems to be what it’s there for.

    function my_enqueue($hook) {
      if ($hook == 'post.php') {
        wp_enqueue_script( .. whatever ..);
      }
    }
    add_action('admin_enqueue_scripts','my_enqueue',10,1);

    Just found out my solution doesn’t work. It redirected all pages to the events.php template.

    Thanks for the additional clues Otto42!

    I do not want the javascript in the admin pages. I’m trying to add functionality to a custom page (and cptnwinky to post/edit pages).

    So the admin_enqueue_scripts action hook can be used for pages outside of admin? I guess I’m dumb if that is not at all obvious to me…

    So something like this in the main plugin file should do the trick?:

    function my_enqueue($hook) {
      if ($hook == 'events.php') {
        wp_enqueue_script('form_validation', '/' . PLUGINDIR . '/event-registration/js/jquery.validate.js', array('jquery'));
      }
    }
    add_action('admin_enqueue_scripts','my_enqueue',10,1);

    Trying that now…

    EDIT: Doesn’t do anything… 🙁

    There’s nothing about admin_enqueue_scripts in the WordPress Codex. This post from two months ago mentions it as a new hook.

    This page has more information.

    More clues on this page.

    Next, we need to define the JavaScript function myplugin_cast_vote, the onClick action for the button, which will read the information the user entered, compose a request with SACK, and send it to the plugin for processing. As mentioned in the introductory section, this JavaScript function and the SACK library need to get added to the HTML head section of the web page the user is viewing. One way to do that is to add it to all viewer-facing screens using the wp_head action (you could also be a little more selective by using some of the is_xyz() Conditional Tags tests):

    More on Conditional Tags

    This seems to work:

    function loadjavascript() {
    	if ( is_page('events') ) {
    	?>
    	<script src='/wp-content/plugins/event-registration/js/jquery.validate.js' type='text/javascript'>	</script>
    <?php
    }
    }
    add_action('wp_head', 'loadjavascript' );
    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    I do not want the javascript in the admin pages. I’m trying to add functionality to a custom page (and cptnwinky to post/edit pages).

    What custom page?

    It’s hard to tell you how to do something when you have not explained what exactly it is that you want to do.

    If you just want to do this in a Page Template (which is what it sounds like), then you just put the enqueue call before the get_header bit of the page template itself.

    The original question was:

    How can I use admin_print_scripts-(page-hook) to attach a javascript script to the post/edit pages only?

    The conundrum cptnwinky was referring to is really how to add javascript to a header from a plugin. There is a lot of information in the codex about how to do this for admin pages, but nothing about how to do it in user-facing pages.

    Thanks for your latest solution to add javascript to a template page. Again, that wasn’t at all obvious to me. It’s good to know for my purposes.

    But it still doesn’t answer the question how to add javascript to the header from a plugin for pages other than admin pages.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    Okay, the problem is that I still have no idea what you want to do.

    I answered cptnwinky’s question above. The answer is the admin_enqueue_scripts hook.

    But I still have no idea what you want to do. You say “the question how to add javascript to the header from a plugin for pages other than admin page”… What pages?

    You have to be specific. Do you mean the main blog page? An archive page? A single post page? What exactly is it that you’re trying to do? You’re not trying to “add javascript”. You’ve already got javascript. Where do you want it to be? What conditions?

    Your “question” is simply far too vague for a proper response.

    The general answer to adding javascript to the site with a plugin is simply to call wp_enqueue_script. That’s it. There’s nothing more to it.

    <?php
    /*
    Plugin Name: Example
    */
    wp_enqueue_script( ... whatever ...);
    
    // end of plugin
    ?>

    There’s nothing more to it. If you want it to be limited to certain pages, you can wrap it in conditional tags to make it show up where you want it to be. For example, if you don’t want it on admin pages, put if (!is_admin()) in front of it.

    I answered cptnwinky’s question above. The answer is the admin_enqueue_scripts hook.

    As far as I understand, you didn’t answer his question at all. admin_enqueue_scripts only works for admin areas of the plugin, not for post/edit pages.

    Moreover, cptnwinky brought up admin_enqueue_scripts himself, you did not suggest it. His question was about understanding this function, how to use it outside admin pages, how to apply it to post/edit, how to “hook” it.

    But I still have no idea what you want to do. You say “the question how to add javascript to the header from a plugin for pages other than admin page”… What pages?

    You have to be specific. Do you mean the main blog page? An archive page? A single post page? What exactly is it that you’re trying to do? You’re not trying to “add javascript”. You’ve already got javascript. Where do you want it to be? What conditions?

    Your “question” is simply far too vague for a proper response.

    With all due respect, absolute BS. You just can’t read.

    Question: How to add javascript file addresses – or whatever the f*** they’re called – from a plugin to the headers of specific pages outside admin areas. Those pages could be a blog page or an archive page, but also any custom page.

    How to get a plugin to add the required javascript link to a specific page offering functionality to the user.

    According to the aforementioned tutorials and information in the codex admin_print_scripts can NOT be used in those pages. What to use in those cases? Also it is not clear to me what the page_hook of a custom page would be.

    You haven’t come close answering any of these questions. You have been condescending and rude from your first posts. I understand I have to be nice to the moderators or risk never getting answers or even being banned, but I’ve had it with you.

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    As far as I understand, you didn’t answer his question at all. admin_enqueue_scripts only works for admin areas of the plugin, not for post/edit pages.

    The Edit Post pages *are* in the admin areas of the site. That’s what he was asking about.

    Moreover, cptnwinky brought up admin_enqueue_scripts himself, you did not suggest it. His question was about understanding this function, how to use it outside admin pages, how to apply it to post/edit, how to “hook” it.

    He doesn’t mention the “admin_enqueue_scripts” hook at all. His link talks about adding scripts to your own admin pages using the page hooks.

    Question: How to add javascript file addresses – or whatever the f*** they’re called – from a plugin to the headers of specific pages outside admin areas. Those pages could be a blog page or an archive page, but also any custom page.

    I answered this already. Just make your plugin call wp_enqueue_script. It’s not any more complex than that.

    That’s really, really the answer. Truly. I’m not just making this stuff up here. If you just enqueue the script in the main body of your plugin, it’ll show up on every single page on the entire site, period. If you want to limit it to specific pages, then you can do that using conditional tags. Just put it into a function called by an action hook that happens after the query loads. Most common one is “init”.

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    I’m not certain what you mean by “any custom page”, but if you can detect when that custom page is loading, then all you have to do is call the wp_enqueue_script before the wp_head executes.

    According to the aforementioned tutorials and information in the codex admin_print_scripts can NOT be used in those pages. What to use in those cases?

    You’re right, admin_* can only be used for admin pages.

    Also it is not clear to me what the page_hook of a custom page would be.

    The page hook is what you get back when you add a custom page in the admin section. Adding Administration Menus doesn’t really cover it much, but all those add_submenu_page and similar functions return a page hook. Like so:
    $mypage = add_submenu_page( ... );

    $mypage is now your page hook. That page hook can then be used with something like this:

    function myplugin_admin_head() {
    // do stuff that will be in the head section of my custom admin page
    }
    
    add_action( "admin_print_scripts-$mypage", 'myplugin_admin_head' );

    You haven’t come close answering any of these questions. You have been condescending and rude from your first posts. I understand I have to be nice to the moderators or risk never getting answers or even being banned, but I’ve had it with you.

    Asking for further information should not be considered rude nor condescending, and I would suggest that you consider that plain text is not a particularly emotionally expressive medium. Any emotional content is what you’re reading into it, not what I’m putting there.

    I’m trying my best to help you, but I can’t do that if you’re going to get all snippy when I can’t understand what you’re talking about. You’re mixing up a lot of various stuff, and I’m trying very hard to sort through it to get to your actual questions and figure out just what you’re trying to do. There is a right way to do everything, and I can help you, if you can just be patient and explain it to me. Okay?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Understanding admin_print_scripts-(page-hook)’ is closed to new replies.