Revisited: Creating Custom Write Panels in WordPress

Custom Write Panels a year later. More efficient and expandable.

Almost a year ago (wow, time flies!) I wrote a little tutorial explaining the nuances of add_meta_box in WordPress, and how it can be used to create some nifty Custom Write Panels. It was a nice little script, and still functioned great. I use it on almost all of the projects Liam and I have, and up to this point, it has been great. However, for an upcoming project, I foresaw some problems.

The current way things are set up in the script, it created a new row in the postmeta table for each custom input you included. Because of this, when you wanted to display the results on your theme, you also needed a separate variable for each input. Again, this great, and I never had any problems with it. But what happens when you have more than just one or two inputs? What about 8-10? Then things start getting a little hairy. Not only do you have to create 8-10 separate variables, but it creates a bunch of unneeded entries in the database.

So I decided to revise my script. Although it is only about 15 lines shorter than the previous one, it should function quite a bit faster (although I’ve done no real time trials.) The basic idea of the changes is to use a single row to include all the input fields, instead of one for each. If we store all of the data in a serialized array, we can have one key that holds all of our data. Because there is only one row to retrieve, we only have to define one variable to display our data.

A quick Example

This graphic is just a quick example to those of you who are new to custom write panels to help you see how this technique can be used to improve your experience in Wordpress. Click to enlarge.

Things start of basically the same. I’ve slightly altered my meta box arrays (taking out info that never really gets used.) I’ve also added a new variable, $key which will be used to label our new data (among other things.)

Where We Left Off (in functions.php)

Note: Please excuse the code indentions. The WordPress plugin auto-formats it. Sorry!


<?php
/*
Plugin Name: Custom Write Panel
Plugin URI: http://wefunction.com/2009/10/revisited-creating-custom-write-panels-in-wordpress
Description: Allows custom fields to be added to the WordPress Post Page
Version: 1.1
Author: Spencer
Author URI: http://wefunction.com
/* ----------------------------------------------*/

$key = "key";
$meta_boxes = array(
"image" => array(
"name" => "image",
"title" => "Image",
"description" => "Using the \"<em>Add an Image</em>\" button, upload an image and paste the URL here. Images will be resized. This is the Article's main image and will automatically be sized."),
"tinyurl" => array(
"name" => "tinyurl",
"title" => "Tiny URL",
"description" => "Add a small URL of this post that will be used to track tweets, and share the post.")
);

Then, to get it out of the way, lets add our function that actually creates the panels:


function create_meta_box() {
global $key;

if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'post', 'normal', 'high' );
}
}

Same exact thing as before, just used our $key variable to label the title.

Displaying the Write Panels

The next part is pretty similar as well. This is what we use to build the meta boxes. Like I said, not much changes. I’ve just removed some extra code that wasn’t needed (checking for standard values, which was removed from the arrays) and I also changed the way I setup the nonce.


<?php
function display_meta_box() {
global $post, $meta_boxes, $key;
?>

<div class="form-wrap">

<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );

foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>

<?php } ?>

</div>
<?php
}
?>

Now I’m using WordPress’s wp_nonce_field to create a nonce. This time it is outside of the foreach loop, because we clearly only need one! (Not sure what I was thinking before.)

As I mentioned before, I took out some code to check for default values, and instead replaced it with a $data value. This looks for our single meta row, with our defined key, and fills the input with any necessary data.

Saving the Data

The final part, where we save the data, is what got changed the most. The basic idea is to loop through our original $meta_boxes array, creating a new array to hold the values. In English: for each array in $meta_boxes, get the value of the input field, and add it to a new $data array.

So now we have a single array. Check out the code below:


foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

Not too bad right? In the function, we also need to verify the data. Since I have a better understanding of how the nonce works now, I’ll try and explain how we verify it. We can use WordPress function, wp_verify_nonce to verify that the correct nonce was used in the time limit. If that’s not true, we return the $post_id to abort the script. This stops you from being tricked into doing something you don’t want to. You can read more about nonces from Mark Jaquith.

The next snipet checks to make sure that the current user has the authority to edit a post. Because we have only created the meta_boxes on the post page, we only need to check that they can edit posts.


if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

If you remember the old script, in order to save the data, we first had to check to see if it existed, update it if it did, add it if it didn’t, or delete it if it was blank. Phew! A lot of checking. Imagine having the database do that 10 times? Seems quite slow right?

Well shortly after I wrote the old tutorial, WordPress updated update_post_meta so that if the row does not yet exist, it will create if for you. That allows us to only use one function, instead of checking for three. (I decided to exclude the delete, because chances are you’ll always have something, and one row isn’t nearly as bad as 3 or 4.)

So our final save function looks like this:


function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;

foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

update_post_meta( $post_id, $key, $data );
}

Final Code

Here is all of the new code. The last few lines initiate the script.


<?php
$key = "key";
$meta_boxes = array(
"image" => array(
"name" => "image",
"title" => "Image",
"description" => "Using the \"<em>Add an Image</em>\" button, upload an image and paste the URL here. Images will be resized. This is the Article's main image and will automatically be sized."),
"tinyurl" => array(
"name" => "tinyurl",
"title" => "Tiny URL",
"description" => "Add a small URL of this post that will be used to track tweets, and share the post.")
);

function create_meta_box() {
global $key;

if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'post', 'normal', 'high' );
}
}

function display_meta_box() {
global $post, $meta_boxes, $key;
?>

<div class="form-wrap">

<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );

foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>

<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>

<?php } ?>

</div>
<?php
}

function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;

foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

update_post_meta( $post_id, $key, $data );
}

add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );
?>

Implementation

One of the main reasons I redid the script was to have better implementation. Because all of our data is stored in one single row, we only need to call it once.


$data = get_post_meta( $post->ID, 'key', true );

Put that inside the while in the WordPress loop. Remember to change “key” to whatever value you entered in the script. That variable is now holding the array of information stored in the database. So you can simply access it like so:


<?php echo $data[ 'tinyurl' ]; ?>


<?php echo $data[ 'image' ]; ?>

Like I said, not much changed on the back-end, it’s only a few lines shorter, but it should be quite a bit more efficient, as well as more expandable.

If you have any questions about the code above, or the tutorial in general, please do not hesitate to leave a comment below. I will do my best to help answer any questions that may arise.

Written by Spencer on October 15, 2009

Tags: Article, Resource, Tutorial, Wordpress

182 Comments

Mike Smith said:

AWESOME! I am going to be using this in my next project. For some reason, I couldn’t remember where I saw the original article at. This popped up in my google reader right at the right time.

Code looks solid. Thanks for revisiting it!
Chris M said:

Awesome stuff, there’s so little information about this on the Internet, so thank you for publishing!
The Frosty said:

Very nice, I’ve been using a slight variation found inside the Hybrid theme for this. Good to see other perspectives.
Mihir Lakhani said:

this is gr8 piece of info
like this WP customization so much
it makes life a lot simple
ther was never a plugin to make custom write panels …

big round of applause for u
Mihir Lakhani said:

and my feed reader gets a new feed
delete this later .. lol
Ryan Burrell said:

Very useful. If you’d like a comprehensive plugin that does a lot of this for you, check out Flutter (http://flutter.freshout.us/)
Caroline Keim said:

I really like the way it appears in the backend, however I feel Flutter is just a little bit easier to understand and use. It combines all of these features and adds a tad bit more. Good post though!
Moodyjive said:

Thanks for this! Does the data in these custom write panels show up when using the basic Wordpress search? That is one of the problems with Custom Fields.
Spencer said:

Flutter does look pretty cool! But the script above is great for clients who you don’t want to have to create their own fields, or don’t know how. This lets you control which fields are on the posts, and what keys to use, when you develop the theme.
Leandro said:

Hey, did you tried Flutter or MagicFields (flutter predecesor)?
Jeff said:

Flutter is good — but seems to not be maintained any more. I’m helping out with, and really digging, Magic Fields. A fork of flutter, but already better.

http://magicfields.org/

Highly recommend it.
Spencer said:

@Moodyjive,

The data inputted into these fields act no differently than normal custom fields, so no. However I did find this plugin: http://wordpress.org/extend/plugins/wp-custom-fields-search/
shawn said:

Thank you for the tutorial:

I tried it myself and it worked exactly as advertised, although I did end up with a slight problem that I can’t figure out.

I changed the tinyurl field to ‘video’ so that I could use it for my authors to easily embed video’s into the articles. I then use your shortcode to place the video exactly where I want it on the page.

Where I get stuck:
When I post the embed code into the input field, and submit the article, instead of seeing all of the code in the input field box, I only see the beginning <object= and then below the input field, I actually see the video player itself.

Is there a different type of field I should be using for video embed code?

While I LOVE the idea of being able to see the video below the admin input box after submission, it is very confusing to the author as they can’t see their embed code anymore.

This is hard because they may want to edit the embed code to change the player size etc…

also:
I use the kaltura all in one video plugin to add video’s to the site. Basically it works just like the gallery script, where you choose the picture you want and it inserts the shortcode into the article.

When I try to put that shortcode into the video field write panel, and then view the article, I simply see the shortcode, not the video.

Is there something in wp that stops the ability to use shortcodes within the custom write panel?

It works perfectly within the article body itself, so the plugin is not in error.

anyhow, it seems to be a great start, and with some tweaking, it may be exactly the answer I need.

thanks so much

side note:
I like how I can edit my comment, but please move the yellow blinking ‘edit comment timer’ below the comment, as it keeps expanding and contracting, making it impossible for me to read for errors with all the jiggling going on. LOL
Spencer said:

@shawn,

Yes, I don’t think WordPress parses shortcodes in the custom input fields.

The reason you are seeing the video, is because the HTML that you’ve inputted into the field is being parsed by WordPress. A way around that is to use the PHP htmlspecialchars function. So all you have to do is wrap that around the value that is output into the input box.

Thanks for bringing this to my attention. I’ll update my code in the article.
Nokadota said:

This is interesting, I never knew about this. I’ll try it out sometime.
shawn said:

@Spencer - I sent an email to the contact us on the website that is way to long for a comment if you have the time to read it.

I also wanted to bring up a point for all users trying to do this with wordpress-mu. It’s a well known ‘issue’ with wp-mu not showing images due to the mod-rewrite going on to hide the blogs.dir path.

Here is a piece of code I use from timthumb posted yesterday that solves this problem.

HOWEVER: I cannot figure out how to add this code properly to the above code to display the image on the article itself. Maybe someone can figure the 2 out?
```
// timthumb fix to get the path
function get_image_path ($post_id = null) {
	if ($post_id == null) {
		global $post;
		$post_id = $post-&gt;ID;
	}
	$theImageSrc = get_post_meta($post_id, 'thumb', true);
	global $blog_id;
	if (isset($blog_id) &amp;&amp; $blog_id &gt; 0) {
		$imageParts = explode('/files/', $theImageSrc);
		if (isset($imageParts[1])) {
			$theImageSrc = '/blogs.dir/' . $blog_id . '/files/' . $imageParts[1];
		}
	}
	return $theImageSrc;
}
```
In wordpress-mu using either of the below commands will not work as the ‘true’ path to the image is not known due to the wpmu issues. You ‘have’ to run it through something like the code snippet above to get the real url.

The ‘display’ code I would normally use is the first one below:
```
echo get_image_path();
echo $data[ 'thumb' ];
```
Anyhow, I am stuck on this, could use some help if anyone can make sense of what I am saying. If not I can email much better details to someone.
Spencer said:

@shawn,

The function you have right now, get_image_path, is looking for a custom field with a key of “thumb”. If you are using the function with my code, you would need to change that to the key you used in the new code, then edit the $theImageSrc variable to equal the thumbnail part of the array:
```
$get_data = get_post_meta($post_id, 'your_key', true);
$theImageSrc = $get_data[ 'thumb' ];
```
Hope that makes sense!
Web in Review for October 15th, 2009 | Madyson Designs said:

[...] Function Web Design & Development Blog?—? » Revisited: Creating Custom Writ…?—?A wonderful way to add many types of custom information to your WordPress blog. [...]
Daniel Anderson said:

First of all Great Article! I have been testing out the More Fields Plugin which work quite well.

One question about this, is it possible to display a dropdown list of options instead of a text box? If you can this would be perfect for a project I am working on at the moment.

Cheers
Devin Price said:

Thanks for writing about this. I’ve been using Flutter, but it makes me nervous every time an upgrade of WordPress comes out. I’ll try using your code on a future project.
shawn said:

@Spencer - That worked perfectly once I figured out what was happening. What I did was rewrote my image function from timthumb and gave it different variable names. I then used that variable in your code to make the call and whaalaa it worked.

I read a bit about the ‘PHP htmlspecialchars function’ but have a long way to go to understand where and what to do. (would be really cool if you added ‘video embed field type’to your tutorial so I could see firsthand what you mean. I’m guessing others would also want to use video inserts as well as images and will have the same issue). I’m not giving up either way though as this is way to cool and I’m learning a lot today.

Ok, final question:
On my single.php I created 2 separate areas to show the thumb and the video. Obviously I only want the special divs with the thumb or video to show up if the user input a thumb or video.

I am currently using this logic
```
if ( get_post_meta($post-&gt;ID,'key', true) ) {
```
I basically have 2 of the above, only one calls the ‘thumb’ and the other calls the ‘video’

The problem I am having with that logic is simple. If a user inputs a value into ‘thumb’ and no value into ‘video’ then my function outputs both.

I think it’s from my ‘if post meta {key}’ function accepting an input into either field as a positive response.

I tried changing key to ‘thumb’ and ‘video’ but that did not work.

How would I write an if statement that checks the object within the array to decide whether or not to display my output divs?

LOL—that last sentence sounds so confusing
Gilles Toubiana » Mes favoris du 15-10-09 au 16-10-09 said:

[...] Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels i… [...]
Matty said:

Hey Spencer,
Thanks for this revisit. It’s great to read the original post and then this revisit straight after. I’ve used your original post as reference for a few projects with great success.

Thanks again. Great blog post.

Cheers,
Matty.
Spencer said:

@shawn,

I updated my code, and added the htmlspecialchars to it, because really it should be used on all inputs, not just ones that have videos. Check out line 10 in the code: http://pastie.org/657465 (it wouldn’t let me paste it in the comments for some reason.)

As for your second part, you are still trying to check for a custom field with a key that does not exist. The concept of the updated way is to store all of the data in one row, with one access key, which is split into an array.
```
$data = get_post_meta( $post-&gt;ID, 'your_key', true );

if( $data[ 'video' ] ) :
     // do something
endif;

if( $data[ 'thumb' ] ) :
    // do something
endif;
```
Hope that clears it up.
Spencer said:

@Daniel Anderson

You could definitely make a drop down. In the array of options, you would have to define what type of field you want to display. Then, in display_meta_box() check to see which type it is, and display the corresponding input.
links for 2009-10-16 | Links | WereWP said:

[...] Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels in Wor… One year after the first one, here comes the second evrsion of a great tutorial to tach us about cutom write panels in WordPress: how to create them, and how to to create them correctly! Have a look! (tags: wordpress plugin custom tutorial) Leave a Reply Click here to cancel reply. [...]
Wes Bos said:

Great Article.

I find this to be the easiest and cleanest way when dealing with a lot of text info. When you get into image uploads and whatnot its much easier just to use flutter.

For someone that doesn’t know PHP, flutter would be good too.

Apparently there is something in the works for flutter, watch for it really soon.
CSS Brigit | Revisited: Creating Custom Write Panels in WordPress said:

Revisited: Creating Custom Write Panels in WordPress…

Learn how to extend the possibilities of Wordpress using custom write panels. Taking our popular tutorial from last year and extending and improving the techniques to help you make the most of Wordpress.

…
contractor web design said:

I’ve been looking for this as I’ve been customizing my personal blog, thanks
shawn said:

I seem to have everything working now with one exception:

I can’t seem to figure out what the ‘if’ statement should be on my single.php file.

I need a command that says ‘if there is a value for ‘image’ then….. output my div container
(I only want to output a special div holding the image if there is an image input into the admin panel, otherwise don’t show the div)

Right now I am using
```
if ( get_post_meta($post-&gt;ID,'key' ) )
----add my div for image---
```
This does not work, and seems to output whether there is a value inputted into the ‘image’ field on the form or not.

Could someone please provide some guidance on how to do this right?

thank you

Spencer said:

@shawn,

Looks like my comment got stuck in moderation! Here is the code I posted above (http://wefunction.com/2009/10/revisited-creating-custom-write-panels-in-wordpress/#comment-33356) :


$data = get_post_meta( $post-&gt;ID, 'your_key', true );

if( $data[ 'video' ] ) :
     // do something if there is something in the video field
endif;

if( $data[ 'thumb' ] ) :
    // do something if there is something in the thumbnail field
endif;

TeMc said:

@Moodyjive,

Another way to improve your search is to use this plugin: Search Unleashed:
http://wordpress.org/extend/plugins/search-unleashed/

It will not only search custom-fields but also many others things. It also enables full-MySQL search (so code generated by plugins get’s searched aswell). And much much more .

@Spencer:

Is it possible to make an upload button in a meta_box (like [Browse..]), which will upload to the defined wp-upload folder (ie. wp-content/uploads/) and then put the URL to it in an input-field. Because I hate to explain to clients to use wordpress’ built-in functionality and then NOT click “Insert Image”, but instead click “file URL”, then select the link, copy it, close the window, go into Custom Fields, choose the drown-down-menu-item and then paste the link.

A meta-box/write panel for that would be awesome !
–
Thanks in great advance if you can do so,

–
TeMc
shawn said:

@Spencer — Thank you, it worked perfectly!

@TeMc — Looks like great minds think alike lol..
I was talking with a few other developers about the same thing. It’s amazing the steps we go through just so a client does not have to copy and paste anything… One would think it’s no big deal, but man, the headaches I get trying to explain the cut ‘n paste method you have to use in wp.

I was going to try and see if it’s possible to ‘replicate’ the media buttons on the admin, to add them to my custom write panel, so a user would simply click the media button in the panel and it would insert the ‘image/video/audio’ into the custom field box instead of the write panel input box.

I’m guessing that would not be to easy, but I can’t imagine it’s impossible.

In my case, it’s gonna be even harder, as Spencer said it’s ‘impossible’ for wordpress to understand shortcodes inserted into the write panel input fields.

I use the kaltura ‘all in one video plugin’ to add video’s to the articles. That plugin simply inserts a shortcode into the article for the video.

‘IF’ and that’s a big if from what Spencer said, we can find a way to get the custom write panel field to ‘parse’ shortcodes, and it can be combined with ‘copying’ the media buttons to the write panel, then the solution would be final.

Anyhow, that is a project for another day, as it is WAY beyond what I am able to build at this moment, though I do learn fast.

It would be really cool though, and would open many possibilities.
links for 2009-10-16 | Digital Rehab said:

[...] Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels in Wor… (tags: wordpress tutorial cms hacks php custom-field custom development plugin themedevelopment) [...]
Matt said:

Your “serialized array” solution is fine until someone actually needs to do filtering and other stuff with that data.

What if the user wants to show only posts where the “color” field is “green” and ordered by some date field?

You’d have to load ALL custom fields, unserialize them, then use PHP for the processing instead of MySQL.

Your new solution is great for attaching *metadata* to posts, but the old one was probably better for this kind of filtering.
links for 2009-10-16 « Free Open Source Directory said:

[...] Function Web Design & Development Blog – " Revisited: Creating Custom … Almost a year ago (wow, time flies!) I wrote a little tutorial explaining the nuances of add_meta_box in WordPress, and how it can be used to create some nifty Custom Write Panels. It was a nice little script, and still functioned great. I use it on almost all of the projects Liam and I have, and up to this point, it has been great. However, for an upcoming project, I foresaw some problems. (tags: Function Web Design & Development Blog - " Revisited: Creating Custom …) [...]
Daily Digest for October 16th | Evan Mullins = Circlecube said:

[...] Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels in Wor…. This entry was posted in lifestream. Bookmark the permalink. Comments are closed, but you can [...]
riant said:

I just save the “Final Code” with a file, then named it with CustomWritePanel.php, insert the code

/* Plugin Name: Custom Write Panel ….
…
*/

to it like a plugin. edit the name, title, descraption to yours,

then, upload it to folder “plugins”, so, you know what to do.

_______________It can’t display Chinese, so, I wish you can understand my terrible English and it can help you.
51 liens sur Wordpress, jQuery, CSS, design … said:

[...] Creating Custom Write Panels in WordPress Créez vos propres champs additionnels avec wordpress (CMS style). A voir ! [...]
Eoin Redmond said:

Very useful stuff, always working with Wordpress Blogs - thanks
?WordPress?????????? | ??? said:

[...] ?????Spencer?????Creating Custom Write Panels in WordPress???pedfcba [...]
Jez Thompson said:

Brilliant tutorial thank you so much.

I’m using it on my posts page.

I wouldn’t mind adding it to the page pages, not just the post pages.

Is this possible and can it be separate to the posts fields?

Thanks again
Spencer said:

@Jez,

in the create_meta_box function, change/add the following:

add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'post', 'normal', 'high' );

to:

add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'page', 'normal', 'high' );

That just changed “post” to “page” show it will show up on the posts page. Right now, it will use the same options, as it calls display_meta_boxes function. But with some tweaking, you could add different options.
Eugene Gordin said:

This is an interesting solution, but I have come up with a slightly different solution that allows me to use my custom fields inside of posts, using the Custom Field Templates plugin (http://wordpress.org/extend/plugins/custom-field-template/) and a little plugin I wrote that uses shortcodes: http://egord.in/1b

Let me know what you guys think!
Jez Thompson said:

Cheers Spencer, very handy.

Any chance you can change the ‘Key Custom Post Options’ title to anything you wish?

Or are you stuck with that being some default WP title?
TeMc said:

@Jex Thopson:
No, you’re not stuck with that
See the “Final Code” line 18. You can edit it to whatever you wish
Spencer said:

@Jez,

Yep, TeMc is correct. You can just edit the second parameter in add_meta_box, which I’ve set to ucfirst( $key ) . ' Custom Post Options'.
Web Design Singapore said:

this is brilliant! wasnt looking for this but since we stumbled across, it comes in handy!
Jez Thompson said:

Spencer can this be used when sorting posts via custom field date.

I.e you would normally use something like this..
```
   1.
```
With the custom field being date.

How would you incorporate yours in the above custom field of say
Into the above query.?

Or not possible?

Cheers
Jez Thompson said:

Whoops not printed…

Cannot show php
The code on this page, i.e how do you use this custom method in a query to filter say by date…

http://snipplr.com/view/13971/wordpress-sort-order-by-custom-field-for-specific-category/
bayilik said:

it is very good sharing for wordpress blogs.Thanks.
Alex Mathers said:

Excellent post, really clear and helpful. Thanks for putting in the effort!

Alex
Spencer said:

@Jez,

I’m afraid it can’t be done using this method. As Matt pointed out above, since it is all in one field, you can’t use it to sort.

If you set it up using the old method (http://wefunction.com/2008/10/tutorial-creating-custom-write-panels-in-wordpress/) you can sort it by the specific key.
Revisited: Creating Custom Write Panels in WordPress | Design Newz said:

[...] Revisited: Creating Custom Write Panels in WordPress [...]
Lana said:

Can I ask what probably seems like some not so smart questions? Well to you guys anyway?

I am wanting to use this code but unsure about a few things as I am newer to wp and wpmu with a basic knowledge of php.

Is all of this code suppose to be included in one file?
If so . . .
What file and is it a file that I need to create?
Is there a specific name I should give the file?
Where should I put the file, in the mu-plugins directory?

My goal is to create a recipe form in the write post page including text areas for the recipe name, description, ingredients, etc.

Thanks so much up front . . . Lana
Spencer said:

@Lana,

You can either put all this into a single file, upload it to /wp-content/plugins/ and activate it as a plugin, or you can put it all in the functions.php file of the theme. If you are using WPMU, it would probably be better to make it a plugin so it can be used across all themes.
Lana said:

Thanks for the fast reply and the advice Spencer. I am using wpmu and want these changes to be automatic across the board for all new blogs. I will get on it and see if I can make it work.
Autonomy said:

Thanks for the code and in-depth instructions. Great article Spencer.
Lana said:

I had this working earlier but I do not know what happened. I thought a fresh set of eyes might help . . .

[sourcecode language='your-lang']
array(
“name” => “name”,
“title” => “Name”,
“description” => “The name of your recipe. The name of the recipe will appear on all printables, including canning labels.”),
“from” => array(
“name” => “from”,
“title” => “From”,
“description” => “eg. From the kitchen of "Your Name Here", This will appear on all printables, including canning labels.”),
“description” => array(
“name” => “description”,
“title” => “Description”,
“description” => “A short description of about 15 words. The description will appear on all printables, including canning labels.”),
“ingredients” => array(
“name” => “ingredients”,
“title” => “Ingredients”,
“description” => “List your ingredients here.Copy and paste this <br ⁄> at the end of each ingredient to list them vertically. eg. 1 cup flour<br ⁄> 1 cup sugar<br ⁄>The ingredients will appear only on the printable recipe cards and cookbook pages.”),
“directions” => array(
“name” => “directions”,
“title” => “Directions”,
“description” => “Add the recipe directions here. The directions will appear only on the printable recipe cards and cookbook pages.”),
“story” => array(
“name” => “story”,
“title” => “Story - History - Of Special Note”,
“description” => “This is an area where you can add the family history of the recipe or an intriguing story about the recipe.The special note will appear only on the printable recipe cards and cookbook pages.”),
);

function create_meta_box() {
global $key;

if( function_exists( ‘add_meta_box’ ) ) {
add_meta_box( ‘new-meta-boxes’, ucfirst( $key ) . ’s Go Here’, ‘display_meta_box’, ‘post’, ‘normal’, ‘high’ );
}
}

function display_meta_box() {
global $post, $meta_boxes, $key;
?>

ID, $key, true);
?>

<label for=”">
<input type=”text” name=”" value=”" /> . . .

[/sourcecode]

It is not writing the fields listed above to new blogs.
Spencer said:

@Lana,

You are missing a few lines of code at the start of the document. Your first 3 lines should look like this:

<?php
$key = “key”;
$meta_boxes = array(
Ahmad Esmaeilzadeh said:

Thank you man!
Lana said:

Hmmm . . . not sure why that wasn’t included but it is included in the file that I created and placed in mu-plugins. It is the first 3 lines of the code. My apologies Spencer and Ahmed. I will try it in the plugins directory and see what that does.

- - - -

Nope . . .that didn’t work either. I will keep looking.
aceh said:

nice post…thanks
Spencer said:

Can you paste the whole file to http://www.pastie.org?
» Les liens du week-end oxynel, blog communication - Agence de communication Montpellier said:

[...] Revisited: Creating Custom Write Panels in WordPress [...]
Lana said:

Done . . .
http://www.pastie.org/668944

Just a note . . .

I have tried everything I can think of. I even used your original code from the “Final Code” above as is. All I continue to get is nothing, as if the file did not exist.

On the plus side, thank you so much for being so nice to go the extra mile to help a web monkey such as myself. We know just enough to be dangerous you know.
In case you need to know I am using wpmu 2.8.4

and if you need it . . .
l j m y e r s - at - h o t m a i l
Simon said:

nice tutorial. is it possible to add a textarea with wysiwyg-editor?
Spencer said:

@Lana,

Are you installing this the same way you do other plugins? Everything in the code looks fine. The only thing I can think of is the way you are activating it.
PHPDeveloper said:

I have made many mods to worpress themes and I have tried to tackle this issue. However this article has siplified the issues I was having and gave me the ability to solve the few quirks i was having
Daro said:

Hi Spencer, first of all congratulations on this article it has been extremely helpful. I just have one question. I’m using the code in my functions.php file so how would I implement the wp_nonce_field() function from there?

Thanks.
Lana said:

@Spencer,

I created the file, named it customwritepanel.php and uploaded ftp via Filezilla into my mu-plugins directory. From there and also when I tried it in the plugins directory, I see no where that would prompt me to activate it in the admin panel like other plugins. Did I miss something? If so, let me apologize for being a problem child up front. I just assumed that it was like many of the plugins in mu-plugins, that once uploaded, it was just there and working.
Lana said:

@Spencer,

OK - I tried moving the file to the plugins directory and did find in the plugins page that I needed to activate it. I did so and created a new blog but still nothing. I’m stumped.
Joe said:

Thanks for posting this…it was just what I needed for a current project I’m working on. I was using custom fields to add/format various content but this makes it so much nicer and more user-friendly for the people doing the content editing. Great work!
Spencer said:

@Lana,

I don’t know much about WordPress MU. Have you made sure you allowed plugins to be used by other blogs?
Joe said:

Is there a way to add TinyMCE to the custom fields?
Tutorial: Custom Write Panels | Wordpress Lesezeichen said:

[...] Custom Write Panels http://wefunction.com/2009/10/revisited-creating-custom-write-panels-in-wordpress/ Tweet This!Share this on TechnoratiSubmit this to NetvibesAdd this to Mister WongMark this on [...]
Lana said:

Hey Spencer,

Hope you don’t mind my adding this here. I thought it might be helpful to wpmu users and to you as well. I went on another search for something that worked with wpmu. For anyone who uses wpmu I found this . . .

http://www.clarksonenergyhomes.com/wordpress/projects/wordpress-plugin-add-dynamic-meta-boxes/
Webdesigner Buffet | nachtmeister.ch said:

[...] Eigene Formularfelder im Wordpress Backend [...]
Brian said:

Hi Spencer,

Great tutorial, but I went for the first article you did due to the flexibility of the keys and values for future use.

Can you spare me your advice? Everything works a treat except the only way I can call the information in the theme template is by using ‘get_post_meta’ . I want to use the ‘get_custom_values’ etc, but nothing works … even the basic ‘the_meta’ .

If all else fails I can work with ‘get_post_meta’ but I find it a little weird.

Anyway, thanks for the article.

Brian
Ben said:

Hey, thanks for this very great plugin. But i have a problem with line breaks in my custom fields. The wont show up when i echo the fields content. is there a way to achieve the line breaks?
Dalesh Kowlesar said:

Awesome work and code. Am going to try this out very soon. Thanks for posting and sharing!
Deepak Bari said:

Hi, Nice information, It is very useful for me. Thanks
Brian said:

Hi Spencer,

Regarding my above comment. The word in the Wordpress forum is that when you create your own custom fields you can only access them by get_post_meta and none of the other commands.

Did you know that? Any ideas on a work around?

Thanks

Brian
Spencer said:

@Brian,

I did not know that. I’ve always only ever needed to use get_post_meta. Why do you need to use something else?

@Ben,

Try http://php.net/manual/en/function.nl2br.php
Brian said:

Hi Spencer,

Using the info from Wordpress itself -

http://codex.wordpress.org/Using_Custom_Fields

- you can see the following uses for getting the info from a custom field –

the_meta()
get_post_meta()
get_post_custom()
get_post_custom_values()
get_post_custom_keys()

….apparently when you make a custom write panel in the admin area you lose the use of all but ‘get_post_meta’.

I would like the use of all those for a large website I’m doing for a travel company. It would make it easier to set up a system where we have an area for comparing locations, dates, prices, etc. All these would be accessed by the ‘custom’ tags.

Anyway, this isn’t a stab at your hard work, I think it is more a flaw with Wordpress. Thanks for the great tutorial. I am still using your code and am nearly finished adding tinyMCE to a ‘textarea’…. which I’d gladly share with you when complete.

Take care,

Brian
Brian said:

Just in case your asked in the future I have found this… http://wordpress.org/support/topic/222226?replies=5

I now have the tinymce displayed but the info I enter isn’t saving as a custom field. In fact it isn’t saving at all.

http://pastie.org/678400 in case you fancy helping out. You can have all the credit, I promise!!

I’m sure line 68 is where the problem is but I don’t know a solution.
Mohit said:

Fix up the spelling of panel in the post image on top. It says ‘pannel’ right now.
izuddin.helmi said:

Dude, thanks! =)

Very useful to me!
em hr said:

Hi Spencer-

Thanks a ton for returning to this topic. My biggest wish from the last custom write panel tutorial was storing the data in an array.

My only comment is why not move the get_post_meta call in line 32 of your final code example to line 30 and get it out of the foreach loop. I’m not seeing the need to get the meta each time around the loop. Correct me if I’m wrong.

-Gene
Jean said:

Try out http://pods.uproot.us/ it is something similar
Randy said:

Fantastic article!

I am wondering how to create a custom query based on a meta value using this system? Using &meta_key=image (or whatever) does not work in this case because the meta value is part of an array.

Thanks!
Spencer said:

@em hr,

Yep, good call! It certainly should be outside of the loop.

@Randy,

You’ll have to use the old method here: http://wefunction.com/2008/10/tutorial-creating-custom-write-panels-in-wordpress/
Greg said:

Hey Spencer,

Thanks so much for this post!

I’m trying to use this for two purposes:

1) 7 custom images (per post)
2) 1 custom homepage image (1 per post)

SO, a total of 8 images per post.

Now the 7 images will ONLY appear on the particular post they are associated with. These are appearing just fine. Works like a charm.

The trouble arises here:
The 1 custom homepage image will appear on the homepage, after looping through the posts. I’m using query_posts on the homepage to list 2 posts and I’m using your method to access the custom field array. The weird thing that’s happening is the image is being displayed with the incorrect post.

In my test data, I have the URL for the image added to Post #2. Post#2 is the most recent post.

Post#1 is the older post & does not have the image URL added to the custom write panel.

However, after viewing the homepage, Post#1 is displaying the image from Post#2.

Help! I have no idea why this strangeness is happening. Thanks! If you need code, I can email you what I’ve got.
Justine said:

Big thanks for the tutorial! Custom write panels are so much easier to use (especially for clients) that custom fields.

I have a small problem though - I’m not sure if I should copy the final code to my functions.php file or create a separate file as a plugin?

I pasted your “final code” to functions.php and it seems to work great, but when I try to publish/save the post it returns a blank page (wp-admin/post.php). The values are saved however, when I return to editing that particular post. I’m guessing something is wrong with the saving function?

Here’s the code I pasted into functions.php: http://pastie.org/684053
Justine said:

A little update:

The final code works perfectly as a separate plugin. Publishing/saving posts works as intended too.

Is there any way I could change the code to use it in my functions.php file?
Priya Ovhal said:

Hi,

This was very informative but quiet technical for people not so tech savvy to understand. Well I am one of these people. But I know that I will be able to use this informative resource for this website http://fromhomeworkers.com/entrepreneurs.shtml. Do visit us and leave your comment.

Regards

Priya
Greg said:

Here’s an update with the code I’m using when trying to display these images. Still not working properly, but no idea why. This works on an individual page, but not when trying to call images from multiple posts:

This is the code from the homepage:
http://www.pastie.org/685159

Thanks!
Spencer said:

@Greg,

Where are you defining $data? You need to do it inside the loop, so it will get the custom data for each post.

@Justine,

If you just copied the final code, it should work. The only thing I can think of is that you don’t have the correct permissions to save a post. Are you logged in as an administrator?
Greg said:

I’m not sure entirely where $data is being defined.

Here’s the code I am using on the homepage, when running through my 2nd loop trying to gather the images(custom fields) from the relevant portfolio posts:
http://www.pastie.org/685159
Css gallery said:

Wordpress is not really powerful like drupal
Eliwagar said:

Hi, I am pretty new to actually do coding in wordpress, so this might be a dumb question…but is iti possible instead of putting the code into the functions php to put it into a plugin?
Spencer said:

@Greg,

Take $data = get_post_meta( $post->ID, 'ggamel', true ) out of the while loop and put it after the_post()

You have to loop through the posts, then the_post sets up the post meta (including ID) so now $data will have the proper post ID and can get the proper image.

@Eliwagar,

Yes. Just put all the code into a file, upload it to the plugins directory, and activate it.
Justine said:

@Spencer,

Yes, I made sure I was logged in as administrator. Tried again - removed the plugin comment from the file and saved it as functions.php (without any other additional code in it, like widgetized sidebars etc.). Now the whole admin area is a blank page, not just after saving the post.

Could you paste the final code to pastie with intends and all, if that’s not too much trouble, please? Thanks in advance!
eliwagar said:

Thanks Spencer! I did like you said and the plugin is running, but how do I make the input show now? The code I added to the theme that worked before (when the custom write panel code was in functions.php) doesn´t show the entries anymre
eliwagar said:

Oh…and I kind of got lost on the part how to make images work for wpmu user (I use mu)…could somebody post what code I have to add in which part? Somehow I didn´t quite get that…
31 DESIGN, Studio Web, Paris » Gestion avancée de contenu dans WordPress said:

[...] perception qu’ont certaines agences mal informées des possibilités de ce logiciel. Grâce aux custom fields on peut tout faire avec un WordPress : catalogue de produits, calendrier d’évènements, annuaire [...]
Wordpress??????????????????Tips | Nutspress said:

[...] Ways to Customize and Personalize your Wordpress Blog WordPress Visual Cheat Sheet Revisited: Creating Custom Write Panels in WordPress 18 Useful Tricks To Speed Up WordPress & Boost Performance 30+ New Useful WordPress Tricks [...]
Kristof said:

Hi Spencer,

great post, thanks a lot - your codes helped me a lot through all my wordpress projects! Though I have a question:

I learned a lot from your first version of this code and used it for my custom write panels. I also made a little plugin that let me duplicate a given set of custom fields and storing them all separately (similar to flutters functionality).

Now with my basic php knowledge that was pretty unperformant and a little buggy, plus I ended up with often more than 20 custom fields per post. So I implemented your new code for the panels I am creating - but I’m stuck with the one that can be duplicated.

How comlicated would it be to use this code and save X versions of the data array to one custom field each? So far I used to set up my set of custom fields, duplicate this set as needed with jquery, and storing the total amount of sets in a hidden custom field for displaying and saving
- and I think this could be done with those data arrays much more easily, but I’m not quite there yet. Could I duplicate the key and simply looping through all my sets when I save or display the panel?

(that’s my old code: I know, it’s a mess, but it works http://pastie.org/689444 )
website design said:

Hey that was a really nice post… I work in a website designing company and appreciate it a lot…
Waheed Akhtar said:

Nicely done. Thanks for sharing this!
Spencer said:

@Kristof,

Why do you want to save multiple versions in the single array? The easiest way I can think of would be to add another dimension to the array, and just add the new data to the array.

Array
(
[0] => Newest Info
Array(
[0] Custom Field
)
[1] => Older Info
Array(
[0] Custom Field
)
[2] => Even Older Info
Array(
[0] Custom Field
)
)

Is that what you were talking about?

(Sorry about the spacing, WP takes it all out)
Jauhari said:

This plugin
http://wpgogo.com/development/custom-field-template.html

Do the some jobs right?
Kristof said:

Hi Spencer,

thx very much for your answer, but it’s not quite what I meant. I’m using wordpress as an event manager and I’m using a custom write panel to save the venue and some side infos on the bands - I should have said that right away, I think it makes the indea much easier to understand
I already managed to save the data the way I want. I’m creating one custom field for each band (eg set of data) and saving an array to it. Here’s the code:

http://pastie.org/690514

Now I get one custom field for each band, stored like:
band_1 - a:4:{s:4:”band”;s:11:”Band Name01″; …
band_2 - a:4:{s:4:”band”;s:11:”Band Name02″; …
etc…

Yet until now, I have to set the amount of fields manually in my “numbands” field and save the post to get the function called again and to create the amount of input sets I need.
I was wondering if there is a way to refresh the write panel with a button, or even to add sets of inputs via jquery, withouth having to hard-code all the form in js?
Matt said:

Great article. What I am trying to do is add a button that will convert a post to a page and a page to a post. I know there is a plugin to do this, but I wanted to build it into my theme.

I would like to add a button and, if clicked, execute some PHP code.

Thoughts?
Giorgi said:

It would be nice to see plugin or way to compare values to each other, for example prices.
Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels in WordPress | Rumball Motors Interactive said:

[...] Function Web Design & Development Blog – » Revisited: Creating Custom Write Panels in Wor…. Tags: Write Panels Be the first to start a conversation Click here to cancel [...]
Chris Robinson said:

Excellent follow up post Spencer, looks much cleaner.
Chris said:

Hi,

Sounds like a really good idea but i cant seem to get it to work!

I uploaded the final code into a plugin, and activated it, and the fields showed in my post.

But when I update the post the page goes blank and nothing shows. Then when I check the post nothing is shown in here also.

The example at the top about events is exactly what I want, and once I understand how to make that I can customise it to what I need.

It would be good if you could show how to add the custom fields and then go onto showing how to display them.

The link between this is missing for me and I am failing to make the code work.

Would it be possible to show the whole process?

From implementing the custom field code > showing how to display the data?

Any help would be great.

Thanks
Chris
Spencer said:

@Chris,

There is a whole section at the end of the article about Implementation. What part are you having trouble with?
Chris said:

@Spencer

I am adding the code to a plugin, it activates ok and everything works.

But maybe I am not putting the code for the while loop in the right place. Im not sure I am following the instructions above.

Also I have added into the body of the code but it dosent show.

Could you not make a plugin that auto feeds in the correct code into the while loop?
izdelava spletnih strani said:

I’ve been avoiding wordpress, and rather used blogger but cos of this i’m willing to try it one more time
Spencer said:

@Chris,

Then you wouldn’t have control over the data that is being displayed, or where it is output.

Just make sure it is that is inside the while loop, and that the information is actually being saved to the database.
John MacMenamin said:

I can’t get this code to save the fields. They show up but won’t save into custom fields.
Mitch said:

This is fantastic and really takes Wordpress as a CMS to the next level. One question I do have is… Can this be used for pages as well as posts?
Rob said:

Hi Spencer

Great work on the code, If I wanted to implement this script to specific categories or specific pages, how would I go about doing it?

Rob
John MacMenamin said:

I’ve spent a lot of time and the way this code is, it will not save the fields.

Is this meant to be used as a plug-in?

If so could someone be kind enough to send a paiste link to this code working as a plug-in?
Eugene Gordin said:

@John MacMenamin

My implementation of this concept works as a plugin with the Custom Field Templates plugin and shortcodes. Check it out here: http://egord.in/1b

Let me know if that helps you at all since its more self-contained.
John MacMenamin said:

@Eugene Gordin Thanks for the recommendation but I’m trying to add this to a theme. I need it to be setup from the start so people who don’t know php and quickly add three custom field keys to their posts.

BTW I have WordPress 2.8.6 and no plug-ins active.

I need keys of:

image
audio
video

If I can get this venilia script working I can add\change the fields.

If someone could take this code and get it working as a plug-in .zip that would be amazing!
EG said:

Awesome tutorial!

Got a question though. How would I get my custom fields to insert data into a separate table. I already read how to create plugin with a your table, but it fails to show you how to insert data from the admin panel.

Any points in the right direction would be helpful.
discount tiffany jewelry said:

Great work on the code, If I wanted to implement this script to specific categories or specific pages, how would I go about doing it?

Rob
NoktahHitam said:

Spencer is there anyway for me to do this using “press-this.php” found in wp-admin folder?

I’d like to update on the go, without having to login to Wordpress site and copy paste the whole thing.

I’ve tried, but it went horribly wrong. So I decided to give it a try myself. (I am not a programmer, but a web enthusiast)

If you could you shed me some light it will be tremendously helpful.

http://wordpress.org/support/topic/333549?replies=1
Mark said:

I have used what you have written above and it works well. The only things is, is that I want to display different write post panels, for pages and posts. Therefore I use the code above to create the one for posts, and add more boxes as necessary.

Then if I add another lot of code to functions.php, change the $key to a different name it breaks the site. How would I create two lots one for pages and one for posts.

I have managed to alter the one above for pages and not posts as you described however I can’t get two at the same time working.

Also when I used custom fields I always check the custom field is present first, however when using this method can you still do this and if so how. I use code to check the custom field is ‘true’ or present first and then echo it if it is

However doing this with your code, where I have post-img as the key, this holds all of the different meta values so I can’t check them individually.

Would love to get this working and then I don’t have to rely on plugins. You help and time would be very much appreciated.

Thanks.
Cedric said:

I didn’t try this trick yet but it seems to be a great one!

Is it possible to make different models of post/pages with custom write panels?
Picking A CMS – Part 3 (A little bit of Wordpress) | Web Development 2.0: Web Design, CakePHP, Javascript said:

[...] There’s Flutter, PODs (just found out about this), Magic Fields (fork of Flutter), Custom Write Panels, and more. From what I’ve seen, Flutter, Magic Fields and PODs are the most powerful among [...]
Glyn Mooney said:

Thanks dude
Cedric said:

Thanks!

I already knew plugins like Flutter, PODS or Magic Fields.

But I’d like to know how to do different models of custom write panels without a third-party plugin. Just for the pleasure of learning something new. That’s why I like this very interesting post!
10 Tutorials to Take Your WordPress Development Skills to the Next Level | Web Design Byte said:

[...] are plenty of other ways that you could use this to improve your themes. Spencer has also written a follow up to the orginal article where he makes some improvements the to code being [...]
Peter Tasker said:

This is a really great set of functions. Will be using it quite frequently I can see. Thanks a million!
Tom said:

I made the input of my custom field a textarea, and now it’s not saving the information.

Is there something special I need to do?
Web design miami said:

The right information in the right time ! Thank uuuuuuuuu . It was a really help for me ! we expect more from uu , keep going !
Tom said:

Nevermind. I had neglected to move the value to withing the textarea tags.

Thanks for the tutorial! Excellent!
Tom said:

I was able to get the TinyMCE editor to work by defining the textarea tag as “theEditor” — however, now it’s not saving the paragraph tags … the other tags yes, but not paragraph tags.

Any thoughts?
Mikel said:

Hi Spencer, many thanks for your great work in sharing this technique. I have been looking for a way to simplify custom fields entry for some time.

There is one feature of wordpress custom fields that I would like to retain: the ability to enter multiple values with the same key, for example, to enter multiple event dates.

I wonder if a custom admin panel field can be optioned to enable duplication by a user.
Brian Artka said:

Great functions Spencer.

One question… that I didn’t see in the current comments..

Is it possible to have two sets of the custom fields on two different pages?

ie. I changed the var on the one function to place this on my pages instead of posts and it works great. I have setup about 4-5 fields to use for slideshow images on the home page run by jQuery.

I’d also like to have a different set of fields on some internal pages to place img files for a simple image gallery.

Is it simply making a new set of functions with some var name changes?

thanks!
Azterik Media said:

Great tutorial! Thanks for taking the time to put this information together, very helpful!
Matt said:

Hey,

Great tut.

I was wondering if it’s possible to create more than one drop down box/write panel?
siteler mutfak dolabi said:

I’ve been looking for this as I’ve been customizing my personal blog, thanks
boyaci said:

This is interesting, I never knew about this. I’ll try it out sometime.
Creating the Fresh Blocks Site - Fresh Blocks said:

[...] for adding each individual project’s details. We created one similar to Function’s Revisited: Creating Custom Write Panels in WordPress article. Below a screenshot of our custom Project Details [...]
nowgoogle seo challenge said:

Nice article, thanks for sharing.
sz said:

Warning: include(/wp-content/themes/mytheme/functions.php) [function.include]: failed to open stream: Permission denied in /www/kaczkowski_www/www/wordpress/wp-settings.php on line 715

Warning: include() [function.include]: Failed opening ‘/wp-content/themes/mytheme/themes/k2-kaczkowski/functions.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /wp-settings.php on line 715

Anyone knows whats wrong? functions.php is 644 @wordpress 2.9.1
sz said:

Fixed: there was an
get_post_meta($post->ID
instead
get_post_meta($post->ID
Bogdan said:

Nice tutorial, it works great and it’s very useful.

Thank you!
jeffc said:

its very appreciable to do the best result among the corresponding areas.
Will Griggs said:

I’ve never really liked wordpress, but I guess I’ll try this.
Stephan Czepanik said:

Useful info which can be used. THANKS
adrian said:

very good tutorial.
But what if i want to use different boxes, let’s say, a dropdown list, a text area and maybe others.

how can you alter the code to insert different type of input.

i tried using “case”, but i can’t get it done.
Marc Deschamps said:

Excellent article, i’ll use it in a custom website i’m doing for a client

Thanks alot!
Yigit Ozdamar said:

I’m gonna try this urgently! Thank you mate!
veker said:

help!
[sourcecode language='en']
ID, ‘tinyurl’, true ) ) : ?>

[/sourcecode]
but no work! please help me.
veker said:

help![sourcecode] ID, ‘tinyurl’, true ) ) : ?>
[/sourcecode]
but no work! please help me.
Ceria said:

Hi thx,
Excellent article, i’ll use it in a custom website i’m doing for a client
turgayakar said:

great article, thanks for sharing
Tim said:

Both are AWESOME tutorials! The first saved my ass - I’ll spare you the details. You might consider linking to the first post at the beginning of this post.
tom said:

I have the same problem as Justine when I hit the save button I get a blank page but everything seems to be saved though. I have to go back to see the admin page.

@justine If you found the solution other than having it as a plugin I would be interested.

Thanks for this great site !
koosaj said:

Great tutorial, it works and it is very useful… Thnx
DenisB said:

Hi Spencer! Please tell me how to add video to post by custom fields? What code need to be in function.php and in Page template,I can’t understand. Please! Thank you!
babloo said:

Hi Buddy!!!

This revised word press theme can how far creative..??? reply me ASAP..meet again.
James said:

Hell Yeah !

Thanks that is a very valuable tutorial.
Jonas said:

Great Tutorial!
Does somebody managed to fix a second WYSIWYG editor into a custom field?
Trying to get this working for ages.

Thanks in advance
david swain said:

Hello

Looked through the comments but i couldnt find the answer….

Basically i want to create a few different write panels, one for posts of x type, one for posts of y type etc.

How would i go about doing this? If i have all the fields i need in one write panel it is rather large and unwieldy

thanks for your help.

David
Dan said:

Great write up, I am attempting to learn using custom write panels as I’d much rather use this than a plugin. Thanks for taking the time to write this detailed post. I do have one question; the version you posted displays single line text fields. How do I integrate a WYSIWYG box on top of this? ..and is there a way to remove the default WYSIWYG editor at the top?

Thanks!
Wp factory – 7 Great wordpress hacks and tutorials -- Premium Wordpress Themes said:

[...] Now this is an important tutorial to follow as it will make your life easier if you use custom fields a lot. Most premium themes already include that option now, but it never hurts understanding what happens behind the curtains. This tutorial might be harder to follow but the author provides the code to copy and paste and try for yourself. Check it out and the Latest revisited version [...]
psd to wordpress said:

Simply awesome tutorial!!! Been looking for something like this and this really helped out with a project I was doing. Keep it up.
DT said:

l want to try this and see bec looks usefull
Bob said:

Nice tutorial.
Church Website Design said:

I always want to create more creativenesses in my all designs. I really appreciate your design indeed. Very inspirational. People have to be more creative and innovative to explain their particular designs. Keep it up
Facebook Developer said:

Today the concept of every design either website or logo has changed. People concentrate on more innovative and unique designs. I really like it. Keep it up
Cheap Logo Design said:

You have really done a great job. Quite inspirational menus indeed. I like it and always appreciate unique designs. Thanks
Buttons said:

Thanks a lot.
Great article!
website design franchise said:

New ideas and discoveries are always welcome especially for the improvement.Blogging always require a design.They are much needed to make the article more attractive to read.
Rex Stevens said:

Hey, i have been searching through comments to see if you already answered a questions like mine, but i’m trying to add another meta box to handle a second set of data but have no idea how. Any ideas? code samples? Thanks in advance!

Revisited: Creating Custom Write Panels in WordPress

Custom Write Panels a year later. More efficient and expandable.

A quick Example

Where We Left Off (in functions.php)

Displaying the Write Panels

Saving the Data

Final Code

Implementation

Related Posts:

Share This:

182 Comments

Mike Smith said:

Chris M said:

The Frosty said:

Mihir Lakhani said:

Mihir Lakhani said:

Ryan Burrell said:

Caroline Keim said:

Moodyjive said:

Spencer said:

Leandro said:

Jeff said:

Spencer said:

shawn said:

Spencer said:

Nokadota said:

shawn said:

Spencer said:

Web in Review for October 15th, 2009 | Madyson Designs said:

Daniel Anderson said:

Devin Price said:

shawn said:

Gilles Toubiana » Mes favoris du 15-10-09 au 16-10-09 said:

Matty said:

Spencer said:

Spencer said:

links for 2009-10-16 | Links | WereWP said:

Wes Bos said:

CSS Brigit | Revisited: Creating Custom Write Panels in WordPress said:

contractor web design said:

shawn said:

Spencer said:

TeMc said:

shawn said:

links for 2009-10-16 | Digital Rehab said:

Matt said:

links for 2009-10-16 « Free Open Source Directory said:

Daily Digest for October 16th | Evan Mullins = Circlecube said:

riant said:

51 liens sur Wordpress, jQuery, CSS, design … said:

Eoin Redmond said:

?WordPress?????????? | ??? said:

Jez Thompson said:

Spencer said:

Eugene Gordin said:

Jez Thompson said:

TeMc said:

Spencer said:

Web Design Singapore said:

Jez Thompson said:

Jez Thompson said:

bayilik said:

Alex Mathers said:

Spencer said:

Revisited: Creating Custom Write Panels in WordPress | Design Newz said:

Lana said:

Spencer said:

Lana said:

Autonomy said:

Lana said:

Spencer said:

Ahmad Esmaeilzadeh said:

Lana said:

aceh said:

Spencer said:

» Les liens du week-end oxynel, blog communication - Agence de communication Montpellier said:

Lana said:

Simon said:

Spencer said:

PHPDeveloper said: