Custom Write Panels

One of the great assets Wordpress possesses is the ability to easily customise the backend.

For example, a client needs a website for a real estate agent. The client will be posting information on the various properties available and displaying standard information on each property:

Title
Short Description
Long Description
Price
Thumbnail image
Large images
Bedrooms
Bathrooms
Generic Description (selected from a list of pre-defined descriptions)


Obviously the title and description fields can be covered using the standard Wordpress Title and Content fields. Thanks to the fantastic additions to Wordpress 2.9, Post Thumbnail images are now easy to use and reference, and the Gallery Shortcode has been in effect for a while now.

This just leaves the custom fields. There are plugins you can use, but we are control freaks and like to do thinks ourselves. So, as a starting point, we use this fantastic tutorial on Wefunction, but with a few extras.

First of all we create an array for our fields:

$track_meta_boxes =
array(
"price" => array(
"name" => "price",
"type" => "input",
"std" => "",
"title" => "Price",
"options" => "",
"description" => "Enter Property Price"),
"bedrooms" => array(
"name" => "bedrooms",
"type" => "input",
"std" => "",
"title" => "Bedrooms",
"options" => "",
"description" => "No. of bedrooms"),
"bathrooms" => array(
"name" => "bathrooms",
"type" => "input",
"std" => "",
"title" => "Bathrooms",
"options" => '',
"description" => "No. of bathrooms"),
"desc" => array(
"name" => "desc",
"type" => "select",
"std" => "",
"title" => "Description",
"options" => $desc,
"description" => "Description")

);


Notice that we have added a field called "type" to our array. This defines whether we are displaying and input box or a select box. We also add an array called $desc to the 'options' field. This could be defined as follows:

$desc = "Great for the first time buyer";
$desc = "Roomy and spacious";
$desc = "No room to swing a cat";


Now we just make a small amendment to the code to test whether we are displaying a select or input field:

if ( $meta_box == 'select' ) {
echo '';
}
echo '';
} else {
echo '';
}


Note that this code just deals with displaying the panel. You can ascertain the necessary coding to display saved values (front and backend) from the wefunction tutorial. You will probably also want to test each of your option values against the saved value and flag it as selected if it is indeed the saved value.

We would also advise using the standard Wordpress markup when it comes to displaying the panels (something that they don't do in the wefunction tutorial). This is just for aesthetics, and it saves space.