How to format custom fields when editing an attachment?

Question

I'm adding some custom fields to attachments, doing roughly this in a plugin (based on this tutorial):

function myplugin_add_attachment_fields( $form_fields, $post ) {

    $fields = array(
        'myplugin_credit' => array(
            'label'         => 'Credit',
            'input'         => 'text',
            'application'   => 'image',
            'exclusions'    => array('audio', 'video'), 
            'helps'         => "e.g. 'Bob Ferris'"
        )
        // More fields here.
    );

    foreach($fields as $name => $field_data) {
        if ( preg_match( "/" . $field_data['application'] . "/", $post->post_mime_type) && ! in_array( $post->post_mime_type, $field_data['exclusions'] ) ) {

            $field_data['value'] = get_post_meta( $post->ID, '_' . $name, true );

            $form_fields[$name] = $field_data;
        }
    }

    return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'myplugin_add_attachment_fields', 11, 2 );

This all works fine but the fields look like this when editing a Media item:

Two questions:

How can I easily make the labels ("Credit", "Publisher") line up vertically with the input field itself?
How can I make the input field as wide as the standard fields on the page?

I do know how to use CSS to make this work, but I don't know how to do this in a nice WordPress way from within my plugin.

UPDATE: In case it helps anyone, after using socki03's answer to add my own CSS file, I put this in it to fix the layout issue:

.compat-attachment-fields th.label {
    vertical-align: top;
}

.compat-attachment-fields,
.compat-attachment-fields input.text {
    width: 100%;
}

.compat-attachment-fields p.help {
    margin-top: 0.2em;
    margin-left: 5px;
}

socki03 · Accepted Answer · 2017-10-06 15:43:08Z

You'll have to include and enqueue a new CSS file for your plugin on the admin side using admin_enqueue_scripts. And since you may want to load this on every page, I'd follow the first example on the Codex (pasted here):

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}

add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

But instead of the get_template_directory function, you'll want to use the plugin_dir_url function, I believe.

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', plugin_dir_url(__FILE__) . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}

add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

To answer your two questions, it looks like the labels are vertically aligned in a table format. So, if that's the case, you'll need to vertically align the content to the top, and then change the width of the table, and all subsequent inputs to 100% or something like that. Without inspection, I'm just guessing at the image...

That's it, thanks so much! One thing - you need to add __FILE__ to that method call: plugin_dir_url(__FILE__). — Phil Gyford
– Phil Gyford, Commented Oct 6, 2017 at 15:41

Stack Exchange Network

How to format custom fields when editing an attachment?

1 Answer 1

Your Answer

Hot Network Questions

How to format custom fields when editing an attachment?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions