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 need to add a bit of document ready jQuery to post/page editors in admin. I'm hacking an old plugin that adds a text box to the editor page and handles inserting that text in a template file, but the text input is only html; this document ready function adds the class of mceEditor to the text box. This function works when I manually include it in admin-header.php, but I can't do that, of course.

I don't think I need to enqueue it, as it is not a library. Or do I? And, if applicable: what are the pros/cons of different ways to add it?

So how do I hook this or otherwise load it into the post/page editors in admin? It needs to go into the plugin file, not functions.php in the theme.

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>
share|improve this question

2 Answers 2

up vote 4 down vote accepted

I'd be inclined to just do a one off enqueue and be done with it..

It means you have to manage an additional file(the JS file), but when you're writing code it's usually a good idea to create some form of organisation with your files(or at least get into the habit of doing so), ie. javascript/jquery in one folder, css is another, keeping PHP and HTML in your main plugin PHP files.

So my suggestion would be to move the jQuery into a js file, then run an enqueue setting jQuery as a dependancy, but no need to register it for a one off call.

Quite a few choices with regard to hooks, but i'd personally go for..

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Handle
        plugins_url( '/yourfilename.js', __FILE__ ),  // Path to file
        array( 'jquery' )                             // Dependancies
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Simply adjust the pages you need the enqueue to run on - in the in_array() call.

share|improve this answer
    
Good points, I'll do this. And are you editing someone else named Mark Duncan, or a different account for yourself? :) –  songdogtech Aug 3 '11 at 22:48
    
I have a secondary account i use when using a PC not my own, makes me feel a little safer when on someone elses system. :) –  Mark Duncan Aug 4 '11 at 20:22

Some time ago I needed something like this, this is what I used:

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

At that time, I just hooked it to the admin_head action, now I know there's a whole lot of actions. Perhaps in this case would be better to hook it to the admin_print_scripts action:

add_action('admin_print_scripts', 'admin_js');

Note: This will print the script in the page, if you want to keep it in an external file you'll have to queue it:

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

And in your admin-js.js file, the javascript:

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

I'm using both this methods on option pages and both of them work with no problems.

share|improve this answer
2  
Appropriate script output hook is admin_print_scripts for everywhere or dynamic admin_print_scripts-$hook_suffix for specific page. –  Rarst Jul 27 '11 at 17:52

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.