WordPress Custom Fields Restyling

I use Custom Fields a lot, always by means of Enzymes, for managing the code snippets I’m going to comment about.

The Custom Fields section inside the post editing page shows added custom fields in a table whose columns change their width to fit the content, but the rows don’t change their height. I do not like that design: a definition list is much better than a table there. The key is the definition term and the value is the definition data.

Here are some pictures about the results of my experiment. The first row is my restyling, and the second row is how the same data appear in the usual design. There are three custom fields already added to this post: snippet1, snippet2, and snippet3; in the right picture, a new google custom field is going to be added

customfields1.png , customfields2.png , customfieldsnew.png


Features of my restyling
  • added fields and the new field are evenly represented by the classical definition list style, where definition data is indented below the definition term; this provides a powerful clue for identifying the key / value roles, thus making all the labels superfluous
  • space usage is smarter; the key spans all the available width; the value almost all of it, and its height is greater than usual too, thus allowing for a convenient inspection, for viewing and editing purposes; the vertical scrollbar is much more useful than the horizontal one
  • by clicking its key, a custom field gets expanded, thus showing its value and its two editing buttons, while the rest of the custom fields gets collapsed; showing only one custom field at a time helps keeping user’s attention focused
  • the selection box for chosing an already known-to-the-system key is replaced by a list of buttons, located above the key field; by clicking any of them, the key gets copied into the key field, so that the user can leave it alone or change it, if needed; the overall design is more coherent

6 Replies to “WordPress Custom Fields Restyling”

  1. DL is a better choice here, I agree. I don’t think, though, that it’s obvious to a user that clicking an unlabeled text input will produce a popout textarea.

    What about just bare text:

    <dt>key 1</dt>
    <dd>value 1</dd>
    <dt>key 2</dt>
    <dd>really long value for…</dd>

    And then maybe an edit in place? Just thinking out loud.

  2. Hi,

    I’ve run across yours site through google, I use the morning after theme (http://themasterplan.in/themes/the-morning-after/), which is targeted at online magazine, designed by arun and it perfectly fits my need,

    however, it uses custom fields to show pictures associated with the recent posts and it is too inconvenient to upload picture everyday through ftp since i am not sitting with my home computer everyday and i often blog through internet cafe

    do you know how to show picture from outside website such as photobucket instead

    i’m desperately searching for the solution and hope you can help me

    thanks in advance

  3. It’s very simple. And custom fields are not necessary.

    1. Upload your image to Photobucket
    2. Click the rectangle under “HTML Tag – Websites & Blogs”
    3. Edit your post
    4. Go to the Code tab (default is Visual)
    5. Click the spot for the image
    6. Paste
    7. Save and continue editing

    If you wanted your image to appear outside the content of your post, like in a specific position in a template, you have two choices: use a bit of PHP and MySQL (if you wanted only the image of the last post, no matter how many posts appear in the page), or use an Enzymes setup (if you wanted an image per post).

  4. I love no 4 but it would be cool to place the code with cronjob to roll them every hour or so.You just load 20 or 50 of them and don’t think about it for a week.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.