0

This code right here is in my functions.php file and was written to change the text in the media upload button, since I'm using the media uploader to allow site users to upload a personal business card if they choose. When I realized I'd actually like to hide several page elements in the WP uploader, as well as pulling the contents of the "link URL" field in an uploaded file, this function was the only place where the JQuery and CSS would actually work. How can I integrate this code into the site in the "proper" way? Are there hooks I can use to attach these lines of JQuery and CSS properly?

add_filter('attachment_fields_to_edit', 'my_action_button', 20, 2);

function my_action_button($form_fields, $post) {
    $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Use Photo' ) . "' />";
    $form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n"); ?>
<!-- This breaks the media uploader, but it does what it's supposed to do. Probably needs to be on a different page, but I don't know where. -->
    <script>
        jQuery('.savesend input[type=submit]').click(function(){  
            var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
            var field = jQuery(this).parents('.describe').find('.urlfield');
            field.val(url);
        });
    </script>
    <style>
        #media-head-125, #imgedit-response-125, .savebutton.ml-submit, .image-size, .align, .post_content, .post_excerpt, .image_alt, .post_title.form-required, .media-types.media-types-required-info, .url {
            display: none !important;
        }
    </style>
    <?php return $form_fields;
}
1

Well first of all, never use jQuery or JavaScript or CSS code at filter hook. Cause the filter hooks are not designed that way. It is designed to get an input modify or manipulate the input and return it back to where ever it(input) has come. So it has no function to echo anything. And no echo means no script placing for HTML.

Secondly, you can divide your code into two piece and put the jQuery and CSS code into a separate file, then enqueue that script file with admin_enqueue_scripts or wp_enqueue_scripts. It'll be a long example, so I'm not mentioning it here. Please do some search. I'm sure you'll find an example of it.

Thirdly, you can enqueue that script inline with HTML by hooking that script directly to admin_head or admin_footer ( For front-end it would be wp_head or wp_footer ). Now for your case I assume you need to hook that to your admin back-end. SO the code will be like below-

add_filter('attachment_fields_to_edit', 'the_dramatist_action_button', 20, 2);
function the_dramatist_action_button( $form_fields, $post ) {
    $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Use Photo' ) . "' />";
    $form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n");
    return $form_fields;
}

add_action( 'admin_footer', 'the_dramatist_footer_scripts' );
function the_dramatist_footer_scripts() {
    ?>
    <script>
        //jQuery('.savesend input[type=submit]').click(function(){
        //  var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
        //  var field = jQuery(this).parents('.describe').find('.urlfield');
        //  field.val(url);
        //});

        // I prefer writing your jQuery code like below.
        (function($){
            'use strict';
            $(funtion(){
                $('.savesend').on( 'click', 'input[type=submit]', function() {
                    var url = $(this).parents('.describe').find('.urlfile').data('link-url');
                    var field = $(this).parents('.describe').find('.urlfield');
                    field.val(url);
                });
            });
        })(jQuery)

    </script>
    <style>
        #media-head-125, #imgedit-response-125, .savebutton.ml-submit, .image-size, .align, .post_content, .post_excerpt, .image_alt, .post_title.form-required, .media-types.media-types-required-info, .url {
            display: none !important;
        }
    </style>
    <?php
}

Also notice I've tried to rewrite your jQuery code in a better approach. Writing jQuery code this way is better.

Notice: I haven't tested this code. Please test it before going live.

  • This is a killer shot at my problem. The first filter and function worked just fine. Unfortunately, the second function causes the same problem with the media page not loading as my code, and on top of it, the files won't load into the media popup like they would before; they just display a number, but never display the uploaded photo. This happens both when I comment out the CSS, and when I comment out the JQuery. Any ideas? – MarvinLazer Sep 28 '17 at 4:42
  • Can you give any screenshot what you wanna do and what you are getting ? Cause I'm kinda confused what you are now talking about. – CodeMascot Sep 28 '17 at 5:01
  • Yes sir! Here ya go. This imgur gallery should detail the issue I'm having quite well. imgur.com/gallery/46q52 – MarvinLazer Sep 29 '17 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.