Extension 7: Textfield widths on the “Edit” page

March 26th, 2010 by Tobias Leave a reply »

A few weeks ago, I was approached with a question on whether it is possible to make the textfields on the “Edit” screen of a table wider, to allow for an easier editing of long text. As this might also interest other people, I decided to publish the solution as a WP-Table Reloaded Extension.

My thanks for making this possible go out to the folks at ningboHOTELreview.com. Thanks!

To get started with WP-Table Reloaded Extensions, you should read the introduction and follow the included instructions. You will also find links to the other presented Extensions there.

Now lets come to the actual code of the Extension:

/**
 * Change default textfield width on the "Edit" screen
 */
if ( is_admin() ) {
    function wp_table_reloaded_textarea_width_css() {
        ?>
        <style type="text/css" media="screen">
            /* Change all columns */
            #table_contents textarea {
                min-width: 400px;
            }
 
            /* Change only textareas in column A */
            #table_contents .edit_col_1 textarea {
                min-width: 780px;
            }
        </style>
        <?php
    }
    add_action( "admin_print_styles-{$WP_Table_Reloaded_Admin->hook}", 'wp_table_reloaded_textarea_width_css' );
}

Important: The code from above is not yet ready to use! (Well, it would work, but is not really useful.) Before it will be useful to you, you need to adjust the included CSS code, so that it changes the width to what you want. You can see two sections of CSS code, marked by a comment line above them. The first one is responsible for setting the textfield width on all columns of the “Edit” screen. The second example only changes those of the first column. You can copy that section as often as needed (don’t forget to change the “.col_1” to whatever you need). For both sections you can then set the width to any pixel value you like, by simply changing the number after the “min-width:” attribute.

Then, the code just needs to be copied into the file “wp-table-reloaded-extensions.php”, created according to these instructions (after the Plugin Header comment, but before the closing PHP bracket ?>). Then, just activate the new plugin “WP-Table Reloaded Extensions”, if you haven’t. That’s it! :-)

If you like this series of Extensions, I’m happy about any feedback, and especially about further suggestions!

Previous posts in this series that might interest you: